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

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

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

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

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

    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="gyz1ylb">
            {/* 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="w78w6n1"
            >
                <div className="max-w-4xl mx-auto text-center" data-oid="qed-6ck">
                    <h1
                        className="text-4xl md:text-6xl font-light leading-tight mb-8 text-gray-900"
                        data-oid="0qyfsz9"
                    >
                        {products.title}
                    </h1>
                    <p
                        className="text-xl md:text-2xl text-gray-600 mb-12 font-light max-w-3xl mx-auto"
                        data-oid="9fpzlrh"
                    >
                        {products.subtitle}
                    </p>
                </div>
            </section>

            {/* Categories Section */}
            <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white" data-oid="1zebg6q">
                <div className="max-w-6xl mx-auto" data-oid="9umo9-6">
                    <div className="text-center mb-12" data-oid="t1f7o-t">
                        <h2 className="text-3xl font-light mb-4 text-gray-900" data-oid="64l9n6c">
                            {locale === 'en'
                                ? 'Service Categories'
                                : locale === 'zh-TW'
                                  ? '服務類別'
                                  : '服务类别'}
                        </h2>
                    </div>
                    <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6" data-oid=".gn5nfr">
                        {products.categories.map((category: any, index: number) => (
                            <div
                                key={category.id}
                                className="text-center p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
                                data-oid="iv_2ed8"
                            >
                                <div className="text-4xl mb-4" data-oid="tyq6p2w">
                                    {category.icon}
                                </div>
                                <h3
                                    className="text-lg font-light mb-2 text-gray-900"
                                    data-oid="q1z7z1_"
                                >
                                    {category.name}
                                </h3>
                                <p className="text-gray-600 font-light text-sm" data-oid="xl3fv7e">
                                    {category.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Products Grid */}
            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="qeuq_-:">
                <div className="max-w-6xl mx-auto" data-oid="oh:6vdi">
                    <div className="text-center mb-16" data-oid=".vcnoeu">
                        <h2
                            className="text-3xl md:text-4xl font-light mb-4 text-gray-900"
                            data-oid="uadz:hj"
                        >
                            {locale === 'en'
                                ? 'Our Solutions'
                                : locale === 'zh-TW'
                                  ? '我們的解決方案'
                                  : '我们的解决方案'}
                        </h2>
                    </div>
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8" data-oid="rxvkzz0">
                        {products.items.map((product: any, index: number) => (
                            <div
                                key={index}
                                className="bg-white rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden group hover:-translate-y-1"
                                data-oid="pfuhhev"
                            >
                                {/* Product Icon/Image */}
                                <div
                                    className="h-48 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"
                                    data-oid="tmootoi"
                                >
                                    <span className="text-6xl" data-oid="bou76:j">
                                        {product.icon || '💼'}
                                    </span>
                                </div>

                                <div className="p-6" data-oid="sevoy96">
                                    <h3
                                        className="text-xl font-light mb-3 text-gray-900 group-hover:text-blue-600 transition-colors"
                                        data-oid="0:6.pf7"
                                    >
                                        {product.title}
                                    </h3>
                                    <p
                                        className="text-gray-600 font-light leading-relaxed mb-4 text-sm"
                                        data-oid="zr62xye"
                                    >
                                        {product.description}
                                    </p>

                                    {/* Features */}
                                    <div className="mb-6" data-oid="7f0q-g0">
                                        <h4
                                            className="text-sm font-medium text-gray-900 mb-2"
                                            data-oid="4rx:_c5"
                                        >
                                            {locale === 'en'
                                                ? 'Key Features:'
                                                : locale === 'zh-TW'
                                                  ? '主要功能：'
                                                  : '主要功能：'}
                                        </h4>
                                        <div className="flex flex-wrap gap-2" data-oid="i5a_c6v">
                                            {product.features
                                                .slice(0, 4)
                                                .map((feature: string, featureIndex: number) => (
                                                    <span
                                                        key={featureIndex}
                                                        className="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full"
                                                        data-oid="659zawc"
                                                    >
                                                        {feature}
                                                    </span>
                                                ))}
                                            {product.features.length > 4 && (
                                                <span
                                                    className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full"
                                                    data-oid="47o4wca"
                                                >
                                                    +{product.features.length - 4}{' '}
                                                    {locale === 'en'
                                                        ? 'more'
                                                        : locale === 'zh-TW'
                                                          ? '更多'
                                                          : '更多'}
                                                </span>
                                            )}
                                        </div>
                                    </div>

                                    {/* CTA Button */}
                                    <button
                                        className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-light"
                                        data-oid="ig90.fv"
                                    >
                                        {locale === 'en'
                                            ? 'Learn More'
                                            : locale === 'zh-TW'
                                              ? '了解更多'
                                              : '了解更多'}
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA Section */}
            <section
                className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 text-white"
                data-oid="bp05uvo"
            >
                <div className="max-w-4xl mx-auto text-center" data-oid="skrviw7">
                    <h2 className="text-3xl md:text-4xl font-light mb-6" data-oid="_dv23f0">
                        {locale === 'en'
                            ? 'Ready to Transform Your Business?'
                            : locale === 'zh-TW'
                              ? '準備好轉型您的業務了嗎？'
                              : '准备好转型您的业务了吗？'}
                    </h2>
                    <p className="text-xl font-light mb-8 opacity-90" data-oid=":qjk4nd">
                        {locale === 'en'
                            ? 'Contact our experts to discuss your specific needs and get a customized solution.'
                            : locale === 'zh-TW'
                              ? '聯絡我們的專家討論您的具體需求，獲得客製化解決方案。'
                              : '联系我们的专家讨论您的具体需求，获得定制化解决方案。'}
                    </p>
                    <div
                        className="flex flex-col sm:flex-row gap-4 justify-center"
                        data-oid="_m7xjky"
                    >
                        <button
                            className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors font-light"
                            data-oid="m1p0dgi"
                        >
                            {locale === 'en'
                                ? 'Get Started'
                                : 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=".31hjbd"
                        >
                            {locale === 'en'
                                ? 'Schedule Consultation'
                                : locale === 'zh-TW'
                                  ? '預約諮詢'
                                  : '预约咨询'}
                        </button>
                    </div>
                </div>
            </section>
        </Layout>
    );
}