'use client';

import { useState, useEffect } from 'react';
import { Navigation } from '../../components/Navigation';
import { Footer } from '../../components/Footer';
import { Head } from '../../components/Head';
import {
    Book,
    HelpCircle,
    Activity,
    GraduationCap,
    Users,
    Phone,
    Mail,
    MessageCircle,
} from 'lucide-react';

export default function SupportPage() {
    const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');

    const translations = {
        zh: {
            title: '技术支持 - CloudPro 云服务器代理商',
            description:
                '提供全方位的技术支持服务，包括技术文档、帮助中心、服务状态、培训认证、社区论坛等。',
            keywords: '技术支持,帮助中心,技术文档,培训认证,社区论坛,客服支持',
            nav: {
                home: '首页',
                products: '产品',
                solutions: '解决方案',
                support: '支持',
                contact: '联系我们',
            },
            hero: {
                title: '全方位技术支持服务',
                subtitle: '7x24小时专业技术支持',
                description: '我们提供完善的技术支持体系，确保您的云服务稳定运行',
            },
            support: [
                {
                    id: 'docs',
                    name: '技术文档',
                    description: '详细的产品文档和API参考，帮助您快速上手',
                    features: ['产品使用指南', 'API接口文档', '最佳实践', '故障排除'],
                    icon: Book,
                },
                {
                    id: 'help',
                    name: '帮助中心',
                    description: '常见问题解答和操作指南',
                    features: ['常见问题FAQ', '操作视频教程', '配置示例', '问题诊断工具'],
                    icon: HelpCircle,
                },
                {
                    id: 'status',
                    name: '服务状态',
                    description: '实时监控各项服务的运行状态',
                    features: ['服务可用性监控', '故障通知', '维护公告', '性能指标'],
                    icon: Activity,
                },
                {
                    id: 'training',
                    name: '培训认证',
                    description: '专业的云计算培训和认证课程',
                    features: ['在线培训课程', '认证考试', '实验环境', '学习路径'],
                    icon: GraduationCap,
                },
                {
                    id: 'community',
                    name: '社区论坛',
                    description: '与其他用户和专家交流经验',
                    features: ['技术讨论', '经验分享', '专家答疑', '用户案例'],
                    icon: Users,
                },
            ],

            contact: {
                title: '联系我们',
                subtitle: '多种方式获得技术支持',
                methods: [
                    {
                        name: '电话支持',
                        description: '7x24小时技术热线',
                        contact: '+86 400-123-4567',
                        icon: Phone,
                    },
                    {
                        name: '邮件支持',
                        description: '技术问题邮件咨询',
                        contact: 'support@cloudpro.com',
                        icon: Mail,
                    },
                    {
                        name: '在线客服',
                        description: '实时在线技术支持',
                        contact: '点击开始对话',
                        icon: MessageCircle,
                    },
                ],
            },
        },
        'zh-tw': {
            title: '技術支援 - CloudPro 雲伺服器代理商',
            description:
                '提供全方位的技術支援服務，包括技術文件、幫助中心、服務狀態、培訓認證、社群論壇等。',
            keywords: '技術支援,幫助中心,技術文件,培訓認證,社群論壇,客服支援',
            nav: {
                home: '首頁',
                products: '產品',
                solutions: '解決方案',
                support: '支援',
                contact: '聯絡我們',
            },
            hero: {
                title: '全方位技術支援服務',
                subtitle: '7x24小時專業技術支援',
                description: '我們提供完善的技術支援體系，確保您的雲服務穩定運行',
            },
            support: [
                {
                    id: 'docs',
                    name: '技術文件',
                    description: '詳細的產品文件和API參考，幫助您快速上手',
                    features: ['產品使用指南', 'API介面文件', '最佳實踐', '故障排除'],
                    icon: Book,
                },
                {
                    id: 'help',
                    name: '幫助中心',
                    description: '常見問題解答和操作指南',
                    features: ['常見問題FAQ', '操作影片教學', '配置範例', '問題診斷工具'],
                    icon: HelpCircle,
                },
                {
                    id: 'status',
                    name: '服務狀態',
                    description: '即時監控各項服務的運行狀態',
                    features: ['服務可用性監控', '故障通知', '維護公告', '效能指標'],
                    icon: Activity,
                },
                {
                    id: 'training',
                    name: '培訓認證',
                    description: '專業的雲端運算培訓和認證課程',
                    features: ['線上培訓課程', '認證考試', '實驗環境', '學習路徑'],
                    icon: GraduationCap,
                },
                {
                    id: 'community',
                    name: '社群論壇',
                    description: '與其他用戶和專家交流經驗',
                    features: ['技術討論', '經驗分享', '專家答疑', '用戶案例'],
                    icon: Users,
                },
            ],

            contact: {
                title: '聯絡我們',
                subtitle: '多種方式獲得技術支援',
                methods: [
                    {
                        name: '電話支援',
                        description: '7x24小時技術熱線',
                        contact: '+86 400-123-4567',
                        icon: Phone,
                    },
                    {
                        name: '郵件支援',
                        description: '技術問題郵件諮詢',
                        contact: 'support@cloudpro.com',
                        icon: Mail,
                    },
                    {
                        name: '線上客服',
                        description: '即時線上技術支援',
                        contact: '點擊開始對話',
                        icon: MessageCircle,
                    },
                ],
            },
        },
        en: {
            title: 'Technical Support - CloudPro Cloud Server Reseller',
            description:
                'Comprehensive technical support services including documentation, help center, service status, training certification, community forum and more.',
            keywords:
                'technical support,help center,documentation,training certification,community forum,customer support',
            nav: {
                home: 'Home',
                products: 'Products',
                solutions: 'Solutions',
                support: 'Support',
                contact: 'Contact',
            },
            hero: {
                title: 'Comprehensive Technical Support',
                subtitle: '7x24 Professional Technical Support',
                description:
                    'We provide a complete technical support system to ensure your cloud services run stably',
            },
            support: [
                {
                    id: 'docs',
                    name: 'Documentation',
                    description:
                        'Detailed product documentation and API references to help you get started quickly',
                    features: [
                        'Product User Guide',
                        'API Documentation',
                        'Best Practices',
                        'Troubleshooting',
                    ],

                    icon: Book,
                },
                {
                    id: 'help',
                    name: 'Help Center',
                    description: 'Frequently asked questions and operation guides',
                    features: [
                        'FAQ',
                        'Video Tutorials',
                        'Configuration Examples',
                        'Diagnostic Tools',
                    ],

                    icon: HelpCircle,
                },
                {
                    id: 'status',
                    name: 'Service Status',
                    description: 'Real-time monitoring of service operational status',
                    features: [
                        'Service Availability Monitoring',
                        'Incident Notifications',
                        'Maintenance Announcements',
                        'Performance Metrics',
                    ],

                    icon: Activity,
                },
                {
                    id: 'training',
                    name: 'Training & Certification',
                    description: 'Professional cloud computing training and certification courses',
                    features: [
                        'Online Training Courses',
                        'Certification Exams',
                        'Lab Environment',
                        'Learning Paths',
                    ],

                    icon: GraduationCap,
                },
                {
                    id: 'community',
                    name: 'Community Forum',
                    description: 'Exchange experiences with other users and experts',
                    features: [
                        'Technical Discussions',
                        'Experience Sharing',
                        'Expert Q&A',
                        'User Cases',
                    ],

                    icon: Users,
                },
            ],

            contact: {
                title: 'Contact Us',
                subtitle: 'Multiple ways to get technical support',
                methods: [
                    {
                        name: 'Phone Support',
                        description: '7x24 Technical Hotline',
                        contact: '+86 400-123-4567',
                        icon: Phone,
                    },
                    {
                        name: 'Email Support',
                        description: 'Technical inquiry via email',
                        contact: 'support@cloudpro.com',
                        icon: Mail,
                    },
                    {
                        name: 'Live Chat',
                        description: 'Real-time online technical support',
                        contact: 'Click to start chat',
                        icon: MessageCircle,
                    },
                ],
            },
        },
    };

    const t = translations[currentLang];

    useEffect(() => {
        const browserLang = navigator.language.toLowerCase();
        if (browserLang.includes('en')) {
            setCurrentLang('en');
        } else if (browserLang.includes('zh-tw') || browserLang.includes('zh-hk')) {
            setCurrentLang('zh-tw');
        }
    }, []);

    return (
        <div className="min-h-screen bg-gradient-to-br from-amber-50 to-yellow-50">
            <Head
                title={t.title}
                description={t.description}
                keywords={t.keywords}
                currentLang={currentLang}
            />

            <Navigation
                currentLang={currentLang}
                onLanguageChange={setCurrentLang}
                translations={translations}
            />

            {/* Hero Section */}
            <section className="bg-gradient-to-r from-amber-900 to-yellow-800 text-white py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center">
                        <h1 className="text-4xl md:text-5xl font-bold mb-6">{t.hero.title}</h1>
                        <p className="text-xl md:text-2xl text-yellow-100 mb-8 max-w-3xl mx-auto">
                            {t.hero.subtitle}
                        </p>
                        <p className="text-lg text-yellow-200 max-w-2xl mx-auto">
                            {t.hero.description}
                        </p>
                    </div>
                </div>
            </section>

            {/* Support Services */}
            <section className="py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {t.support.map((service) => {
                            const IconComponent = service.icon;
                            return (
                                <div
                                    key={service.id}
                                    className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-amber-200"
                                >
                                    <div className="p-8">
                                        <div className="flex items-center mb-6">
                                            <div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mr-4">
                                                <IconComponent className="w-6 h-6 text-white" />
                                            </div>
                                            <h3 className="text-xl font-semibold text-amber-900">
                                                {service.name}
                                            </h3>
                                        </div>

                                        <p className="text-amber-700 mb-6 leading-relaxed">
                                            {service.description}
                                        </p>

                                        <div className="mb-6">
                                            <ul className="space-y-2">
                                                {service.features.map((feature, index) => (
                                                    <li
                                                        key={index}
                                                        className="flex items-center text-amber-700"
                                                    >
                                                        <div className="w-2 h-2 bg-yellow-500 rounded-full mr-3" />

                                                        {feature}
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>

                                        <button className="bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-6 py-2 rounded-lg font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200 w-full">
                                            {currentLang === 'zh'
                                                ? '访问'
                                                : currentLang === 'zh-tw'
                                                  ? '存取'
                                                  : 'Access'}
                                        </button>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* Contact Section */}
            <section className="py-20 bg-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl md:text-4xl font-bold text-amber-900 mb-4">
                            {t.contact.title}
                        </h2>
                        <p className="text-xl text-amber-700">{t.contact.subtitle}</p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {t.contact.methods.map((method, index) => {
                            const IconComponent = method.icon;
                            return (
                                <div
                                    key={index}
                                    className="text-center p-8 bg-gradient-to-br from-amber-50 to-yellow-50 rounded-xl border border-amber-200 hover:shadow-lg transition-all duration-300"
                                >
                                    <div className="w-16 h-16 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6">
                                        <IconComponent className="w-8 h-8 text-white" />
                                    </div>
                                    <h3 className="text-xl font-semibold text-amber-900 mb-3">
                                        {method.name}
                                    </h3>
                                    <p className="text-amber-700 mb-4">{method.description}</p>
                                    <div className="text-lg font-semibold text-amber-600">
                                        {method.contact}
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </section>

            <Footer currentLang={currentLang} translations={translations} />
        </div>
    );
}