import { useState, useEffect } from 'react';
import {
    Bot,
    MapPin,
    Cpu,
    ArrowRight,
    BarChart3,
    Gamepad2,
    Terminal,
    Ticket,
    Zap,
    Menu,
    X,
    Sun,
    Moon,
    Feather,
    BookOpen, // Used for the letter link
    BrainCircuit
} from 'lucide-react';
import { useNavigate, useLocation } from 'react-router-dom';
import i18n from '../i18n';

// 多语言配置
const translations = {
    zh: {
        nav: {
            core: '业务板块',
            consulting: '企业咨询',
            tourism: '文旅运营',
            dev: '开发者',
            contact: '联系我们',
        },
        hero: {
            quote: '"玩"意味着一种无拘无束的自由状态。',
            quoteSub: '你会发现，每个真正懂得玩的人，他们玩的方式都是独一无二的，充满了自发的创造力与鲜明的个性。',
            // Logic update: Focusing on the "Why" and the ecosystem
            sectionTitle: '为了让大家能 "纯粹的玩"，我们构建了三层业务生态',
        },
        cards: {
            // Step 1: Liberate
            consultingTitle: '第一步：解放时间',
            consultingDesc: '首先，我们用AI为企业降本增效。只有把人从繁琐工作中解放出来，才有时间去玩。',
            consultingLink: '查看企业AI方案',
            // Step 2: Create Fun
            tourismTitle: '第二步：创造乐趣',
            tourismDesc: '然后，我们用技术重塑文旅体验。打卡地图与游戏化运营，让旅行回归玩的本质。',
            tourismLink: '查看文旅案例',
            // Step 3: Support Creation
            devTitle: '第三步：支持创造',
            devDesc: '最后，我们为AI一人公司提供基建。让每一个想玩的灵魂，拥有实现梦想的算力。',
            devLink: '获取开发资源'
        },
        consulting: {
            tag: 'Consulting',
            title: '从繁杂中解放',
            titleHighlight: '回归创造',
            description: '我们为企业提供深度 IT 与 AI 咨询。这不是为了卷，而是为了降本提效，让团队从重复劳动中解脱出来。',
            items: [
                '企业私有知识库 (RAG)',
                '自动化研报/公文撰写',
                'AI 辅助决策系统',
                '传统 IT 架构改造'
            ],
            reportTitle: '效率诊断',
            reportDesc: 'AI 自动生成深度行业研究报告，将 3 天的撰写周期缩短至 15 分钟。'
        },
        tourism: {
            tag: 'Cultural Tourism',
            title: '打通文旅地产',
            titleHighlight: '变现渠道',
            description: '我们推出了一套以打卡地图、商户优惠券发放、抽奖游戏活动为核心的文旅运营解决方案。',
            features: {
                map: { title: '打卡地图', desc: 'LBS 定位解锁景点' },
                coupon: { title: '优惠券', desc: '连接商户与游客' },
                game: { title: '抽奖活动', desc: '提升游客留存率' },
                data: { title: 'CPS分成', desc: '按效果获取收益' }
            },
            mockup: {
                title: '西湖寻宝季',
                gift: '🎁 待领取: 咖啡券',
                btn: '扫码打卡'
            }
        },
        dev: {
            tag: 'Infrastructure',
            title: '支持每一个',
            titleHighlight: '超级个体',
            description: '针对 AI 一人公司，我们提供基础设施服务，让你像玩乐高一样构建产品。',
            features: {
                token: { title: 'Token 分发', desc: 'OpenAI / Claude / DeepSeek 聚合接口' },
                compute: { title: '弹性算力', desc: '高性价比 GPU 租赁' },
                saas: { title: 'SaaS 套件', desc: '一键部署的创业脚手架' }
            }
        },
        contact: {
            title: '保持联系',
            description: '既然来了，我会尽一切努力让你纯粹的玩。',
            formTitle: '发送邮件',
            placeholderName: '你的称呼',
            placeholderEmail: '你的邮箱',
            submit: '发送',
            footerLetter: '阅读：给玩友们的一封信',
            footerShareholder: '阅读：2025年5月29日给股东们的信',
            footerNote: '"纯粹的玩"由几位股东共同创立，我作为现在的法人和大股东，拥有最终决策权。',
            copyright: '© 2026 杭州纯粹的玩品牌科技有限公司'
        }
    },
    en: {
        nav: {
            core: 'Sectors',
            consulting: 'Consulting',
            tourism: 'Tourism',
            dev: 'Developers',
            contact: 'Contact',
        },
        hero: {
            quote: '"Play" means a state of unrestrained freedom.',
            quoteSub: 'You will find that for everyone who truly knows how to play, their way of playing is unique, full of spontaneous creativity and distinct personality.',
            sectionTitle: 'To enable "Pure Play" for everyone, we focus on three pillars',
        },
        cards: {
            consultingTitle: 'Step 1: Liberate Time',
            consultingDesc: 'First, we use AI to optimize enterprise workflows. Freeing people from tedious work gives them time to play.',
            consultingLink: 'View Solutions',
            tourismTitle: 'Step 2: Create Fun',
            tourismDesc: 'Then, we reshape tourism with tech. Check-in maps and gamification bring the fun back to travel.',
            tourismLink: 'View Cases',
            devTitle: 'Step 3: Support Creation',
            devDesc: 'Finally, we empower AI solopreneurs. Providing the infrastructure for every soul to build their dreams.',
            devLink: 'Get Resources'
        },
        consulting: {
            tag: 'Consulting',
            title: 'Liberate from Chaos',
            titleHighlight: 'Return to Creation',
            description: 'We provide deep IT & AI consulting. Not to hustle harder, but to cut costs and increase efficiency, freeing teams from repetitive labor.',
            items: [
                'Private Knowledge Base (RAG)',
                'Automated Research/Docs',
                'AI Decision Support',
                'Legacy IT Upgrade'
            ],
            reportTitle: 'Efficiency',
            reportDesc: 'AI automatically generates in-depth research reports, reducing a 3-day writing cycle to 15 minutes.'
        },
        tourism: {
            tag: 'Cultural Tourism',
            title: 'Monetizing',
            titleHighlight: 'Tourism Assets',
            description: 'We launched a tourism operation solution centered on check-in maps, coupon distribution, and lucky draw games.',
            features: {
                map: { title: 'Check-in Map', desc: 'LBS unlock spots' },
                coupon: { title: 'Coupons', desc: 'Connecting merchants' },
                game: { title: 'Lucky Draw', desc: 'Boost retention' },
                data: { title: 'CPS RevShare', desc: 'Earn by results' }
            },
            mockup: {
                title: 'West Lake Hunt',
                gift: '🎁 Reward: Coffee',
                btn: 'Scan to Play'
            }
        },
        dev: {
            tag: 'Infrastructure',
            title: 'Supporting Every',
            titleHighlight: 'Super Individual',
            description: 'For AI Solopreneurs, we provide infrastructure services, letting you build products like playing Lego.',
            features: {
                token: { title: 'Token Relay', desc: 'OpenAI / Claude / DeepSeek Aggregation' },
                compute: { title: 'Elastic Compute', desc: 'Cost-effective GPU rental' },
                saas: { title: 'SaaS Kit', desc: 'All-in-one scaffold' }
            }
        },
        contact: {
            title: 'Keep in Touch',
            description: 'Since you are here, I will do my best to let you play purely.',
            formTitle: 'Send Email',
            placeholderName: 'Your Name',
            placeholderEmail: 'Your Email',
            submit: 'Send',
            footerLetter: 'Read: A Letter to Players',
            footerShareholder: 'Read: Letter to Shareholders (May 29, 2025)',
            footerNote: '"Pure Play" was co-founded by several shareholders. As the current legal representative, I have the final decision-making power.',
            copyright: '© 2026 Pure Play Technology Co., Ltd. Hangzhou.'
        }
    }
};

