'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import SEOHead from '../../../components/SEOHead';

// Support type icons mapping
const supportIcons = {
    technical: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="byc8jfu"
        >
            <path
                fillRule="evenodd"
                d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
                clipRule="evenodd"
                data-oid="orpqy:6"
            />
        </svg>
    ),

    consulting: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="nx8e._u"
        >
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" data-oid="sjtzje1" />
        </svg>
    ),

    training: (
        <svg
            className="w-8 h-8 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="n74q41:"
        >
            <path
                d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"
                data-oid="_.jo5z4"
            />
        </svg>
    ),
};

// Resource icons mapping
const resourceIcons = {
    documentation: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="bjwy3ib"
        >
            <path
                d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"
                data-oid="bzqx-dn"
            />
        </svg>
    ),

    api_reference: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="qon7rg4"
        >
            <path
                fillRule="evenodd"
                d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
                clipRule="evenodd"
                data-oid="z4cjcav"
            />
        </svg>
    ),

    tutorials: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="x7k..kw"
        >
            <path
                d="M2 6a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
                data-oid="bsgje24"
            />
        </svg>
    ),

    community: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="8ckm4_t"
        >
            <path
                d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
                data-oid="dgbafjq"
            />
        </svg>
    ),

    status: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="8j08396"
        >
            <path
                fillRule="evenodd"
                d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd"
                data-oid="m4_b4k:"
            />
        </svg>
    ),

    downloads: (
        <svg
            className="w-6 h-6 text-white"
            fill="currentColor"
            viewBox="0 0 20 20"
            data-oid="q-_1a5k"
        >
            <path
                fillRule="evenodd"
                d="M3 17a1 1 0 011-1h12a1 1 0 011 1v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z"
                clipRule="evenodd"
                data-oid="014xyd:"
            />
        </svg>
    ),
};

interface SupportPageProps {
    params: { locale: string };
}

