'use client';
import Link from 'next/link';
import { useState, useEffect } from 'react';
import { Header } from '../components/Header';
import { Footer } from '../components/Footer';

export default function Page() {
    const [currentLang, setCurrentLang] = useState('zh-CN');
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        // Simulate language detection from Accept-Language header
        const detectLanguage = () => {
            const browserLang = navigator.language || navigator.languages[0];
            if (browserLang.startsWith('zh-TW') || browserLang.startsWith('zh-HK')) {
                setCurrentLang('zh-TW');
            } else if (browserLang.startsWith('en')) {
                setCurrentLang('en');
            } else {
                setCurrentLang('zh-CN');
            }
            setIsLoading(false);
        };

        detectLanguage();
    }, []);

    const languages = {
        'zh-CN': {
            title: '企业级多语言静态站点解决方案',
            subtitle: '基于 React/Next.js + gray-matter 构建的高性能多语言静态网站',
            description:
                '支持简体中文、繁体中文、英文三种语言，提供完整的 SEO 优化、动态路由和静态生成功能',
            features: [
                '多语言动态路由系统',
                'SEO 友好的静态生成',
                '智能语言检测与切换',
                '自动站点地图生成',
            ],

            cta: '立即开始',
            learnMore: '了解更多',
            nav: {
                home: '首页',
                docs: '文档',
                about: '关于',
                contact: '联系我们',
            },
        },
        'zh-TW': {
            title: '企業級多語言靜態站點解決方案',
            subtitle: '基於 React/Next.js + gray-matter 構建的高性能多語言靜態網站',
            description:
                '支援簡體中文、繁體中文、英文三種語言，提供完整的 SEO 優化、動態路由和靜態生成功能',
            features: [
                '多語言動態路由系統',
                'SEO 友好的靜態生成',
                '智能語言檢測與切換',
                '自動站點地圖生成',
            ],

            cta: '立即開始',
            learnMore: '了解更多',
            nav: {
                home: '首頁',
                docs: '文檔',
                about: '關於',
                contact: '聯繫我們',
            },
        },
        en: {
            title: 'Enterprise Multi-language Static Site Solution',
            subtitle:
                'High-performance multi-language static website built with React/Next.js + gray-matter',
            description:
                'Supports Simplified Chinese, Traditional Chinese, and English with complete SEO optimization, dynamic routing, and static generation',
            features: [
                'Multi-language Dynamic Routing',
                'SEO-friendly Static Generation',
                'Intelligent Language Detection',
                'Automatic Sitemap Generation',
            ],

            cta: 'Get Started',
            learnMore: 'Learn More',
            nav: {
                home: 'Home',
                docs: 'Docs',
                about: 'About',
                contact: 'Contact',
            },
        },
    };

    const currentContent = languages[currentLang];

    const switchLanguage = (lang) => {
        setCurrentLang(lang);
        // In real implementation, this would redirect to /{lang}/
        // window.location.href = `/${lang}/`;
    };

    if (isLoading) {
        return (
            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-white">
            <Header
                currentLang={currentLang}
                setCurrentLang={setCurrentLang}
                currentPage="home"
                navContent={currentContent.nav}
            />

            {/* Hero Section */}
            <section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-20">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center">
                        <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
                            {currentContent.title}
                        </h1>
                        <p className="text-xl md:text-2xl text-gray-600 mb-8 max-w-4xl mx-auto">
                            {currentContent.subtitle}
                        </p>
                        <p className="text-lg text-gray-500 mb-12 max-w-3xl mx-auto">
                            {currentContent.description}
                        </p>

                        <div className="flex flex-col sm:flex-row gap-4 justify-center">
                            <button className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-medium hover:bg-blue-700 transition-colors shadow-lg">
                                {currentContent.cta}
                            </button>
                            <Link
                                href="/docs"
                                className="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg text-lg font-medium hover:bg-gray-50 transition-colors inline-block text-center"
                            >
                                {currentContent.learnMore}
                            </Link>
                        </div>
                    </div>
                </div>
            </section>

            {/* Features Section */}
            <section className="py-20 bg-white">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {currentContent.features.map((feature, index) => (
                            <div
                                key={index}
                                className="text-center p-6 rounded-lg border border-gray-200 hover:shadow-lg transition-shadow"
                            >
                                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <div className="w-6 h-6 bg-blue-600 rounded"></div>
                                </div>
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
                                    {feature}
                                </h3>
                                <p className="text-gray-600 text-sm">
                                    {currentLang === 'en'
                                        ? 'Advanced functionality for modern web applications'
                                        : '为现代网络应用提供先进功能'}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Architecture Diagram */}
            <section className="py-20 bg-gray-50">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center mb-12">
                        <h2 className="text-3xl font-bold text-gray-900 mb-4">
                            {currentLang === 'en' ? 'System Architecture' : '系统架构'}
                        </h2>
                    </div>

                    <div className="bg-white rounded-lg shadow-lg p-8">
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            <div className="text-center">
                                <div className="bg-blue-100 rounded-lg p-6 mb-4">
                                    <div className="text-2xl font-bold text-blue-600">pages/</div>
                                    <div className="text-sm text-gray-600 mt-2">
                                        [lang]/[...slug].tsx
                                    </div>
                                </div>
                                <p className="text-sm text-gray-700">
                                    {currentLang === 'en' ? 'Dynamic Routing' : '动态路由'}
                                </p>
                            </div>

                            <div className="text-center">
                                <div className="bg-green-100 rounded-lg p-6 mb-4">
                                    <div className="text-2xl font-bold text-green-600">
                                        content/
                                    </div>
                                    <div className="text-sm text-gray-600 mt-2">
                                        zh-CN/ zh-TW/ en/
                                    </div>
                                </div>
                                <p className="text-sm text-gray-700">
                                    {currentLang === 'en' ? 'Content Management' : '内容管理'}
                                </p>
                            </div>

                            <div className="text-center">
                                <div className="bg-purple-100 rounded-lg p-6 mb-4">
                                    <div className="text-2xl font-bold text-purple-600">
                                        public/
                                    </div>
                                    <div className="text-sm text-gray-600 mt-2">sitemap-*.xml</div>
                                </div>
                                <p className="text-sm text-gray-700">
                                    {currentLang === 'en' ? 'SEO Optimization' : 'SEO优化'}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <Footer
                currentLang={currentLang}
                navContent={{
                    docs: currentContent.nav.docs,
                    contact: currentContent.nav.contact,
                }}
            />
        </div>
    );
}