const SimpleHome = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    // Default to Light Mode (isDark = false)
    const [isDark, setIsDark] = useState(localStorage.getItem('theme') === 'dark');

    // Sync theme on mount/change
    useEffect(() => {
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
    }, [isDark]);

    const [lang, setLang] = useState<'zh' | 'en'>(i18n.language?.startsWith('zh') ? 'zh' : 'en');

    const [email, setEmail] = useState('');
    const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
    const [message, setMessage] = useState('');

    const navigate = useNavigate();
    const location = useLocation();

    // Handle Hash Scroll on Mount/Update
    useEffect(() => {
        if (location.hash) {
            const id = location.hash.replace('#', '');
            setTimeout(() => {
                const element = document.getElementById(id);
                if (element) {
                    element.scrollIntoView({ behavior: 'smooth' });
                }
            }, 100); // Small delay to ensure render
        }
    }, [location]);

    // Handle global language sync if we want consistency with other pages using i18n
    // But SimpleHome seems to use local specific translations object `translations`.
    // Ideally SimpleHome should also use `useTranslation` hook so it shares state with Step1/Step2.
    // However, refactoring SimpleHome to use i18n completely is a big change (large file).
    // For now, let's at least make the Lang Toggle use the i18n instance if possible
    // OR just keep local lang state. The user asked to "perfect" Step1 and Step2.
    // If I change Lang in Step 1 (via i18n) and come back to Home, Home might still be default (zh).

    // Let's assume for now SimpleHome keeps its local state, but we try to initialize it from i18n if possible
    // or localStorage language detector.

    const t = translations[lang];

    const scrollToSection = (id: string) => {
        const element = document.getElementById(id);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
            setIsMenuOpen(false);
        }
    };

    const toggleTheme = () => setIsDark(!isDark);
    const toggleLang = () => {
        const newLang = lang === 'zh' ? 'en' : 'zh';
        setLang(newLang);
        i18n.changeLanguage(newLang);
    };

    const handleEmailSubmit = async () => {
        if (!email) return;

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            setStatus('error');
            setMessage('请输入有效的邮箱地址');
            return;
        }

        setStatus('loading');
        setMessage('');

        try {
            const response = await fetch('/api/send-welcome-email', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ email }),
            });

            const data = await response.json();

            if (data.success) {
                setStatus('success');
                setMessage(data.message);
                setEmail('');
            } else {
                setStatus('error');
                setMessage(data.message || '发送失败，请稍后重试');
            }
        } catch (error) {
            console.error('API Error:', error);
            setStatus('error');
            setMessage('网络错误，请稍后重试');
        }
    };

    return (
        <div className={`min-h-screen font-sans transition-colors duration-500 ${isDark ? 'bg-stone-900 text-stone-100' : 'bg-[#FAFAFA] text-stone-800'}`}>

            {/* Navigation - Minimalist */}
            <nav className={`fixed w-full z-50 transition-all duration-300 ${isDark ? 'bg-stone-900/90 border-b border-stone-800' : 'bg-white/90 border-b border-stone-100'} backdrop-blur-sm`}>
                <div className="max-w-4xl mx-auto px-6 h-20 flex justify-between items-center">
                    {/* Custom CCDW Logo */}
                    <div className="flex items-center gap-3 cursor-pointer group" onClick={() => scrollToSection('hero')}>
                        <div className="flex items-baseline font-bold text-3xl tracking-tighter" style={{ fontFamily: '"Nunito", sans-serif' }}>
                            <span className="text-orange-400">CC</span>
                            <span className="text-blue-500">D</span>
                            <span className="text-cyan-400">W</span>
                        </div>
                        <div className={`h-6 w-px ${isDark ? 'bg-stone-700' : 'bg-stone-300'} mx-1`}></div>
                        <span className={`text-sm tracking-widest ${isDark ? 'text-stone-400' : 'text-stone-500 group-hover:text-stone-800'} transition-colors`}>
                            {lang === 'zh' ? '纯粹的玩' : 'Pure Play'}
                        </span>
                    </div>

                    {/* Desktop Menu - Simple Links */}
                    <div className="hidden md:flex items-center space-x-8">
                        {[t.nav.consulting, t.nav.tourism, t.nav.dev].map((item, index) => {
                            const ids = ['consulting', 'tourism', 'dev'];
                            return (
                                <button
                                    key={index}
                                    onClick={() => scrollToSection(ids[index])}
                                    className={`text-sm font-medium hover:-translate-y-0.5 transition-transform ${isDark ? 'text-stone-400 hover:text-white' : 'text-stone-500 hover:text-stone-900'}`}
                                >
                                    {item}
                                </button>
                            );
                        })}

                        <div className="flex items-center gap-2 pl-4">
                            <button onClick={toggleTheme} className={`p-2 rounded-full hover:bg-black/5 transition-colors ${isDark ? 'text-stone-400' : 'text-stone-400'}`}>
                                {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
                            </button>
                            <button onClick={toggleLang} className={`text-xs font-bold px-2 py-1 rounded hover:bg-black/5 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>
                                {lang === 'zh' ? 'EN' : '中'}
                            </button>
                        </div>
                    </div>

                    {/* Mobile Menu Toggle */}
                    <div className="md:hidden">
                        <button onClick={() => setIsMenuOpen(!isMenuOpen)} className={isDark ? 'text-stone-100' : 'text-stone-800'}>
                            {isMenuOpen ? <X /> : <Menu />}
                        </button>
                    </div>
                </div>

                {/* Mobile Dropdown */}
                {isMenuOpen && (
                    <div className={`md:hidden absolute top-full left-0 w-full p-6 shadow-lg border-b ${isDark ? 'bg-stone-900 border-stone-800' : 'bg-white border-stone-100'}`}>
                        {[t.nav.consulting, t.nav.tourism, t.nav.dev, t.nav.contact].map((item, index) => {
                            const ids = ['consulting', 'tourism', 'dev', 'contact'];
                            return (
                                <button
                                    key={index}
                                    onClick={() => scrollToSection(ids[index])}
                                    className={`block w-full text-left py-3 text-lg ${isDark ? 'text-stone-300' : 'text-stone-600'}`}
                                >
                                    {item}
                                </button>
                            );
                        })}
                    </div>
                )}
            </nav>

            {/* Hero Section - Clean & Minimal */}
            <section id="hero" className="pt-40 pb-20 px-6">
                <div className="max-w-3xl mx-auto text-center mb-16">
                    <p className={`text-xl md:text-2xl font-serif italic mb-8 leading-relaxed ${isDark ? 'text-stone-300' : 'text-stone-600'}`}>
                        {t.hero.quote}
                    </p>
                    <p className={`text-sm md:text-base max-w-xl mx-auto leading-loose ${isDark ? 'text-stone-500' : 'text-stone-400'}`}>
                        {t.hero.quoteSub}
                    </p>
                </div>

                <div className="max-w-2xl mx-auto">
                    <div className={`w-24 h-px mx-auto ${isDark ? 'bg-stone-800' : 'bg-stone-200'} mb-16`}></div>

                    <div className="mb-12 text-center">
                        <h2 className={`text-lg font-bold ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>
                            {t.hero.sectionTitle}
                        </h2>
                    </div>

                    <div className="space-y-8">
                        {/* Item 1 */}
                        <div
                            onClick={() => navigate('/step1')}
                            className={`group p-6 rounded-xl border transition-all cursor-pointer ${isDark ? 'bg-stone-800/50 border-stone-700 hover:border-blue-500/50' : 'bg-white border-stone-200 hover:border-blue-400 shadow-sm hover:shadow-md'}`}
                        >
                            <div className="flex items-center justify-between mb-2">
                                <h3 className={`font-serif font-bold text-xl ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>{t.cards.consultingTitle}</h3>
                                <BrainCircuit className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
                            </div>
                            <p className={`text-sm leading-relaxed mb-4 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>{t.cards.consultingDesc}</p>
                            <span className={`text-xs font-bold uppercase tracking-wider flex items-center ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
                                {t.cards.consultingLink} <ArrowRight className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform" />
                            </span>
                        </div>

                        {/* Item 2 */}
                        <div
                            onClick={() => navigate('/step2')}
                            className={`group p-6 rounded-xl border transition-all cursor-pointer ${isDark ? 'bg-stone-800/50 border-stone-700 hover:border-orange-500/50' : 'bg-white border-stone-200 hover:border-orange-400 shadow-sm hover:shadow-md'}`}
                        >
                            <div className="flex items-center justify-between mb-2">
                                <h3 className={`font-serif font-bold text-xl ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>{t.cards.tourismTitle}</h3>
                                <Ticket className={`w-5 h-5 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
                            </div>
                            <p className={`text-sm leading-relaxed mb-4 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>{t.cards.tourismDesc}</p>
                            <span className={`text-xs font-bold uppercase tracking-wider flex items-center ${isDark ? 'text-orange-400' : 'text-orange-600'}`}>
                                {t.cards.tourismLink} <ArrowRight className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform" />
                            </span>
                        </div>

                        {/* Item 3 */}
                        <div
                            onClick={() => navigate('/step3')}
                            className={`group p-6 rounded-xl border transition-all cursor-pointer ${isDark ? 'bg-stone-800/50 border-stone-700 hover:border-cyan-500/50' : 'bg-white border-stone-200 hover:border-cyan-400 shadow-sm hover:shadow-md'}`}
                        >
                            <div className="flex items-center justify-between mb-2">
                                <h3 className={`font-serif font-bold text-xl ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>{t.cards.devTitle}</h3>
                                <Terminal className={`w-5 h-5 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
                            </div>
                            <p className={`text-sm leading-relaxed mb-4 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>{t.cards.devDesc}</p>
                            <span className={`text-xs font-bold uppercase tracking-wider flex items-center ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`}>
                                {t.cards.devLink} <ArrowRight className="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform" />
                            </span>
                        </div>
                    </div>
                </div>
            </section>

            {/* Detailed Sections - Minimalist Layout */}

            {/* Consulting */}
            <section id="consulting" className={`py-20 px-6 ${isDark ? 'bg-stone-900' : 'bg-white'}`}>
                <div className="max-w-4xl mx-auto">
                    <div className="grid md:grid-cols-2 gap-12 items-center">
                        <div>
                            <span className={`text-xs font-bold tracking-widest uppercase mb-4 block ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{t.consulting.tag}</span>
                            <h2 className="text-3xl font-serif font-bold mb-6 leading-tight">
                                {t.consulting.title} <br />
                                <span className={`decoration-4 underline decoration-blue-200 ${isDark ? 'decoration-blue-900' : ''}`}>{t.consulting.titleHighlight}</span>
                            </h2>
                            <p className={`mb-8 leading-relaxed ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>{t.consulting.description}</p>
                            <ul className="space-y-3">
                                {t.consulting.items.map((item, i) => (
                                    <li key={i} className="flex items-center gap-3">
                                        <div className={`w-1.5 h-1.5 rounded-full ${isDark ? 'bg-blue-400' : 'bg-blue-600'}`}></div>
                                        <span className={`text-sm ${isDark ? 'text-stone-300' : 'text-stone-700'}`}>{item}</span>
                                    </li>
                                ))}
                            </ul>
                            <div className="mt-8">
                                <button
                                    onClick={() => navigate('/step1')}
                                    className={`text-sm font-bold uppercase tracking-wider flex items-center group ${isDark ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-700'}`}
                                >
                                    {t.cards.consultingLink} <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
                                </button>
                            </div>
                        </div>
                        <div className={`p-8 rounded-lg border ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-stone-50 border-stone-100'}`}>
                            <BarChart3 className={`w-8 h-8 mb-4 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
                            <div className={`text-sm font-bold mb-2 ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>{t.consulting.reportTitle}</div>
                            <p className={`text-xs leading-relaxed ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>{t.consulting.reportDesc}</p>
                            <div className="mt-6 flex items-end gap-2">
                                <div className="h-16 w-4 bg-stone-200 rounded-sm"></div>
                                <div className="h-10 w-4 bg-stone-200 rounded-sm"></div>
                                <div className={`h-24 w-4 rounded-sm ${isDark ? 'bg-blue-500' : 'bg-blue-600'}`}></div>
                                <div className="h-14 w-4 bg-stone-200 rounded-sm"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Tourism */}
            <section id="tourism" className={`py-20 px-6 ${isDark ? 'bg-stone-800/30' : 'bg-stone-50'}`}>
                <div className="max-w-4xl mx-auto">
                    <div className="grid md:grid-cols-2 gap-12 items-center">
                        <div className="order-2 md:order-1 grid grid-cols-2 gap-4">
                            <div className={`p-4 rounded-lg border text-center ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200'}`}>
                                <MapPin className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
                                <div className="font-bold text-sm mb-1">{t.tourism.features.map.title}</div>
                                <div className="text-[10px] text-stone-400">{t.tourism.features.map.desc}</div>
                            </div>
                            <div className={`p-4 rounded-lg border text-center ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200'}`}>
                                <Ticket className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
                                <div className="font-bold text-sm mb-1">{t.tourism.features.coupon.title}</div>
                                <div className="text-[10px] text-stone-400">{t.tourism.features.coupon.desc}</div>
                            </div>
                            <div className={`p-4 rounded-lg border text-center ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200'}`}>
                                <Gamepad2 className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
                                <div className="font-bold text-sm mb-1">{t.tourism.features.game.title}</div>
                                <div className="text-[10px] text-stone-400">{t.tourism.features.game.desc}</div>
                            </div>
                            <div className={`p-4 rounded-lg border text-center ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200'}`}>
                                <Bot className={`w-6 h-6 mx-auto mb-2 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
                                <div className="font-bold text-sm mb-1">{t.tourism.features.data.title}</div>
                                <div className="text-[10px] text-stone-400">{t.tourism.features.data.desc}</div>
                            </div>
                        </div>
                        <div className="order-1 md:order-2">
                            <span className={`text-xs font-bold tracking-widest uppercase mb-4 block ${isDark ? 'text-orange-400' : 'text-orange-500'}`}>{t.tourism.tag}</span>
                            <h2 className="text-3xl font-serif font-bold mb-6 leading-tight">
                                {t.tourism.title} <br />
                                <span className={`decoration-4 underline decoration-orange-200 ${isDark ? 'decoration-orange-900' : ''}`}>{t.tourism.titleHighlight}</span>
                            </h2>
                            <p className={`mb-8 leading-relaxed ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>{t.tourism.description}</p>
                            <div className="mt-6">
                                <button
                                    onClick={() => navigate('/step2')}
                                    className={`text-sm font-bold uppercase tracking-wider flex items-center group ${isDark ? 'text-orange-400 hover:text-orange-300' : 'text-orange-600 hover:text-orange-700'}`}
                                >
                                    {t.cards.tourismLink} <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Dev Services */}
            <section id="dev" className={`py-20 px-6 ${isDark ? 'bg-stone-900' : 'bg-white'}`}>
                <div className="max-w-4xl mx-auto">
                    <div className="text-center mb-16">
                        <span className={`text-xs font-bold tracking-widest uppercase mb-4 block ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`}>{t.dev.tag}</span>
                        <h2 className="text-3xl font-serif font-bold mb-4">
                            {t.dev.title} <span className={`decoration-4 underline decoration-cyan-200 ${isDark ? 'decoration-cyan-900' : ''}`}>{t.dev.titleHighlight}</span>
                        </h2>
                        <p className={`max-w-xl mx-auto ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>{t.dev.description}</p>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8">
                        <div className={`p-6 border-t-2 ${isDark ? 'border-t-cyan-500 bg-stone-800/30' : 'border-t-cyan-500 bg-stone-50'}`}>
                            <Zap className={`w-6 h-6 mb-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
                            <h3 className="font-bold mb-2">{t.dev.features.token.title}</h3>
                            <p className="text-sm text-stone-500">{t.dev.features.token.desc}</p>
                        </div>
                        <div className={`p-6 border-t-2 ${isDark ? 'border-t-cyan-500 bg-stone-800/30' : 'border-t-cyan-500 bg-stone-50'}`}>
                            <Cpu className={`w-6 h-6 mb-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
                            <h3 className="font-bold mb-2">{t.dev.features.compute.title}</h3>
                            <p className="text-sm text-stone-500">{t.dev.features.compute.desc}</p>
                        </div>
                        <div className={`p-6 border-t-2 ${isDark ? 'border-t-cyan-500 bg-stone-800/30' : 'border-t-cyan-500 bg-stone-50'}`}>
                            <Terminal className={`w-6 h-6 mb-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
                            <h3 className="font-bold mb-2">{t.dev.features.saas.title}</h3>
                            <p className="text-sm text-stone-500">{t.dev.features.saas.desc}</p>
                        </div>
                    </div>

                    <div className="mt-12 text-center">
                        <button
                            onClick={() => navigate('/step3')}
                            className={`text-sm font-bold uppercase tracking-wider flex items-center justify-center gap-2 mx-auto group ${isDark ? 'text-cyan-400 hover:text-cyan-300' : 'text-cyan-600 hover:text-cyan-700'}`}
                        >
                            {t.cards.devLink} <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
                        </button>
                    </div>
                </div>
            </section>

            {/* Footer / Contact */}
            <section id="contact" className={`py-24 px-6 border-t ${isDark ? 'bg-stone-900 border-stone-800' : 'bg-[#FAFAFA] border-stone-200'}`}>
                <div className="max-w-2xl mx-auto text-center">
                    <Feather className={`w-8 h-8 mx-auto mb-6 ${isDark ? 'text-stone-600' : 'text-stone-300'}`} />
                    <h2 className="text-2xl font-serif font-bold mb-8">{t.contact.title}</h2>
                    <p className={`mb-10 ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>
                        {t.contact.description}
                    </p>

                    <div className="flex flex-col sm:flex-row gap-4 mb-4">
                        <input
                            type="email"
                            placeholder={t.contact.placeholderEmail}
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            disabled={status === 'loading' || status === 'success'}
                            className={`flex-1 px-4 py-3 rounded-lg border outline-none focus:ring-1 focus:ring-stone-400 transition-all ${isDark ? 'bg-stone-800 border-stone-700 text-stone-200' : 'bg-white border-stone-200 text-stone-800'}`}
                        />
                        <button
                            onClick={handleEmailSubmit}
                            disabled={status === 'loading' || status === 'success'}
                            className={`px-8 py-3 rounded-lg font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed ${isDark ? 'bg-stone-100 text-stone-900 hover:bg-white' : 'bg-stone-900 text-white hover:bg-stone-800'}`}
                        >
                            {status === 'loading' ? '发送中...' : t.contact.submit}
                        </button>
                    </div>

                    {/* Status Message */}
                    {message && (
                        <div className={`mb-12 text-sm font-medium ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}>
                            {message}
                        </div>
                    )}

                    {!message && <div className="mb-16"></div>}

                    <div className={`text-xs leading-loose pt-12 border-t ${isDark ? 'border-stone-800 text-stone-600' : 'border-stone-200 text-stone-400'}`}>
                        {/* The Original Letter Links */}
                        <div className="mb-4 flex flex-col items-center gap-2">
                            {/* Letter to Players -> Letters.tsx -> /letters */}
                            <a
                                href="/letters"
                                onClick={(e) => { e.preventDefault(); navigate('/letters'); }}
                                className="inline-flex items-center gap-2 hover:underline decoration-stone-400 underline-offset-4 cursor-pointer"
                            >
                                <BookOpen className="w-3 h-3" />
                                {t.contact.footerLetter}
                            </a>
                            {/* Shareholder Letter -> PDF Download */}
                            <a
                                href="/ltr/20250529ltr.pdf"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center gap-2 hover:underline decoration-stone-400 underline-offset-4 cursor-pointer"
                            >
                                <BookOpen className="w-3 h-3" />
                                {t.contact.footerShareholder}
                            </a>
                        </div>
                        <p>{t.contact.footerNote}</p>
                        <p className="mt-4">{t.contact.copyright}</p>
                    </div>
                </div>
            </section >

        </div >
    );
};

export default SimpleHome;