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 { useGlobalSettings } from '../hooks/useGlobalSettings';
import { useEmailSubmission } from '../hooks/useEmailSubmission';

// 多语言配置
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日给股东们的信',
            footerShareholder2: '阅读：2026年3月31日给股东们的信',
            footerNote: '"纯粹的玩"由几位股东共同创立，我作为现在的法人和大股东，拥有最终决策权。',
            copyright: '© 2026 杭州纯粹的玩品牌科技有限公司'
        },
        brand: {
            title: '欢迎来到「纯粹的玩AI实验室」',
            subtitle: '探索超级个体的商业护城河',
            desc1: '在技术狂飙的时代，很多人只看到了工具的迭代，而我们看到的是商业模式的重塑。',
            desc2: '「纯粹的玩AI实验室」不是一个追逐短期风口的极客圈子，而是一个专注于将前沿技术落地为实际商业价值的实战社群。我们秉持价值投资的理念，不盲目跟风炒作，而是致力于挖掘那些具有长期生命力、能建立深厚护城河的 AI 应用场景。',
            listTitle: '在这里，我们专注探索和拆解：',
            list: [
                {
                    icon: '💼',
                    title: '一人公司 (OPC) 的崛起与基础设施',
                    desc: '探讨 AI 如何赋能独立开发者和超级个体。从自动化工作流到专属算力设施，我们研究如何用最低的边际成本，撬动最大的商业杠杆，让“一人成军”成为现实。'
                },
                {
                    icon: '🏛️',
                    title: 'AI + 文旅的实体赋能',
                    desc: '告别虚无缥缈的纯线上概念，我们关注 AI 如何真正走到线下。探讨如何通过 AI 焕新传统文旅项目，打造沉浸式体验、寻宝互动与数字化运营闭环，让技术在泥土里扎根。'
                },
                {
                    icon: '🎨',
                    title: 'IP 孵化与资产沉淀',
                    desc: '无论是数字游民的个人品牌，还是具有情绪价值和陪伴属性的商业 IP，我们研究如何利用 AI 高效生成并运营 IP，将其转化为可持续变现的无形资产。'
                },
                {
                    icon: '🔍',
                    title: '透视底层商业模式',
                    desc: '拨开技术的迷雾，用投资人的眼光审视 AI 项目。分享洞察、分析标的，寻找那些真正具备复利效应和护城河的商业好生意。'
                }
            ]
        }
    },
    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)',
            footerShareholder2: 'Read: Letter to Shareholders (March 31, 2026)',
            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.'
        },
        brand: {
            title: 'Welcome to "Pure Play AI Lab"',
            subtitle: 'Exploring the Commercial Moat for Super Individuals',
            desc1: 'In an era of rapid technological advancement, many see only the iteration of tools, but we see the reshaping of business models.',
            desc2: '"Pure Play AI Lab" is not a geek circle chasing short-term trends, but a practical community dedicated to landing cutting-edge technology into actual business value. We uphold the philosophy of value investment, avoiding blind trend-following, and instead dedicating ourselves to excavating AI application scenarios with long-term vitality and deep moats.',
            listTitle: 'Here, we focus on exploring and deconstructing:',
            list: [
                {
                    icon: '💼',
                    title: 'Rise & Infrastructure of One Person Companies (OPC)',
                    desc: 'Discussing how AI empowers independent developers and super individuals. From automated workflows to dedicated computing facilities, we study how to leverage the lowest marginal cost to move the largest business leverage, making "One Person Army" a reality.'
                },
                {
                    icon: '🏛️',
                    title: 'AI + Real-World Tourism Empowerment',
                    desc: 'Saying goodbye to ethereal pure online concepts, we focus on how AI truly walks offline. Discussing how to revitalize traditional tourism projects through AI, creating immersive experiences, treasure hunt interactions, and closed-loop digital operations, letting technology take root in the soil.'
                },
                {
                    icon: '🎨',
                    title: 'IP Incubation & Asset Precipitation',
                    desc: 'Whether it is the personal brand of digital nomads or commercial IPs with emotional value and companionship attributes, we study how to efficiently generate and operate IPs using AI, transforming them into sustainable intangible assets.'
                },
                {
                    icon: '🔍',
                    title: 'Deconstructing Underlying Business Models',
                    desc: 'Clearing the fog of technology, examining AI projects with the eyes of an investor. Sharing insights, analyzing targets, and looking for good business opportunities with true compound interest effects and moats.'
                }
            ]
        }
    }
};