export default function SupportPage({ params }: SupportPageProps) {
    const currentLang = params.locale || 'zh-CN';
    const [translations, setTranslations] = useState<any>({});
    const [commonTranslations, setCommonTranslations] = useState<any>({});
    const [loading, setLoading] = useState(true);
    const [openFaq, setOpenFaq] = useState<string | null>(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 (
            <div
                className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50"
                data-oid="8ya2u7d"
            >
                <div className="text-center" data-oid="bnv5rw3">
                    <div
                        className="w-16 h-16 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
                        data-oid="9gmazdd"
                    ></div>
                    <p className="text-gray-600" data-oid="hw0xdo:">
                        Loading support...
                    </p>
                </div>
            </div>
        );
    }

    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 (
        <>
            <SEOHead
                page="support"
                locale={currentLang as 'zh-CN' | 'zh-TW' | 'en'}
                canonicalUrl="/support"
                data-oid="b5637xa"
            />

            <div
                className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50"
                data-oid="3_kcee2"
            >
                {/* Navigation */}
                <nav
                    className="bg-white/80 backdrop-blur-md border-b border-white/20 sticky top-0 z-50"
                    data-oid="j8d1dmj"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="g_lhvuy">
                        <div className="flex justify-between items-center h-16" data-oid="wjy7yek">
                            {/* Logo */}
                            <Link
                                href={`/${currentLang}`}
                                className="flex items-center space-x-2"
                                data-oid="54qm8jr"
                            >
                                <div
                                    className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
                                    data-oid="9ruogs3"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="nueqnu3"
                                    >
                                        <path
                                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                                            data-oid="3momqil"
                                        />
                                    </svg>
                                </div>
                                <span
                                    className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
                                    data-oid="a:iui3w"
                                >
                                    CloudTech
                                </span>
                            </Link>

                            {/* Desktop Navigation */}
                            <div
                                className="hidden md:flex items-center space-x-8"
                                data-oid="b5rbdwx"
                            >
                                <Link
                                    href={`/${currentLang}`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="79ei-:i"
                                >
                                    {common.nav?.home}
                                </Link>
                                <Link
                                    href={`/${currentLang}/products`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="vgyfvmu"
                                >
                                    {common.nav?.products}
                                </Link>
                                <Link
                                    href={`/${currentLang}/news`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="rqhxgye"
                                >
                                    {common.nav?.news}
                                </Link>
                                <Link
                                    href={`/${currentLang}/support`}
                                    className="text-blue-600 font-medium"
                                    data-oid="t45h25w"
                                >
                                    {common.nav?.support}
                                </Link>
                                <Link
                                    href={`/${currentLang}/about`}
                                    className="text-gray-700 hover:text-blue-600 font-medium transition-colors"
                                    data-oid="nev-7r0"
                                >
                                    {common.nav?.about}
                                </Link>
                            </div>

                            {/* Language Switcher & Mobile Menu */}
                            <div className="flex items-center space-x-4" data-oid="xj9_t9w">
                                <select
                                    value={currentLang}
                                    onChange={(e) => {
                                        const newLocale = e.target.value;
                                        const currentPath = window.location.pathname;
                                        const pathWithoutLocale = currentPath.replace(/^\/[^\/]+/, '');
                                        window.location.href = `/${newLocale}${pathWithoutLocale}`;
                                    }}
                                    className="bg-white/50 border border-white/30 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    data-oid="1pbj6ms"
                                >
                                    <option value="zh-CN" data-oid="alh7211">
                                        简体中文
                                    </option>
                                    <option value="zh-TW" data-oid="bd5cbru">
                                        繁體中文
                                    </option>
                                    <option value="en" data-oid="dqgfs0m">
                                        English
                                    </option>
                                </select>

                                {/* Mobile menu button */}
                                <button
                                    onClick={() => setIsMenuOpen(!isMenuOpen)}
                                    className="md:hidden p-2 rounded-lg bg-white/50 border border-white/30"
                                    data-oid="mhaf2dy"
                                >
                                    <svg
                                        className="w-5 h-5"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                        data-oid="64a:svt"
                                    >
                                        <path
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            strokeWidth={2}
                                            d="M4 6h16M4 12h16M4 18h16"
                                            data-oid="tk_84hs"
                                        />
                                    </svg>
                                </button>
                            </div>
                        </div>

                        {/* Mobile Navigation */}
                        {isMenuOpen && (
                            <div
                                className="md:hidden py-4 border-t border-white/20"
                                data-oid="1qqpmin"
                            >
                                <div className="flex flex-col space-y-2" data-oid="7n705ad">
                                    <Link
                                        href={`/${currentLang}`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="366d-hn"
                                    >
                                        {common.nav?.home}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/products`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="y80jit2"
                                    >
                                        {common.nav?.products}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/news`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="gqg8r-2"
                                    >
                                        {common.nav?.news}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/support`}
                                        className="px-4 py-2 text-blue-600 bg-blue-50 rounded-lg"
                                        data-oid="6-t20r0"
                                    >
                                        {common.nav?.support}
                                    </Link>
                                    <Link
                                        href={`/${currentLang}/about`}
                                        className="px-4 py-2 text-gray-700 hover:bg-white/50 rounded-lg transition-colors"
                                        data-oid="57l622."
                                    >
                                        {common.nav?.about}
                                    </Link>
                                </div>
                            </div>
                        )}
                    </div>
                </nav>

                {/* Hero Section with Enhanced Design */}
                <div
                    className="relative bg-gradient-to-r from-purple-500 to-pink-600 text-white py-24 overflow-hidden"
                    data-oid="6l5f4ze"
                >
                    {/* Background decorative elements */}
                    <div className="absolute inset-0 opacity-10" data-oid="29xk_2-">
                        <div
                            className="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"
                            data-oid="izxgubq"
                        ></div>
                        <div
                            className="absolute top-32 right-20 w-16 h-16 bg-white rounded-full"
                            data-oid="cpdvvzk"
                        ></div>
                        <div
                            className="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"
                            data-oid="w8q73gp"
                        ></div>
                        <div
                            className="absolute bottom-32 right-1/3 w-24 h-24 bg-white rounded-full"
                            data-oid="9:51:kn"
                        ></div>
                    </div>

                    <div
                        className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
                        data-oid="x5rc7o3"
                    >
                        <h1
                            className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg"
                            data-oid="twqmtoc"
                        >
                            {t.title}
                        </h1>
                        <p
                            className="text-xl md:text-2xl opacity-90 max-w-4xl mx-auto mb-8 drop-shadow-md"
                            data-oid="aw9:2fl"
                        >
                            {t.subtitle}
                        </p>

                        {/* Quick Action Buttons */}
                        <div
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                            data-oid="oaxuzqu"
                        >
                            <button
                                className="px-8 py-4 bg-white text-purple-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                data-oid="1k0jxod"
                            >
                                {currentLang === 'en' ? 'Submit Ticket' : '提交工单'}
                            </button>
                            <button
                                className="px-8 py-4 bg-white/20 backdrop-blur-sm text-white rounded-2xl font-semibold border border-white/30 hover:bg-white/30 transition-all duration-200"
                                data-oid="a23egei"
                            >
                                {currentLang === 'en' ? 'Live Chat' : '在线客服'}
                            </button>
                        </div>
                    </div>
                </div>

                {/* Quick Contact Bar */}
                <div className="py-8 bg-white/50" data-oid="a:.ntli">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="sl5c.yn">
                        <div
                            className="flex flex-col lg:flex-row justify-center items-center gap-8"
                            data-oid="ot4klm-"
                        >
                            <div className="flex items-center space-x-3" data-oid="is5ysy6">
                                <div
                                    className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center"
                                    data-oid="f114g3-"
                                >
                                    <svg
                                        className="w-6 h-6 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="2r-:ni2"
                                    >
                                        <path
                                            d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"
                                            data-oid=".xtko3i"
                                        />
                                    </svg>
                                </div>
                                <div data-oid="ne2a3-e">
                                    <p className="font-semibold text-gray-900" data-oid="s_w30ib">
                                        {t.contact?.phone}
                                    </p>
                                    <p className="text-sm text-gray-600" data-oid="sdlhbkv">
                                        {currentLang === 'en' ? 'Call us now' : '立即致电'}
                                    </p>
                                </div>
                            </div>

                            <div className="flex items-center space-x-3" data-oid="f1fzjou">
                                <div
                                    className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center"
                                    data-oid="m6t-iu8"
                                >
                                    <svg
                                        className="w-6 h-6 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="u6gpubx"
                                    >
                                        <path
                                            d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
                                            data-oid="r37347s"
                                        />

                                        <path
                                            d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
                                            data-oid="u5h7cxj"
                                        />
                                    </svg>
                                </div>
                                <div data-oid="93b8pbb">
                                    <p className="font-semibold text-gray-900" data-oid="mx155c8">
                                        {t.contact?.email}
                                    </p>
                                    <p className="text-sm text-gray-600" data-oid="qcqjesi">
                                        {currentLang === 'en' ? 'Email support' : '邮件支持'}
                                    </p>
                                </div>
                            </div>

                            <div className="flex items-center space-x-3" data-oid="wpvrf6r">
                                <div
                                    className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-600 rounded-full flex items-center justify-center"
                                    data-oid="to2w.hg"
                                >
                                    <svg
                                        className="w-6 h-6 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="ak1k17o"
                                    >
                                        <path
                                            fillRule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
                                            clipRule="evenodd"
                                            data-oid="nzcy:b1"
                                        />
                                    </svg>
                                </div>
                                <div data-oid="7xett0b">
                                    <p className="font-semibold text-gray-900" data-oid=".3ua39k">
                                        {t.contact?.hours}
                                    </p>
                                    <p className="text-sm text-gray-600" data-oid="auj9d1e">
                                        {currentLang === 'en' ? 'Service hours' : '服务时间'}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Support Types */}
                <div className="py-20" data-oid="-7tt8qo">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="p77mnq2">
                        <div className="text-center mb-16" data-oid="-uxhrc.">
                            <h2
                                className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                data-oid="1jr7aqy"
                            >
                                {currentLang === 'en'
                                    ? 'How Can We Help You?'
                                    : '我们如何为您提供帮助？'}
                            </h2>
                            <p
                                className="text-xl text-gray-600 max-w-3xl mx-auto"
                                data-oid="nrpb_tu"
                            >
                                {currentLang === 'en'
                                    ? 'Choose the support option that best fits your needs'
                                    : '选择最适合您需求的支持选项'}
                            </p>
                        </div>

                        <div
                            className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20"
                            data-oid="m74yqxh"
                        >
                            {Object.entries(t.support_types || {}).map(
                                ([key, supportType]: [string, any]) => (
                                    <div
                                        key={key}
                                        className="group bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-white/20 hover:scale-105"
                                        data-oid="nwwv68m"
                                    >
                                        <div
                                            className="w-20 h-20 bg-gradient-to-r from-purple-400 to-pink-600 rounded-3xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
                                            data-oid="z.x03vo"
                                        >
                                            {supportIcons[key as keyof typeof supportIcons] || (
                                                <svg
                                                    className="w-8 h-8 text-white"
                                                    fill="currentColor"
                                                    viewBox="0 0 20 20"
                                                    data-oid="hp1rlbm"
                                                >
                                                    <path
                                                        fillRule="evenodd"
                                                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                                                        clipRule="evenodd"
                                                        data-oid="anq5spq"
                                                    />
                                                </svg>
                                            )}
                                        </div>
                                        <h3
                                            className="text-2xl font-bold text-gray-900 mb-4 group-hover:text-purple-600 transition-colors"
                                            data-oid="zo6obuz"
                                        >
                                            {supportType.title}
                                        </h3>
                                        <p
                                            className="text-gray-600 mb-6 leading-relaxed"
                                            data-oid="bfn9am4"
                                        >
                                            {supportType.desc}
                                        </p>
                                        <div className="space-y-3 mb-8" data-oid="qxm4ajg">
                                            {supportType.features?.map(
                                                (feature: string, index: number) => (
                                                    <div
                                                        key={index}
                                                        className="flex items-center space-x-3"
                                                        data-oid="p6kg1lb"
                                                    >
                                                        <div
                                                            className="w-2 h-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex-shrink-0"
                                                            data-oid="j5pctly"
                                                        ></div>
                                                        <span
                                                            className="text-sm text-gray-700 font-medium"
                                                            data-oid="2-c_ubu"
                                                        >
                                                            {feature}
                                                        </span>
                                                    </div>
                                                ),
                                            )}
                                        </div>
                                        <button
                                            className="w-full px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                            data-oid="_sillnt"
                                        >
                                            {currentLang === 'en' ? 'Get Started' : '开始使用'}
                                        </button>
                                    </div>
                                ),
                            )}
                        </div>
                    </div>
                </div>

                {/* Contact Form Section */}
                <div
                    className="py-20 bg-gradient-to-b from-white/50 to-transparent"
                    data-oid="ik0l7m1"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="qvty7z2">
                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12" data-oid="ds_cqfy">
                            {/* Contact Form */}
                            <div
                                className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-2xl border border-white/20"
                                data-oid="rnom_5i"
                            >
                                <h3
                                    className="text-2xl font-bold text-gray-900 mb-6"
                                    data-oid="pq7vi0v"
                                >
                                    {currentLang === 'en' ? 'Send us a Message' : '发送消息'}
                                </h3>
                                <form
                                    onSubmit={handleContactSubmit}
                                    className="space-y-6"
                                    data-oid="42_39d8"
                                >
                                    <div
                                        className="grid grid-cols-1 md:grid-cols-2 gap-4"
                                        data-oid="p5dqstt"
                                    >
                                        <div data-oid="jfz0-ud">
                                            <label
                                                className="block text-sm font-medium text-gray-700 mb-2"
                                                data-oid="2ul1s_b"
                                            >
                                                {currentLang === 'en' ? 'Name' : '姓名'}
                                            </label>
                                            <input
                                                type="text"
                                                required
                                                value={contactForm.name}
                                                onChange={(e) =>
                                                    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"
                                            />
                                        </div>
                                        <div data-oid="4oy9wd:">
                                            <label
                                                className="block text-sm font-medium text-gray-700 mb-2"
                                                data-oid="vsg5gor"
                                            >
                                                {currentLang === 'en' ? 'Email' : '邮箱'}
                                            </label>
                                            <input
                                                type="email"
                                                required
                                                value={contactForm.email}
                                                onChange={(e) =>
                                                    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"
                                            />
                                        </div>
                                    </div>
                                    <div data-oid="k4i.fxo">
                                        <label
                                            className="block text-sm font-medium text-gray-700 mb-2"
                                            data-oid="bkoz0_4"
                                        >
                                            {currentLang === 'en' ? 'Subject' : '主题'}
                                        </label>
                                        <input
                                            type="text"
                                            required
                                            value={contactForm.subject}
                                            onChange={(e) =>
                                                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"
                                        />
                                    </div>
                                    <div data-oid="s91aanj">
                                        <label
                                            className="block text-sm font-medium text-gray-700 mb-2"
                                            data-oid="6-414rz"
                                        >
                                            {currentLang === 'en' ? 'Priority' : '优先级'}
                                        </label>
                                        <select
                                            value={contactForm.priority}
                                            onChange={(e) =>
                                                setContactForm({
                                                    ...contactForm,
                                                    priority: e.target.value,
                                                })
                                            }
                                            title={currentLang === 'en' ? 'Select priority level' : '选择优先级'}
                                            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"
                                            data-oid="acez6we"
                                        >
                                            <option value="low" data-oid="8ol_04s">
                                                {currentLang === 'en' ? 'Low' : '低'}
                                            </option>
                                            <option value="medium" data-oid="nsx.5_-">
                                                {currentLang === 'en' ? 'Medium' : '中'}
                                            </option>
                                            <option value="high" data-oid="rj08b_n">
                                                {currentLang === 'en' ? 'High' : '高'}
                                            </option>
                                            <option value="urgent" data-oid="posq9-s">
                                                {currentLang === 'en' ? 'Urgent' : '紧急'}
                                            </option>
                                        </select>
                                    </div>
                                    <div data-oid="agl_eta">
                                        <label
                                            className="block text-sm font-medium text-gray-700 mb-2"
                                            data-oid="gzqhbzi"
                                        >
                                            {currentLang === 'en' ? 'Message' : '消息'}
                                        </label>
                                        <textarea
                                            required
                                            rows={5}
                                            value={contactForm.message}
                                            onChange={(e) =>
                                                setContactForm({
                                                    ...contactForm,
                                                    message: 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'
                                                    ? 'Describe your issue or question...'
                                                    : '描述您的问题...'
                                            }
                                            data-oid="zr8j46j"
                                        />
                                    </div>
                                    <button
                                        type="submit"
                                        className="w-full px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-600 text-white rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                        data-oid="x57-iml"
                                    >
                                        {currentLang === 'en' ? 'Send Message' : '发送消息'}
                                    </button>
                                </form>
                            </div>

                            {/* FAQ Search and Quick Links */}
                            <div className="space-y-8" data-oid="yw1y0en">
                                {/* FAQ Search */}
                                <div
                                    className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg border border-white/20"
                                    data-oid="yrpd-o7"
                                >
                                    <h3
                                        className="text-2xl font-bold text-gray-900 mb-6"
                                        data-oid="0ax-fhd"
                                    >
                                        {currentLang === 'en' ? 'Search FAQ' : '搜索常见问题'}
                                    </h3>
                                    <div className="relative mb-6" data-oid=".gv31-o">
                                        <input
                                            type="text"
                                            placeholder={
                                                currentLang === 'en'
                                                    ? 'Search frequently asked questions...'
                                                    : '搜索常见问题...'
                                            }
                                            value={searchTerm}
                                            onChange={(e) => setSearchTerm(e.target.value)}
                                            className="w-full px-4 py-3 pl-12 bg-white/50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500"
                                            data-oid="l_2:uzh"
                                        />

                                        <svg
                                            className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="m6z_myj"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                                                data-oid="22evfvl"
                                            />
                                        </svg>
                                    </div>
                                    <div className="space-y-2" data-oid="84g7l21">
                                        {filteredFaqs
                                            .slice(0, 3)
                                            .map(([key, faq]: [string, any]) => (
                                                <button
                                                    key={key}
                                                    onClick={() =>
                                                        setOpenFaq(openFaq === key ? null : key)
                                                    }
                                                    className="w-full text-left p-3 bg-white/50 rounded-lg hover:bg-white/70 transition-colors"
                                                    data-oid="8zbtzix"
                                                >
                                                    <p
                                                        className="font-medium text-gray-900 text-sm"
                                                        data-oid="5p0naa6"
                                                    >
                                                        {faq.question}
                                                    </p>
                                                </button>
                                            ))}
                                    </div>
                                </div>

                                {/* Quick Links */}
                                <div
                                    className="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-lg border border-white/20"
                                    data-oid="zvhj211"
                                >
                                    <h3
                                        className="text-2xl font-bold text-gray-900 mb-6"
                                        data-oid="uh95vhr"
                                    >
                                        {currentLang === 'en' ? 'Quick Links' : '快速链接'}
                                    </h3>
                                    <div className="space-y-3" data-oid="fv1k8k8">
                                        <a
                                            href="#"
                                            className="flex items-center space-x-3 p-3 bg-white/50 rounded-lg hover:bg-white/70 transition-colors"
                                            data-oid="uhtqs6k"
                                        >
                                            <div
                                                className="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center"
                                                data-oid="udhw5i0"
                                            >
                                                <svg
                                                    className="w-4 h-4 text-white"
                                                    fill="currentColor"
                                                    viewBox="0 0 20 20"
                                                    data-oid="onztd2o"
                                                >
                                                    <path
                                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                                        data-oid="p2bx7mf"
                                                    />
                                                </svg>
                                            </div>
                                            <span
                                                className="font-medium text-gray-900"
                                                data-oid="2n7mfw0"
                                            >
                                                {currentLang === 'en'
                                                    ? 'Service Status'
                                                    : '服务状态'}
                                            </span>
                                        </a>
                                        <a
                                            href="#"
                                            className="flex items-center space-x-3 p-3 bg-white/50 rounded-lg hover:bg-white/70 transition-colors"
                                            data-oid="ea-3g_v"
                                        >
                                            <div
                                                className="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center"
                                                data-oid=".jlceef"
                                            >
                                                <svg
                                                    className="w-4 h-4 text-white"
                                                    fill="currentColor"
                                                    viewBox="0 0 20 20"
                                                    data-oid="uunghqc"
                                                >
                                                    <path
                                                        d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
                                                        data-oid="s_ng-rn"
                                                    />
                                                </svg>
                                            </div>
                                            <span
                                                className="font-medium text-gray-900"
                                                data-oid="c9zt8bw"
                                            >
                                                {currentLang === 'en'
                                                    ? 'Documentation'
                                                    : '技术文档'}
                                            </span>
                                        </a>
                                        <a
                                            href="#"
                                            className="flex items-center space-x-3 p-3 bg-white/50 rounded-lg hover:bg-white/70 transition-colors"
                                            data-oid="-17se6s"
                                        >
                                            <div
                                                className="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-600 rounded-lg flex items-center justify-center"
                                                data-oid="abcswi-"
                                            >
                                                <svg
                                                    className="w-4 h-4 text-white"
                                                    fill="currentColor"
                                                    viewBox="0 0 20 20"
                                                    data-oid="mv:ol5s"
                                                >
                                                    <path
                                                        d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
                                                        data-oid="a0fld_8"
                                                    />
                                                </svg>
                                            </div>
                                            <span
                                                className="font-medium text-gray-900"
                                                data-oid="38c9ow1"
                                            >
                                                {currentLang === 'en'
                                                    ? 'Community Forum'
                                                    : '社区论坛'}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* FAQ Section */}
                <div className="py-20" data-oid="1tnpxfb">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="avvuc5m">
                        <div className="text-center mb-12" data-oid=":amrns:">
                            <h2
                                className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                data-oid="e8x8_w-"
                            >
                                {t.faq?.title}
                            </h2>
                            <p className="text-xl text-gray-600" data-oid="_m9k_dp">
                                {currentLang === 'en'
                                    ? 'Find answers to commonly asked questions'
                                    : '查找常见问题的答案'}
                            </p>
                        </div>
                        <div className="max-w-4xl mx-auto space-y-4" data-oid="flseshv">
                            {filteredFaqs.map(([key, faq]: [string, any]) => (
                                <div
                                    key={key}
                                    className="bg-white/80 backdrop-blur-sm rounded-2xl border border-white/20 overflow-hidden shadow-lg"
                                    data-oid="_:dkex6"
                                >
                                    <button
                                        onClick={() => setOpenFaq(openFaq === key ? null : key)}
                                        className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-white/50 transition-colors"
                                        data-oid="7ei40x0"
                                    >
                                        <span
                                            className="font-semibold text-gray-900 pr-4"
                                            data-oid="c3er9j8"
                                        >
                                            {faq.question}
                                        </span>
                                        <svg
                                            className={`w-5 h-5 text-gray-500 transform transition-transform flex-shrink-0 ${
                                                openFaq === key ? 'rotate-180' : ''
                                            }`}
                                            fill="currentColor"
                                            viewBox="0 0 20 20"
                                            data-oid="fngc:yc"
                                        >
                                            <path
                                                fillRule="evenodd"
                                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                                clipRule="evenodd"
                                                data-oid="0l9ejd:"
                                            />
                                        </svg>
                                    </button>
                                    {openFaq === key && (
                                        <div
                                            className="px-6 pb-4 border-t border-gray-100"
                                            data-oid="cwi6xe-"
                                        >
                                            <p
                                                className="text-gray-600 pt-4 leading-relaxed"
                                                data-oid="l06s6b8"
                                            >
                                                {faq.answer}
                                            </p>
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Resources Section */}
                <div
                    className="py-20 bg-gradient-to-b from-white/50 to-transparent"
                    data-oid=":_nxek7"
                >
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="4d_wmb7">
                        <div className="text-center mb-12" data-oid="djbcanp">
                            <h2
                                className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
                                data-oid="0kjt94y"
                            >
                                {t.resources?.title}
                            </h2>
                            <p className="text-xl text-gray-600" data-oid="y2t7r4n">
                                {currentLang === 'en'
                                    ? 'Access helpful resources and tools'
                                    : '访问有用的资源和工具'}
                            </p>
                        </div>
                        <div
                            className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
                            data-oid="oa7:u85"
                        >
                            {Object.entries(t.resources || {})
                                .filter(([key]) => key !== 'title')
                                .map(([key, resource]: [string, any]) => (
                                    <a
                                        key={key}
                                        href="#"
                                        className="group bg-white/80 backdrop-blur-sm rounded-2xl p-6 text-center shadow-lg hover:shadow-2xl transition-all duration-300 border border-white/20 hover:scale-105"
                                        data-oid="_0brn4g"
                                    >
                                        <div
                                            className="w-16 h-16 bg-gradient-to-r from-purple-400 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
                                            data-oid="a00qj5t"
                                        >
                                            {resourceIcons[key as keyof typeof resourceIcons] || (
                                                <svg
                                                    className="w-6 h-6 text-white"
                                                    fill="currentColor"
                                                    viewBox="0 0 20 20"
                                                    data-oid="6jj6db_"
                                                >
                                                    <path
                                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                                        data-oid="vnkhtyh"
                                                    />
                                                </svg>
                                            )}
                                        </div>
                                        <span
                                            className="text-sm font-medium text-gray-900 group-hover:text-purple-600 transition-colors"
                                            data-oid="lw9d_a0"
                                        >
                                            {resource}
                                        </span>
                                    </a>
                                ))}
                        </div>
                    </div>
                </div>

                {/* Call to Action */}
                <div
                    className="py-20 bg-gradient-to-r from-purple-500 to-pink-600"
                    data-oid="ulz73bq"
                >
                    <div
                        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
                        data-oid="4nfsi96"
                    >
                        <h2
                            className="text-3xl md:text-4xl font-bold text-white mb-6"
                            data-oid=":j1c01r"
                        >
                            {currentLang === 'en' ? 'Still Need Help?' : '仍需要帮助？'}
                        </h2>
                        <p
                            className="text-xl text-white/90 mb-8 max-w-3xl mx-auto"
                            data-oid="c3:4vql"
                        >
                            {currentLang === 'en'
                                ? 'Our support team is here to help you succeed. Contact us for personalized assistance.'
                                : '我们的支持团队随时为您提供帮助。联系我们获得个性化协助。'}
                        </p>
                        <div
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                            data-oid="nwc2_ke"
                        >
                            <button
                                className="px-8 py-4 bg-white text-purple-600 rounded-2xl font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200"
                                data-oid="yqnjbld"
                            >
                                {currentLang === 'en' ? 'Contact Sales' : '联系销售'}
                            </button>
                            <button
                                className="px-8 py-4 bg-white/20 backdrop-blur-sm text-white rounded-2xl font-semibold border border-white/30 hover:bg-white/30 transition-all duration-200"
                                data-oid="yk7rdib"
                            >
                                {currentLang === 'en' ? 'Schedule Call' : '预约通话'}
                            </button>
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <footer className="bg-gray-900 text-white py-12" data-oid=":v2h9:_">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-oid="31d91ss">
                        <div className="text-center" data-oid="_po3gx_">
                            <div
                                className="flex items-center justify-center space-x-2 mb-4"
                                data-oid="2h08cn."
                            >
                                <div
                                    className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center"
                                    data-oid="pwq98_h"
                                >
                                    <svg
                                        className="w-5 h-5 text-white"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                        data-oid="xvw7xtz"
                                    >
                                        <path
                                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
                                            data-oid="_px-no1"
                                        />
                                    </svg>
                                </div>
                                <span className="text-xl font-bold" data-oid="jqi4aqj">
                                    CloudTech
                                </span>
                            </div>
                            <p className="text-gray-400 mb-8 max-w-2xl mx-auto" data-oid="_xx96jg">
                                {common.footer?.company_desc}
                            </p>
                            <p className="text-gray-400" data-oid="xu8l5h5">
                                {common.footer?.copyright}
                            </p>
                        </div>
                    </div>
                </footer>
            </div>
        </>
    );
}
