'use client';

import { useState, useEffect } from 'react';
import { Header } from '../../components/Header';
import { Footer } from '../../components/Footer';

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

    useEffect(() => {
        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 content = {
        'zh-CN': {
            title: '关于我们',
            subtitle: '致力于构建下一代多语言网站解决方案',
            nav: {
                home: '首页',
                docs: '文档',
                about: '关于',
                contact: '联系我们',
            },
            mission: {
                title: '我们的使命',
                description:
                    'MultiSite 致力于为全球企业提供最先进的多语言静态网站解决方案，让跨语言沟通变得简单高效。',
            },
            vision: {
                title: '我们的愿景',
                description: '成为全球领先的多语言网站技术提供商，帮助企业轻松实现国际化业务拓展。',
            },
            values: {
                title: '核心价值观',
                items: [
                    {
                        title: '创新驱动',
                        description: '持续探索前沿技术，为用户提供最优质的解决方案',
                    },
                    {
                        title: '用户至上',
                        description: '以用户需求为中心，不断优化产品体验',
                    },
                    {
                        title: '开放合作',
                        description: '拥抱开源社区，与全球开发者共同成长',
                    },
                    {
                        title: '品质保证',
                        description: '严格的质量标准，确保产品稳定可靠',
                    },
                ],
            },
            team: {
                title: '团队介绍',
                description: '我们是一支充满激情的技术团队，专注于多语言网站技术的研发与创新。',
                members: [
                    {
                        name: '张伟',
                        role: '技术总监',
                        description: '10年前端开发经验，React/Next.js 技术专家',
                    },
                    {
                        name: '李娜',
                        role: '产品经理',
                        description: '专注用户体验设计，国际化产品规划专家',
                    },
                    {
                        name: '王强',
                        role: '架构师',
                        description: '全栈开发工程师，云原生技术专家',
                    },
                ],
            },
            technology: {
                title: '技术优势',
                items: [
                    {
                        title: 'React/Next.js',
                        description: '基于最新的 React 18 和 Next.js 14，提供卓越的性能和开发体验',
                    },
                    {
                        title: '静态生成',
                        description: '利用 SSG 技术，实现极速加载和优秀的 SEO 表现',
                    },
                    {
                        title: '多语言支持',
                        description: '智能语言检测和切换，支持全球主要语言',
                    },
                    {
                        title: '响应式设计',
                        description: '完美适配各种设备，提供一致的用户体验',
                    },
                ],
            },
        },
        'zh-TW': {
            title: '關於我們',
            subtitle: '致力於構建下一代多語言網站解決方案',
            nav: {
                home: '首頁',
                docs: '文檔',
                about: '關於',
                contact: '聯繫我們',
            },
            mission: {
                title: '我們的使命',
                description:
                    'MultiSite 致力於為全球企業提供最先進的多語言靜態網站解決方案，讓跨語言溝通變得簡單高效。',
            },
            vision: {
                title: '我們的願景',
                description: '成為全球領先的多語言網站技術提供商，幫助企業輕鬆實現國際化業務拓展。',
            },
            values: {
                title: '核心價值觀',
                items: [
                    {
                        title: '創新驅動',
                        description: '持續探索前沿技術，為用戶提供最優質的解決方案',
                    },
                    {
                        title: '用戶至上',
                        description: '以用戶需求為中心，不斷優化產品體驗',
                    },
                    {
                        title: '開放合作',
                        description: '擁抱開源社區，與全球開發者共同成長',
                    },
                    {
                        title: '品質保證',
                        description: '嚴格的質量標準，確保產品穩定可靠',
                    },
                ],
            },
            team: {
                title: '團隊介紹',
                description: '我們是一支充滿激情的技術團隊，專注於多語言網站技術的研發與創新。',
                members: [
                    {
                        name: '張偉',
                        role: '技術總監',
                        description: '10年前端開發經驗，React/Next.js 技術專家',
                    },
                    {
                        name: '李娜',
                        role: '產品經理',
                        description: '專注用戶體驗設計，國際化產品規劃專家',
                    },
                    {
                        name: '王強',
                        role: '架構師',
                        description: '全棧開發工程師，雲原生技術專家',
                    },
                ],
            },
            technology: {
                title: '技術優勢',
                items: [
                    {
                        title: 'React/Next.js',
                        description: '基於最新的 React 18 和 Next.js 14，提供卓越的性能和開發體驗',
                    },
                    {
                        title: '靜態生成',
                        description: '利用 SSG 技術，實現極速加載和優秀的 SEO 表現',
                    },
                    {
                        title: '多語言支援',
                        description: '智能語言檢測和切換，支援全球主要語言',
                    },
                    {
                        title: '響應式設計',
                        description: '完美適配各種設備，提供一致的用戶體驗',
                    },
                ],
            },
        },
        en: {
            title: 'About Us',
            subtitle: 'Dedicated to building next-generation multi-language website solutions',
            nav: {
                home: 'Home',
                docs: 'Docs',
                about: 'About',
                contact: 'Contact',
            },
            mission: {
                title: 'Our Mission',
                description:
                    'MultiSite is dedicated to providing the most advanced multi-language static website solutions for global enterprises, making cross-language communication simple and efficient.',
            },
            vision: {
                title: 'Our Vision',
                description:
                    "To become the world's leading multi-language website technology provider, helping enterprises easily achieve international business expansion.",
            },
            values: {
                title: 'Core Values',
                items: [
                    {
                        title: 'Innovation Driven',
                        description:
                            'Continuously explore cutting-edge technologies to provide users with the best solutions',
                    },
                    {
                        title: 'User First',
                        description:
                            'Focus on user needs and continuously optimize product experience',
                    },
                    {
                        title: 'Open Collaboration',
                        description:
                            'Embrace the open source community and grow together with global developers',
                    },
                    {
                        title: 'Quality Assurance',
                        description:
                            'Strict quality standards to ensure stable and reliable products',
                    },
                ],
            },
            team: {
                title: 'Our Team',
                description:
                    'We are a passionate technical team focused on the research and innovation of multi-language website technologies.',
                members: [
                    {
                        name: 'Zhang Wei',
                        role: 'Technical Director',
                        description:
                            '10 years of frontend development experience, React/Next.js expert',
                    },
                    {
                        name: 'Li Na',
                        role: 'Product Manager',
                        description:
                            'Focus on user experience design, internationalization product planning expert',
                    },
                    {
                        name: 'Wang Qiang',
                        role: 'Architect',
                        description:
                            'Full-stack development engineer, cloud-native technology expert',
                    },
                ],
            },
            technology: {
                title: 'Technical Advantages',
                items: [
                    {
                        title: 'React/Next.js',
                        description:
                            'Based on the latest React 18 and Next.js 14, providing excellent performance and development experience',
                    },
                    {
                        title: 'Static Generation',
                        description:
                            'Utilizing SSG technology for ultra-fast loading and excellent SEO performance',
                    },
                    {
                        title: 'Multi-language Support',
                        description:
                            'Intelligent language detection and switching, supporting major global languages',
                    },
                    {
                        title: 'Responsive Design',
                        description:
                            'Perfect adaptation to various devices, providing consistent user experience',
                    },
                ],
            },
        },
    };

    const currentContent = content[currentLang];

    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="about"
                navContent={currentContent.nav}
            />

            {/* Hero Section */}
            <section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-16">
                <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-5xl font-bold text-gray-900 mb-4">
                            {currentContent.title}
                        </h1>
                        <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
                            {currentContent.subtitle}
                        </p>
                    </div>
                </div>
            </section>

            {/* Mission & Vision */}
            <section className="py-16 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 gap-12">
                        <div className="text-center">
                            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg
                                    className="w-8 h-8 text-blue-600"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M13 10V3L4 14h7v7l9-11h-7z"
                                    />
                                </svg>
                            </div>
                            <h2 className="text-2xl font-bold text-gray-900 mb-4">
                                {currentContent.mission.title}
                            </h2>
                            <p className="text-gray-600 leading-relaxed">
                                {currentContent.mission.description}
                            </p>
                        </div>
                        <div className="text-center">
                            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <svg
                                    className="w-8 h-8 text-green-600"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                    />

                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                    />
                                </svg>
                            </div>
                            <h2 className="text-2xl font-bold text-gray-900 mb-4">
                                {currentContent.vision.title}
                            </h2>
                            <p className="text-gray-600 leading-relaxed">
                                {currentContent.vision.description}
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Core Values */}
            <section className="py-16 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">
                            {currentContent.values.title}
                        </h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                        {currentContent.values.items.map((value, index) => (
                            <div
                                key={index}
                                className="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow"
                            >
                                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                                    <div className="w-6 h-6 bg-blue-600 rounded"></div>
                                </div>
                                <h3 className="text-lg font-semibold text-gray-900 mb-3">
                                    {value.title}
                                </h3>
                                <p className="text-gray-600 text-sm leading-relaxed">
                                    {value.description}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Team */}
            <section className="py-16 bg-white">
                <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">
                            {currentContent.team.title}
                        </h2>
                        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                            {currentContent.team.description}
                        </p>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {currentContent.team.members.map((member, index) => (
                            <div key={index} className="text-center">
                                <div className="w-24 h-24 bg-gray-200 rounded-full mx-auto mb-4 flex items-center justify-center">
                                    <svg
                                        className="w-12 h-12 text-gray-400"
                                        fill="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                                    </svg>
                                </div>
                                <h3 className="text-xl font-semibold text-gray-900 mb-1">
                                    {member.name}
                                </h3>
                                <p className="text-blue-600 font-medium mb-3">{member.role}</p>
                                <p className="text-gray-600 text-sm">{member.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Technology */}
            <section className="py-16 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">
                            {currentContent.technology.title}
                        </h2>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {currentContent.technology.items.map((tech, index) => (
                            <div key={index} className="bg-white rounded-lg p-6 shadow-sm">
                                <h3 className="text-xl font-semibold text-gray-900 mb-3">
                                    {tech.title}
                                </h3>
                                <p className="text-gray-600 leading-relaxed">{tech.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

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