const SimpleHome = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    // 使用统一的全局状态管理
    const { isDark, currentLang: lang, toggleTheme, toggleLang } = useGlobalSettings();

    const [email, setEmail] = useState('');
    const { submitEmail, status, message } = useEmailSubmission();

    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]);

    const t = translations[lang];

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

    // toggleTheme 和 toggleLang 已从 useGlobalSettings 获取

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

        const result = await submitEmail({
            email,
            source: 'SimpleHome_Contact'
        });

        if (result.success) {
            setEmail('');
        }
    };

    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>

            {/* Brand Intro / Manifesto Section */}
            <section id="brand-intro" className={`py-20 px-6 ${isDark ? 'bg-stone-800/30' : 'bg-stone-50'}`}>
                <div className="max-w-5xl mx-auto">
                    {/* Header */}
                    <div className="text-center max-w-3xl mx-auto mb-16">
                        <div className="flex items-center justify-center gap-2 mb-4">
                            <span className="text-2xl">🚀</span>
                            <h2 className={`text-2xl md:text-3xl font-serif font-bold ${isDark ? 'text-stone-100' : 'text-stone-800'}`}>
                                {t.brand.title}
                            </h2>
                        </div>
                        <p className={`text-lg md:text-xl font-medium mb-8 ${isDark ? 'text-blue-300' : 'text-blue-600'}`}>
                            —— {t.brand.subtitle}
                        </p>

                        <div className={`space-y-6 text-base leading-relaxed text-left md:text-center ${isDark ? 'text-stone-400' : 'text-stone-600'}`}>
                            <p>{t.brand.desc1}</p>
                            <p>{t.brand.desc2}</p>
                        </div>
                    </div>

                    {/* Features Grid */}
                    <div className="mb-8">
                        <h3 className={`text-lg font-bold mb-8 text-center ${isDark ? 'text-stone-300' : 'text-stone-700'}`}>
                            {t.brand.listTitle}
                        </h3>
                        <div className="grid md:grid-cols-2 gap-6">
                            {t.brand.list.map((item, idx) => (
                                <div
                                    key={idx}
                                    className={`p-6 rounded-xl border transition-all hover:-translate-y-1 ${isDark ? 'bg-stone-800 border-stone-700' : 'bg-white border-stone-200 shadow-sm hover:shadow-md'}`}
                                >
                                    <div className="flex items-start gap-4">
                                        <div className="text-3xl shrink-0">{item.icon}</div>
                                        <div>
                                            <h4 className={`font-bold text-lg mb-2 ${isDark ? 'text-stone-200' : 'text-stone-800'}`}>
                                                {item.title}
                                            </h4>
                                            <p className={`text-sm leading-relaxed ${isDark ? 'text-stone-400' : 'text-stone-500'}`}>
                                                {item.desc}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </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' ? (lang === 'zh' ? '发送中...' : 'Sending...') : 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-1">
                            {/* Shareholder Letter 2 -> PDF Download */}
                            <a
                                href="/ltr/20260331ltr.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.footerShareholder2}
                            </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>
                            {/* 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>
                        </div>
                        <p>{t.contact.footerNote}</p>
                        <p className="mt-4">{t.contact.copyright}</p>
                        <p className="mt-1 text-[10px] opacity-50">
                            {lang === 'zh' ? '杭州纯粹的玩品牌科技有限公司' : 'Hangzhou Pure Play Brand Technology Co., Ltd.'}
                        </p>
                    </div>
                </div>
            </section >

        </div >
    );
};

export default SimpleHome;