import { getTranslations, Locale, getNavigationPaths } from '@/lib/i18n';
import { generateMetadata as generateSEOMetadata } from '@/lib/seo';
import Layout from '@/components/Layout';

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

export async function generateStaticParams() {
    const locales = ['zh-CN', 'zh-TW', 'en'];
    return locales.map((locale) => ({
        locale,
    }));
}

export async function generateMetadata({ params }: SupportPageProps) {
    return generateSEOMetadata(params.locale, 'support');
}

export default async function SupportPage({ params }: SupportPageProps) {
    const { locale } = params;
    const [common, support] = await Promise.all([
        getTranslations(locale, 'common'),
        getTranslations(locale, 'support'),
    ]);

    const navigationPaths = getNavigationPaths(locale);
    const navigation = [
        {
            name: common.navigation.home,
            href: navigationPaths.find((p) => p.key === 'home')?.path || '/',
        },
        {
            name: common.navigation.products,
            href: navigationPaths.find((p) => p.key === 'products')?.path || '/products',
        },
        {
            name: common.navigation.news,
            href: navigationPaths.find((p) => p.key === 'news')?.path || '/news',
        },
        {
            name: common.navigation.support,
            href: navigationPaths.find((p) => p.key === 'support')?.path || '/support',
        },
        {
            name: common.navigation.about,
            href: navigationPaths.find((p) => p.key === 'about')?.path || '/about',
        },
    ];

    return (
        <Layout locale={locale} navigation={navigation} common={common} data-oid="lt:pgoh">
            {/* Hero Section */}
            <section
                className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-blue-50 to-indigo-100"
                data-oid="ixvdy14"
            >
                <div className="max-w-4xl mx-auto text-center" data-oid="70bosni">
                    <h1
                        className="text-4xl md:text-6xl font-light leading-tight mb-8 text-gray-900"
                        data-oid="2w3nh03"
                    >
                        {support.title}
                    </h1>
                    <p
                        className="text-xl md:text-2xl text-gray-600 mb-12 font-light max-w-3xl mx-auto"
                        data-oid="p5hkz-y"
                    >
                        {support.subtitle}
                    </p>
                </div>
            </section>

            {/* Contact Methods */}
            <section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="7xr3drt">
                <div className="max-w-6xl mx-auto" data-oid="tu7tfi.">
                    <div className="text-center mb-16" data-oid="qies69n">
                        <h2
                            className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
                            data-oid="g9:2193"
                        >
                            {support.sections.contact.title}
                        </h2>
                        <p className="text-xl text-gray-600 font-light" data-oid="ke6h5h6">
                            {support.sections.contact.subtitle}
                        </p>
                    </div>
                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8" data-oid="s3moj-.">
                        {support.sections.contact.methods.map((method: any, index: number) => (
                            <div
                                key={index}
                                className="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-shadow text-center"
                                data-oid="kl17s4s"
                            >
                                <div className="text-4xl mb-4" data-oid="rzr20u.">
                                    {method.icon}
                                </div>
                                <h3
                                    className="text-xl font-light mb-3 text-gray-900"
                                    data-oid="67d-vb5"
                                >
                                    {method.title}
                                </h3>
                                <p className="text-blue-600 font-medium mb-2" data-oid="ge86mew">
                                    {method.value}
                                </p>
                                <p className="text-gray-600 font-light text-sm" data-oid="kuk_bv7">
                                    {method.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Help Resources */}
            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="7dgxwml">
                <div className="max-w-6xl mx-auto" data-oid="hha3y0c">
                    <div className="text-center mb-16" data-oid="_loxumd">
                        <h2
                            className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
                            data-oid="2mv_dyz"
                        >
                            {support.sections.resources.title}
                        </h2>
                        <p className="text-xl text-gray-600 font-light" data-oid="1u6h1y3">
                            {support.sections.resources.subtitle}
                        </p>
                    </div>
                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8" data-oid="2ux8bqc">
                        {support.sections.resources.items.map((resource: any, index: number) => (
                            <div
                                key={index}
                                className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow text-center cursor-pointer group"
                                data-oid="3yqt3ct"
                            >
                                <div
                                    className="text-4xl mb-4 group-hover:scale-110 transition-transform"
                                    data-oid="nokwcp0"
                                >
                                    {resource.icon}
                                </div>
                                <h3
                                    className="text-lg font-light mb-3 text-gray-900 group-hover:text-blue-600 transition-colors"
                                    data-oid="c2:u7-s"
                                >
                                    {resource.title}
                                </h3>
                                <p
                                    className="text-gray-600 font-light text-sm leading-relaxed"
                                    data-oid="c.eue5q"
                                >
                                    {resource.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* FAQ Section */}
            <section className="py-20 px-4 sm:px-6 lg:px-8" data-oid="ky447bf">
                <div className="max-w-4xl mx-auto" data-oid="tyktapc">
                    <div className="text-center mb-16" data-oid="-egssn0">
                        <h2
                            className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
                            data-oid="ddj969a"
                        >
                            {support.sections.faq.title}
                        </h2>
                        <p className="text-xl text-gray-600 font-light" data-oid="d8nfvq-">
                            {support.sections.faq.subtitle}
                        </p>
                    </div>
                    <div className="space-y-6" data-oid="twq73md">
                        {support.sections.faq.items.map((item: any, index: number) => (
                            <div
                                key={index}
                                className="bg-white p-6 rounded-lg shadow-sm border border-gray-100"
                                data-oid="vpw3zqy"
                            >
                                <h3
                                    className="text-lg font-light mb-3 text-gray-900 flex items-center"
                                    data-oid="-joy1m5"
                                >
                                    <span
                                        className="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-sm font-medium mr-3"
                                        data-oid="dh_hhfs"
                                    >
                                        Q
                                    </span>
                                    {item.question}
                                </h3>
                                <div className="ml-9" data-oid="x7nwh-6">
                                    <p
                                        className="text-gray-600 font-light leading-relaxed"
                                        data-oid="u_j--72"
                                    >
                                        {item.answer}
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Contact CTA */}
            <section
                className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"
                data-oid="46znakk"
            >
                <div className="max-w-4xl mx-auto text-center" data-oid="qc_rcu2">
                    <h2 className="text-3xl md:text-4xl font-light mb-6" data-oid="_cfj:nm">
                        {locale === 'en'
                            ? 'Still Need Help?'
                            : locale === 'zh-TW'
                              ? '仍需要幫助？'
                              : '仍需要帮助？'}
                    </h2>
                    <p className="text-xl font-light mb-8 opacity-90" data-oid="7qhi_:e">
                        {locale === 'en'
                            ? 'Our support team is ready to assist you with any questions or issues.'
                            : locale === 'zh-TW'
                              ? '我們的支援團隊隨時準備協助您解決任何問題。'
                              : '我们的支持团队随时准备协助您解决任何问题。'}
                    </p>
                    <div
                        className="flex flex-col sm:flex-row gap-4 justify-center"
                        data-oid="_feu0-2"
                    >
                        <button
                            className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors font-light"
                            data-oid="cm4d1s6"
                        >
                            {locale === 'en'
                                ? 'Contact Support'
                                : locale === 'zh-TW'
                                  ? '聯絡支援'
                                  : '联系支持'}
                        </button>
                        <button
                            className="border border-white text-white px-8 py-3 rounded-lg hover:bg-white hover:text-gray-900 transition-colors font-light"
                            data-oid="q6.5vlz"
                        >
                            {locale === 'en'
                                ? 'Schedule Call'
                                : locale === 'zh-TW'
                                  ? '預約通話'
                                  : '预约通话'}
                        </button>
                    </div>
                </div>
            </section>
        </Layout>
    );
}