ccdw-website/src/pages/Step2.tsx

import './step2.css';
import SharedHeader from '../components/SharedHeader';
import StepProgress from '../components/StepProgress';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';

const Step2 = () => {
    const { t, i18n } = useTranslation();
    const navigate = useNavigate();

    // Theme state - Default to DARK if not specified, because Step 2's soul is cyber-dark
    const savedTheme = localStorage.getItem('theme');
    const [isDark, setIsDark] = useState(savedTheme ? savedTheme === 'dark' : true);

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

    const toggleTheme = () => setIsDark(!isDark);
    const toggleLang = () => i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh');

    const currentLang = i18n.language === 'zh' ? 'zh' : 'en';

    // CSS Variables for Theming
    const themeStyles = {
        '--bg-color': isDark ? '#050505' : '#ffffff',
        '--text-primary': isDark ? '#ffffff' : '#000000',
        '--text-secondary': isDark ? '#888888' : '#666666',
        '--accent-color': isDark ? '#ccff00' : '#000000', // Black accent in light mode for brutalist look
        '--grid-line': isDark ? '#222222' : '#e5e5e5',
        '--card-bg': isDark ? '#050505' : '#f5f5f5',
        '--card-border': isDark ? '#333333' : '#e5e5e5',
    } as React.CSSProperties;

    // Helper for scrolling
    const scrollToId = (id: string) => {
        const element = document.getElementById(id);
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
        }
    };

    return (
        <div style={themeStyles} className="step2-page min-h-screen flex flex-col selection:bg-[var(--accent-color)] selection:text-[var(--bg-color)] transition-colors duration-500">
            {/* 顶部导航 */}
            <SharedHeader
                theme={isDark ? 'dark' : 'light'}
                onThemeToggle={toggleTheme}
                onLangToggle={toggleLang}
                currentLang={currentLang}
            />

            <div className="bg-[var(--bg-color)] pt-24 pb-4">
                <StepProgress currentStep={2} theme={isDark ? 'dark' : 'light'} />
            </div>

            {/* 跑马灯 */}
            <div className="mt-20 marquee-container mono">
                <div className="marquee-content">
                    AI GENERATED CONTENT /// DIGITAL ART /// INTERACTIVE INSTALLATIONS /// DATA ASSETS /// VIRTUAL HUMANS /// IMMERSIVE EXPERIENCE /// MAKE IT FUN ///
                    AI GENERATED CONTENT /// DIGITAL ART /// INTERACTIVE INSTALLATIONS /// DATA ASSETS /// VIRTUAL HUMANS /// IMMERSIVE EXPERIENCE /// MAKE IT FUN ///
                </div>
            </div>

            {/* Hero Section */}
            <header className="relative min-h-[80vh] flex items-center justify-center bg-grid border-b border-[var(--grid-line)]">
                <div className="text-center px-4 max-w-5xl mx-auto z-10">
                    <div className="mono text-[var(--accent-color)] mb-4 text-sm md:text-base tracking-widest">
                        {t('step2.label')}
                    </div>
                    <h1 className="text-5xl md:text-8xl font-black mb-6 leading-tight glitch-wrapper">
                        <span className="glitch" data-text={t('step2.hero_title')}>{t('step2.hero_title')}</span>
                    </h1>
                    <p className="text-[var(--text-secondary)] text-lg md:text-2xl max-w-3xl mx-auto font-light leading-relaxed">
                        {t('step2.hero_desc')}<span className="text-[var(--text-primary)] font-bold border-b-2 border-[var(--accent-color)]">{t('step2.hero_desc_highlight')}</span>{t('step2.hero_desc_2')}
                    </p>
                    <div className="mt-12 flex flex-col md:flex-row gap-6 justify-center">
                        <button onClick={() => scrollToId('services')} className="px-8 py-4 bg-[var(--text-primary)] text-[var(--bg-color)] font-bold hover:bg-[var(--accent-color)] hover:text-[var(--bg-color)] transition-colors mono border border-[var(--text-primary)] hover:border-[var(--accent-color)]">
                            {t('step2.btn_explore')}
                        </button>
                        <button onClick={() => scrollToId('contact')} className="px-8 py-4 border border-[var(--text-primary)] text-[var(--text-primary)] hover:border-[var(--accent-color)] hover:text-[var(--accent-color)] transition-colors mono">
                            {t('step2.btn_contact')}
                        </button>
                    </div>
                </div>

                {/* 装饰性背景元素 */}
                <div className="absolute top-1/4 left-10 w-24 h-24 border border-[var(--grid-line)] rounded-full flex items-center justify-center animate-spin-slow opacity-50">
                    <div className="w-2 h-2 bg-[var(--accent-color)] rounded-full"></div>
                </div>
            </header>

            {/* 核心理念 */}
            <section className="py-20 px-6 border-b border-[var(--grid-line)]">
                <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                    <div>
                        <h2 className="text-3xl md:text-4xl font-bold mb-6">{t('step2.philosophy_title')}<span className="text-[var(--accent-color)]">{t('step2.philosophy_highlight')}</span></h2>
                        <div className="space-y-6 text-[var(--text-secondary)]">
                            <p>
                                {t('step2.philosophy_desc')}<strong>{t('step2.philosophy_bold')}</strong>。
                            </p>
                            <ul className="space-y-4 mono text-sm">
                                {(t('step2.philosophy_list', { returnObjects: true }) as string[]).map((item, i) => (
                                    <li key={i} className="flex items-center">
                                        <span className="w-2 h-2 bg-[var(--accent-color)] mr-3"></span>
                                        {item}
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                    <div className="relative h-64 md:h-96 bg-[var(--card-bg)] border border-[var(--card-border)] p-4 font-mono text-xs text-[var(--accent-color)] overflow-hidden">
                        <div className="absolute inset-0 opacity-20 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjODg4Ii8+Cjwvc3ZnPg==')]"></div>
                        <p>{t('step2.terminal.init')}</p>
                        <p>{t('step2.terminal.load')}</p>
                        <p>{t('step2.terminal.gen')}</p>
                        <p>{t('step2.terminal.opt')}</p>
                        <p className="mt-4 text-[var(--text-primary)]">
                            {t('step2.terminal.status')}<span className="text-[var(--accent-color)]">{t('step2.terminal.online')}</span>
                        </p>
                        {/* 模拟代码滚动效果 */}
                        <div className="absolute bottom-4 right-4 w-4 h-4 bg-[var(--accent-color)] cursor-blink"></div>
                    </div>
                </div>
            </section>

            {/* 服务清单 */}
            <section id="services" className="py-20 px-6 bg-[var(--bg-color)]">
                <div className="max-w-7xl mx-auto">
                    <div className="mb-16">
                        <span className="mono text-[var(--accent-color)] text-sm">{t('step2.services_menu')}</span>
                        <h2 className="text-4xl md:text-5xl font-bold mt-2">{t('step2.services_title')}</h2>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">

                        {/* Service 01 */}
                        <div className="service-card p-8 bg-[var(--card-bg)] border border-[var(--card-border)] flex flex-col justify-between h-full">
                            <div>
                                <div className="text-4xl mb-6 opacity-30 font-black">01</div>
                                <h3 className="text-xl font-bold mb-4 text-[var(--text-primary)]">{t('step2.services.s1.title')}</h3>
                                <p className="text-[var(--text-secondary)] text-sm leading-relaxed mb-6">
                                    {t('step2.services.s1.desc')}
                                </p>
                                <ul className="text-sm text-[var(--text-secondary)] space-y-2 mono border-t border-[var(--card-border)] pt-4">
                                    {(t('step2.services.s1.list', { returnObjects: true }) as string[]).map((item, i) => (
                                        <li key={i}>{item}</li>
                                    ))}
                                </ul>
                            </div>
                        </div>

                        {/* Service 02 */}
                        <div className="service-card p-8 bg-[var(--card-bg)] border border-[var(--card-border)] flex flex-col justify-between h-full">
                            <div>
                                <div className="text-4xl mb-6 opacity-30 font-black">02</div>
                                <h3 className="text-xl font-bold mb-4 text-[var(--text-primary)]">{t('step2.services.s2.title')}</h3>
                                <p className="text-[var(--text-secondary)] text-sm leading-relaxed mb-6">
                                    {t('step2.services.s2.desc')}
                                </p>
                                <ul className="text-sm text-[var(--text-secondary)] space-y-2 mono border-t border-[var(--card-border)] pt-4">
                                    {(t('step2.services.s2.list', { returnObjects: true }) as string[]).map((item, i) => (
                                        <li key={i}>{item}</li>
                                    ))}
                                </ul>
                            </div>
                        </div>

                        {/* Service 03 */}
                        <div className="service-card p-8 bg-[var(--card-bg)] border border-[var(--card-border)] flex flex-col justify-between h-full">
                            <div>
                                <div className="text-4xl mb-6 opacity-30 font-black">03</div>
                                <h3 className="text-xl font-bold mb-4 text-[var(--text-primary)]">{t('step2.services.s3.title')}</h3>
                                <p className="text-[var(--text-secondary)] text-sm leading-relaxed mb-6">
                                    {t('step2.services.s3.desc')}
                                </p>
                                <ul className="text-sm text-[var(--text-secondary)] space-y-2 mono border-t border-[var(--card-border)] pt-4">
                                    {(t('step2.services.s3.list', { returnObjects: true }) as string[]).map((item, i) => (
                                        <li key={i}>{item}</li>
                                    ))}
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            {/* 案例展示 (Abstract) */}
            <section className="py-20 px-6 border-t border-[var(--grid-line)]">
                <div className="max-w-7xl mx-auto">
                    <div className="flex flex-col md:flex-row justify-between items-end mb-12">
                        <h2 className="text-4xl font-bold">{t('step2.lab_title')}</h2>
                        <span className="mono text-[var(--text-secondary)]">{t('step2.lab_subtitle')}</span>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {/* Case 1 */}
                        <div className="group cursor-pointer">
                            <div className="h-64 bg-[var(--card-bg)] border border-[var(--card-border)] overflow-hidden relative">
                                <div className="absolute inset-0 flex items-center justify-center text-[var(--text-primary)] text-6xl font-black opacity-10 group-hover:scale-110 transition-transform duration-500">
                                    {t('step2.cases.c1.bg_text')}
                                </div>
                                <div className="absolute bottom-0 left-0 p-4 w-full bg-gradient-to-t from-[var(--bg-color)] to-transparent">
                                    <div className="text-[var(--accent-color)] mono text-xs mb-1">{t('step2.cases.c1.date')}</div>
                                    <h3 className="text-xl font-bold">{t('step2.cases.c1.title')}</h3>
                                </div>
                            </div>
                            <p className="mt-4 text-[var(--text-secondary)] text-sm">
                                {t('step2.cases.c1.desc')}
                            </p>
                        </div>

                        {/* Case 2 */}
                        <div className="group cursor-pointer">
                            <div className="h-64 bg-[var(--card-bg)] border border-[var(--card-border)] overflow-hidden relative">
                                <div className="absolute inset-0 flex items-center justify-center text-[var(--text-primary)] text-6xl font-black opacity-10 group-hover:scale-110 transition-transform duration-500">
                                    {t('step2.cases.c2.bg_text')}
                                </div>
                                <div className="absolute bottom-0 left-0 p-4 w-full bg-gradient-to-t from-[var(--bg-color)] to-transparent">
                                    <div className="text-[var(--accent-color)] mono text-xs mb-1">{t('step2.cases.c2.date')}</div>
                                    <h3 className="text-xl font-bold">{t('step2.cases.c2.title')}</h3>
                                </div>
                            </div>
                            <p className="mt-4 text-[var(--text-secondary)] text-sm">
                                {t('step2.cases.c2.desc')}
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            {/* Footer / Contact */}
            <footer id="contact" className="py-20 px-6 bg-[var(--accent-color)] text-[var(--bg-color)]">
                <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-start">
                    <div>
                        <h2 className="text-5xl md:text-7xl font-black mb-6 tracking-tighter whitespace-pre-line">{t('step2.footer_title')}</h2>
                        <p className="text-lg font-medium max-w-md whitespace-pre-line">
                            {t('step2.footer_desc')}
                        </p>
                    </div>
                    <div className="mt-12 md:mt-0 flex flex-col space-y-4 text-right">
                        <div className="flex justify-end gap-3 mb-8">
                            <button
                                onClick={() => navigate('/step1')}
                                className="px-6 py-3 border border-[var(--bg-color)] text-[var(--bg-color)] hover:bg-[var(--bg-color)] hover:text-[var(--accent-color)] font-bold transition-colors"
                            >
                                ← PREV: STEP 1
                            </button>
                            <button
                                onClick={() => navigate('/step3')}
                                className="px-6 py-3 bg-[var(--bg-color)] text-[var(--accent-color)] hover:opacity-90 font-bold transition-colors"
                            >
                                NEXT: STEP 3 →
                            </button>
                        </div>
                        <a href={`mailto:${t('step2.footer_contact')}`} className="text-2xl font-bold underline hover:opacity-70">{t('step2.footer_contact')}</a>
                        <div className="mono text-sm font-bold">{t('step2.footer_loc')}</div>
                        <div className="mt-8 pt-8 border-t border-[var(--bg-color)]/20">
                            <p className="text-sm">© 2026 杭州纯粹的玩品牌科技有限公司.</p>
                            <p className="text-sm">All Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
};

export default Step2;