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

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

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

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

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

    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=".vgb:d0">
            {/* Hero Section */}
            <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50" data-oid="jwd3d81">
                <div className="max-w-4xl mx-auto text-center" data-oid="0ac1nh.">
                    <h1
                        className="text-4xl md:text-6xl font-light leading-tight mb-8 text-gray-900"
                        data-oid="stkif1b"
                    >
                        {about.title}
                    </h1>
                    <p
                        className="text-xl md:text-2xl text-gray-600 mb-12 font-light"
                        data-oid="k-s6de:"
                    >
                        {about.subtitle}
                    </p>
                </div>
            </section>

            {/* Company Overview */}
            <CompanyOverview data={about.sections.company} data-oid="mu4bpdw" />

            {/* Company Milestones */}
            <CompanyMilestones data={about.sections.milestones} data-oid="mcpsf6k" />

            {/* Team Section */}
            <TeamSection data={about.sections.team} data-oid="t32recr" />

            {/* Certifications */}
            <CertificationsSection data={about.sections.certifications} data-oid="pc5azh2" />
        </Layout>
    );
}