'use client'; import { useState, useEffect } from 'react'; import Link from 'next/link'; import SEOHead from '../../../components/SEOHead'; // Support type icons mapping const supportIcons = { technical: ( ), consulting: ( ), training: ( ), }; // Resource icons mapping const resourceIcons = { documentation: ( ), api_reference: ( ), tutorials: ( ), community: ( ), status: ( ), downloads: ( ), }; interface SupportPageProps { params: { locale: string }; } export default function SupportPage({ params }: SupportPageProps) { const currentLang = params.locale || 'zh-CN'; const [translations, setTranslations] = useState({}); const [commonTranslations, setCommonTranslations] = useState({}); const [loading, setLoading] = useState(true); const [openFaq, setOpenFaq] = useState(null); const [isMenuOpen, setIsMenuOpen] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [contactForm, setContactForm] = useState({ name: '', email: '', subject: '', message: '', priority: 'medium', }); useEffect(() => { const loadTranslations = async () => { try { const [supportRes, commonRes] = await Promise.all([ fetch(`/locales/${currentLang}/support.json`), fetch(`/locales/${currentLang}/common.json`), ]); const [supportData, commonData] = await Promise.all([ supportRes.json(), commonRes.json(), ]); setTranslations(supportData); setCommonTranslations(commonData); setLoading(false); } catch (error) { console.error('Failed to load translations:', error); setLoading(false); } }; loadTranslations(); }, [currentLang]); if (loading) { return (

Loading support...

); } const t = translations; const common = commonTranslations; // Filter FAQs based on search term const filteredFaqs = Object.entries(t.faq?.questions || {}).filter( ([_, faq]: [string, any]) => faq.question.toLowerCase().includes(searchTerm.toLowerCase()) || faq.answer.toLowerCase().includes(searchTerm.toLowerCase()), ); const handleContactSubmit = (e: React.FormEvent) => { e.preventDefault(); // Handle form submission console.log('Contact form submitted:', contactForm); // Reset form setContactForm({ name: '', email: '', subject: '', message: '', priority: 'medium', }); alert(currentLang === 'en' ? 'Message sent successfully!' : '消息发送成功！'); }; return ( <>
{/* Navigation */} {/* Hero Section with Enhanced Design */}
{/* Background decorative elements */}

{t.title}

{t.subtitle}

{/* Quick Action Buttons */}
{/* Quick Contact Bar */}

{t.contact?.phone}

{currentLang === 'en' ? 'Call us now' : '立即致电'}

{t.contact?.email}

{currentLang === 'en' ? 'Email support' : '邮件支持'}

{t.contact?.hours}

{currentLang === 'en' ? 'Service hours' : '服务时间'}

{/* Support Types */}

{currentLang === 'en' ? 'How Can We Help You?' : '我们如何为您提供帮助？'}

{currentLang === 'en' ? 'Choose the support option that best fits your needs' : '选择最适合您需求的支持选项'}

{Object.entries(t.support_types || {}).map( ([key, supportType]: [string, any]) => (
{supportIcons[key as keyof typeof supportIcons] || ( )}

{supportType.title}

{supportType.desc}

{supportType.features?.map( (feature: string, index: number) => (
{feature}
), )}
), )}
{/* Contact Form Section */}
{/* Contact Form */}

{currentLang === 'en' ? 'Send us a Message' : '发送消息'}

setContactForm({ ...contactForm, name: e.target.value, }) } className="w-full px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder={ currentLang === 'en' ? 'Your name' : '您的姓名' } data-oid="6_gk0ts" />
setContactForm({ ...contactForm, email: e.target.value, }) } className="w-full px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder={ currentLang === 'en' ? 'your@email.com' : '您的邮箱' } data-oid="8er5llc" />
setContactForm({ ...contactForm, subject: e.target.value, }) } className="w-full px-4 py-3 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder={ currentLang === 'en' ? 'How can we help?' : '我们如何帮助您？' } data-oid="b6fexcw" />