ccdw-website/src/pages/Step3.tsx

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
    Terminal,
    Cpu,
    Zap,
    Code,
    Server,
    ArrowRight,
    CheckCircle,
    Copy
} from 'lucide-react';
import SharedHeader from '../components/SharedHeader';
import './step3.css';
import StepProgress from '../components/StepProgress';
import { useGlobalSettings } from '../hooks/useGlobalSettings';
import { useEmailSubmission } from '../hooks/useEmailSubmission';

const Step3 = () => {
    const { t } = useTranslation();

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

    // Code Snippet State
    const [copied, setCopied] = useState(false);
    const codeSnippet = `curl https://api.ccdw.xyz/v1/chat/completions \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer YOUR_API_KEY" \\
  -d '{
    "model": "gpt-4-turbo",
    "messages": [{"role": "user", "content": "Hello!"}]
  }'`;

    const handleCopy = () => {
        navigator.clipboard.writeText(codeSnippet);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    // Theme-based classes
    const theme = {
        bg: isDark ? 'bg-[#0a0a0a]' : 'bg-white',
        bgSecondary: isDark ? 'bg-[#111]' : 'bg-stone-50',
        bgTertiary: isDark ? 'bg-[#0d0d0d]' : 'bg-stone-100',
        text: isDark ? 'text-white' : 'text-stone-900',
        textMuted: isDark ? 'text-gray-400' : 'text-stone-600',
        textLight: isDark ? 'text-gray-600' : 'text-stone-400',
        border: isDark ? 'border-[#222]' : 'border-stone-200',
        borderLight: isDark ? 'border-[#333]' : 'border-stone-300',
        accent: 'text-[#00f0ff]',
        accentBg: isDark ? 'bg-[#00f0ff]/10' : 'bg-cyan-50',
        cardBg: isDark ? 'bg-[#111]' : 'bg-white',
        cardBorder: isDark ? 'border-[#333]' : 'border-stone-200',
        inputBg: isDark ? 'bg-[#1a1a1a]' : 'bg-white',
        codeHeaderBg: isDark ? 'bg-[#1a1a1a]' : 'bg-stone-100',
        selection: isDark ? 'selection:bg-[#00f0ff] selection:text-black' : 'selection:bg-cyan-200 selection:text-cyan-900',
    };

    // Email Submission Logic - 使用统一的 hook
    const [email, setEmail] = useState('');
    const { submitEmail, status, message } = useEmailSubmission();

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

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

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

    return (
        <div className={`step3-page min-h-screen ${theme.bg} ${theme.text} ${theme.selection} font-sans transition-colors duration-300`}>
            <SharedHeader
                theme={isDark ? 'dark' : 'light'}
                onThemeToggle={toggleTheme}
                onLangToggle={toggleLang}
                currentLang={currentLang}
            />

            {/* Progress Indicator */}
            <div className={`pt-24 pb-8 max-w-5xl mx-auto px-6 ${theme.bg}`}>
                <StepProgress currentStep={3} theme={isDark ? 'dark' : 'light'} />
            </div>

            {/* Hero Section */}
            <section className={`relative pt-10 pb-32 px-6 border-b ${theme.border} overflow-hidden`}>
                {/* Background Grid */}
                <div className={`absolute inset-0 ${isDark ? 'bg-grid-cyan opacity-20' : 'bg-grid-cyan-light opacity-10'} pointer-events-none`}></div>
                <div className={`absolute top-0 left-0 w-full h-full ${isDark ? 'bg-gradient-to-b from-[#0a0a0a] via-transparent to-[#0a0a0a]' : 'bg-gradient-to-b from-white via-transparent to-white'} pointer-events-none`}></div>

                <div className="max-w-5xl mx-auto relative z-10 text-center">
                    <div className={`inline-block px-3 py-1 mb-8 border ${theme.borderLight} rounded-full ${theme.bgSecondary} ${theme.accent} text-xs font-mono tracking-widest uppercase`}>
                        {t('step3.label')}
                    </div>

                    <h1 className="text-5xl md:text-8xl font-black mb-8 leading-none tracking-tight">
                        {t('step3.hero_title')}<br />
                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] to-[#00aaff]">
                            {t('step3.hero_title_highlight')}
                        </span>
                    </h1>

                    <p className={`max-w-2xl mx-auto text-lg md:text-xl ${theme.textMuted} mb-12 leading-relaxed`}>
                        {t('step3.hero_desc')} <span className={`${theme.text} border-b border-[#00f0ff]`}>{t('step3.hero_desc_highlight')}</span>
                        <br className="hidden md:block" />
                        {t('step3.hero_subtitle')}
                    </p>

                    <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                        <button className="px-8 py-4 bg-[#00f0ff] text-black font-bold text-lg rounded hover:bg-[#00ccee] transition-colors flex items-center gap-2 group">
                            <Terminal className="w-5 h-5" />
                            {t('step3.btn_get_key')}
                            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                        </button>
                        <button className={`px-8 py-4 border ${theme.borderLight} hover:border-[#00f0ff] ${theme.textMuted} hover:${theme.text} rounded transition-colors font-mono`}>
                            {t('step3.btn_pricing')}
                        </button>
                    </div>
                </div>
            </section>

            {/* Services Grid */}
            <section className={`py-24 px-6 ${theme.bg}`}>
                <div className="max-w-6xl mx-auto">
                    <div className="grid md:grid-cols-3 gap-8">
                        {/* Token Relay */}
                        <div className={`s3-card p-8 rounded-xl ${theme.cardBg} border ${theme.cardBorder} group`}>
                            <div className={`w-12 h-12 ${theme.accentBg} rounded flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
                                <Zap className="w-6 h-6 text-[#00f0ff]" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">{t('step3.services.token.title')}</h3>
                            <p className={`${theme.textMuted} mb-6 leading-relaxed`}>
                                {t('step3.services.token.desc')}
                            </p>
                            <div className="text-xs font-mono text-[#00f0ff] uppercase tracking-wider">
                                {t('step3.services.token.highlight')}
                            </div>
                        </div>

                        {/* Elastic Compute */}
                        <div className={`s3-card p-8 rounded-xl ${theme.cardBg} border ${theme.cardBorder} group`}>
                            <div className={`w-12 h-12 ${theme.accentBg} rounded flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
                                <Cpu className="w-6 h-6 text-[#00f0ff]" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">{t('step3.services.compute.title')}</h3>
                            <p className={`${theme.textMuted} mb-6 leading-relaxed`}>
                                {t('step3.services.compute.desc')}
                            </p>
                            <div className="text-xs font-mono text-[#00f0ff] uppercase tracking-wider">
                                {t('step3.services.compute.highlight')}
                            </div>
                        </div>

                        {/* SaaS Kit */}
                        <div className={`s3-card p-8 rounded-xl ${theme.cardBg} border ${theme.cardBorder} group`}>
                            <div className={`w-12 h-12 ${theme.accentBg} rounded flex items-center justify-center mb-6 group-hover:scale-110 transition-transform`}>
                                <Server className="w-6 h-6 text-[#00f0ff]" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">{t('step3.services.saas.title')}</h3>
                            <p className={`${theme.textMuted} mb-6 leading-relaxed`}>
                                {t('step3.services.saas.desc')}
                            </p>
                            <div className="text-xs font-mono text-[#00f0ff] uppercase tracking-wider">
                                {t('step3.services.saas.highlight')}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Code & Integration */}
            <section className={`py-24 px-6 border-y ${theme.border} ${theme.bgTertiary}`}>
                <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-16">
                    <div className="md:w-1/2">
                        <div className="flex items-center gap-3 mb-6">
                            <Code className="w-6 h-6 text-[#00f0ff]" />
                            <h2 className="text-3xl font-bold">{t('step3.code_title')}</h2>
                        </div>
                        <div className="space-y-6">
                            {(t('step3.features', { returnObjects: true }) as any[]).map((feature: any, idx: number) => (
                                <div key={idx} className="flex gap-4">
                                    <div className="mt-1">
                                        <CheckCircle className="w-5 h-5 text-[#00f0ff]" />
                                    </div>
                                    <div>
                                        <h4 className={`font-bold ${theme.text} mb-1`}>{feature.title}</h4>
                                        <p className={`text-sm ${theme.textMuted}`}>{feature.desc}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    <div className="md:w-1/2 w-full">
                        <div className={`code-window border ${theme.cardBorder} rounded-lg overflow-hidden shadow-xl`}>
                            <div className={`code-header ${theme.codeHeaderBg} border-b ${theme.cardBorder}`}>
                                <div className="dot red"></div>
                                <div className="dot yellow"></div>
                                <div className="dot green"></div>
                                <div className={`ml-auto text-xs ${theme.textLight} font-mono`}>bash</div>
                            </div>
                            <div className={`p-6 overflow-x-auto relative group ${isDark ? 'bg-black' : 'bg-stone-900'}`}>
                                <pre className="font-mono text-sm leading-relaxed text-[#00f0ff]">
                                    {codeSnippet}
                                </pre>
                                <button
                                    onClick={handleCopy}
                                    className="absolute top-4 right-4 p-2 bg-[#333] hover:bg-[#444] rounded text-white opacity-0 group-hover:opacity-100 transition-opacity"
                                >
                                    {copied ? <CheckCircle className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA / Footer */}
            <footer className={`py-32 px-6 text-center ${theme.bg}`}>
                <div className="max-w-2xl mx-auto">
                    <h2 className="text-4xl font-bold mb-6">{t('step3.cta_title')}</h2>
                    <p className={`${theme.textMuted} mb-10 text-lg`}>
                        {t('step3.cta_desc')}
                    </p>

                    <div className="flex flex-col sm:flex-row max-w-md mx-auto gap-4">
                        <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            disabled={status === 'loading' || status === 'success'}
                            placeholder={t('step3.cta_input_placeholder')}
                            className={`flex-1 ${theme.inputBg} border ${theme.borderLight} rounded px-4 py-3 ${theme.text} focus:outline-none focus:border-[#00f0ff] transition-colors disabled:opacity-50`}
                        />
                        <button
                            onClick={handleEmailSubmit}
                            disabled={status === 'loading' || status === 'success'}
                            className="px-6 py-3 bg-[#00f0ff] text-black font-bold rounded hover:bg-[#00ccee] transition-colors whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            {status === 'loading' ? (currentLang === 'zh' ? '发送中...' : 'Sending...') : t('step3.cta_btn')}
                        </button>
                    </div>

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

                    {/* Navigation buttons */}
                    <div className="flex justify-center gap-4 mb-12">
                        <button
                            onClick={() => navigate('/step2')}
                            className={`px-6 py-3 border ${theme.borderLight} hover:border-[#00f0ff] ${theme.textMuted} hover:text-[#00f0ff] rounded transition-colors font-mono`}
                        >
                            {t('step3.nav_prev')}
                        </button>
                        <button
                            onClick={() => navigate('/')}
                            className={`px-6 py-3 border ${theme.borderLight} hover:border-[#00f0ff] ${theme.textMuted} hover:text-[#00f0ff] rounded transition-colors font-mono`}
                        >
                            {t('step3.nav_home')}
                        </button>
                    </div>

                    <div className={`pt-8 border-t ${theme.border} text-sm ${theme.textLight} font-mono`}>
                        {t('step3.footer_rights')}
                    </div>
                </div>
            </footer>
        </div>
    );
};

export default Step3;