/*
Copyright (C) 2025 QuantumNous
*/

import React, { useState, useEffect, useCallback, useRef, useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  Copy, Check, Box, Grid3X3, Trophy, BookOpen,
  Zap, Shield, Globe, ArrowRight, Layers, Sparkles, ArrowUpRight,
  Cpu, CreditCard, RefreshCw, MessageSquare, Send, Terminal,
  Database, Workflow, Lock, BarChart3, Users, ChevronRight,
  Cloud, Server, Activity, TrendingUp, Headphones, FileText,
  Key, Settings, Monitor, Smartphone, BarChart2, Globe2,
} from 'lucide-react';
import { UserContext } from '../../context/User';
import { stringToColor, getSystemName } from '../../helpers';



/* ═══════════════ SECTION 1: HERO ═══════════════ */
function Hero() {
  const { t } = useTranslation();
  const [userState] = useContext(UserContext);
  const [copied, setCopied] = useState(false);

  const copyUrl = useCallback(() => {
    navigator.clipboard.writeText('https://api.turingtoken.ai');
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }, []);

  return (
    <section className="relative min-h-[580px] bg-gradient-to-br from-[#0a1929] via-[#0d2137] to-[#132f4c] overflow-hidden">
      {/* Background decorative elements */}
      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#1976d2]/10 rounded-full blur-[150px]" />
      <div className="absolute bottom-0 left-[20%] w-[500px] h-[500px] bg-[#42a5f5]/5 blur-[120px]" />
      
      {/* Grid pattern */}
      <div className="absolute inset-0 opacity-[0.03]" style={{
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
      }} />

      {/* Nav */}
      <nav className="relative z-20 flex items-center justify-between px-6 lg:px-12 h-14 max-w-[1400px] mx-auto w-full">
        <Link to="/" className="flex items-center gap-2.5">
          <img src="/logo.jpg" alt="" className="w-7 h-7 rounded-lg object-cover" />
          <span className="text-[16px] font-bold text-white tracking-tight">TuringToken</span>
        </Link>
        <div className="hidden md:flex items-center gap-1">
          {[{ l: t('模型'), to: '/pricing', i: <Box size={14} /> }, { l: t('评测'), to: '/benchmarks', i: <Trophy size={14} /> }, { l: t('文档'), to: '/docs', i: <BookOpen size={14} /> }, { l: t('控制台'), to: '/console', i: <Grid3X3 size={14} /> }].map(n => (
            <Link key={n.to} to={n.to} className="flex items-center gap-1.5 px-3 py-1.5 rounded text-sm text-white/70 hover:text-white hover:bg-white/5 transition-all">
              {n.i}{n.l}
            </Link>
          ))}
        </div>
        <div className="flex items-center gap-3">
          {userState.user ? (
            <Link to="/console" className="w-7 h-7 rounded border border-white/10 flex items-center justify-center hover:bg-white/10 transition-all">
              <span className="w-4 h-4 rounded flex items-center justify-center text-[8px] font-bold text-white" style={{ backgroundColor: stringToColor(userState.user.username) }}>
                {userState.user.username?.charAt(0).toUpperCase()}
              </span>
            </Link>
          ) : (
            <Link to="/login" className="px-4 py-1.5 rounded text-sm font-medium text-white bg-[#1976d2] hover:bg-[#1565c0] transition-all">
              {t('登录')}
            </Link>
          )}
        </div>
      </nav>

      {/* Content */}
      <div className="relative z-10 max-w-[1200px] mx-auto px-6 pt-14 pb-14">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left */}
          <div>
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[#42a5f5]/30 bg-[#42a5f5]/10 mb-5">
              <Sparkles size={12} className="text-[#42a5f5]" />
              <span className="text-xs font-medium text-[#42a5f5]">Unified AI Gateway</span>
            </div>

            <h1 className="text-4xl sm:text-5xl lg:text-[52px] font-bold leading-[1.1] mb-5">
              <span className="text-white">{t('更快、更稳、更省')}</span>
              <br />
              <span className="text-[#42a5f5]">{t('Token服务平台')}</span>
            </h1>

            <p className="text-white/60 text-lg leading-relaxed mb-8 max-w-lg">
              {t('兼容 OpenAI / Claude / Gemini 等协议，覆盖文本、图像、视频、语音，智能路由，统一计费。')}
            </p>

            <div className="flex flex-col sm:flex-row gap-3 mb-10">
              <Link to="/console/token" className="inline-flex items-center justify-center gap-2 px-7 py-3 bg-[#1976d2] text-white rounded font-medium hover:bg-[#1565c0] transition-all">
                {t('开始使用')} <ArrowRight size={16} />
              </Link>
              <Link to="/pricing" className="inline-flex items-center justify-center gap-2 px-6 py-3 text-white/70 rounded font-medium border border-white/20 hover:border-white/30 hover:text-white hover:bg-white/5 transition-all">
                {t('查看价格')}
              </Link>
            </div>

            {/* Stats */}
            <div className="flex gap-10">
              {[
                { n: '80+', l: 'AI 模型' },
                { n: '40+', l: '供应商' },
                { n: '99.9%', l: '可用率' },
              ].map((s, i) => (
                <div key={i}>
                  <div className="text-2xl font-bold text-white mb-1">{s.n}</div>
                  <div className="text-sm text-white/40">{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — Code card */}
          <div className="relative">
            <div className="rounded-lg border border-white/10 bg-[#0d2137]/80 backdrop-blur overflow-hidden shadow-2xl">
              {/* Header */}
              <div className="flex items-center justify-between px-4 py-2.5 border-b border-white/5 bg-[#0a1929]/80">
                <div className="flex gap-1.5">
                  <span className="w-2 h-2 rounded-full bg-[#ff5f57]" />
                  <span className="w-2 h-2 rounded-full bg-[#febc2e]" />
                  <span className="w-2 h-2 rounded-full bg-[#28c840]" />
                </div>
                <span className="text-[10px] font-mono text-white/30 tracking-wider uppercase">terminal</span>
                <button onClick={copyUrl} className="text-white/20 hover:text-[#42a5f5] transition-colors p-1 rounded hover:bg-white/5">
                  {copied ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}
                </button>
              </div>
              {/* Code */}
              <div className="p-5 font-mono text-[11px] leading-[1.9]">
                <div className="text-white/20 mb-3"># Quick start with curl</div>
                <div>
                  <span className="text-[#42a5f5]">curl</span>{' '}
                  <span className="text-white/60">https://api.turingtoken.ai/v1/chat/completions</span> \
                </div>
                <div>{'  '}<span className="text-amber-400">-H</span> <span className="text-emerald-400">"Authorization: Bearer $KEY"</span> \</div>
                <div>{'  '}<span className="text-amber-400">-H</span> <span className="text-emerald-400">"Content-Type: application/json"</span> \</div>
                <div>{'  '}<span className="text-amber-400">-d</span> <span className="text-yellow-400">'{'{'}</span></div>
                <div>{'    '}<span className="text-[#42a5f5]">"model"</span>: <span className="text-emerald-400">"gpt-4o"</span>,</div>
                <div>{'    '}<span className="text-[#42a5f5]">"messages"</span>: [{'{'}<span className="text-[#42a5f5]">"role"</span>: <span className="text-emerald-400">"user"</span>, <span className="text-[#42a5f5]">"content"</span>: <span className="text-emerald-400">"Hello"</span>{'}'}]</div>
                <div><span className="text-yellow-400">{'}'}</span><span className="text-white/40">'</span></div>
                <div className="mt-3 text-white/20"># Response</div>
                <div className="text-white/50">{'{'} <span className="text-[#42a5f5]">"choices"</span>: [{'{'} <span className="text-[#42a5f5]">"message"</span>: {'{'} <span className="text-[#42a5f5]">"content"</span>: <span className="text-emerald-400">"Hello! How can I help?"</span> {'}'} {'}'}] {'}'}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom marquee */}
      <div className="relative z-10 border-t border-white/5 py-4 overflow-hidden bg-white/[0.02]">
        <div className="home-marquee flex gap-6 items-center">
          {[...Array(3)].fill(null).map((_, gi) => (
            <React.Fragment key={gi}>
              {['OpenAI', 'Claude', 'Gemini', 'DeepSeek', 'Qwen', 'MiniMax', 'Kimi', '智谱', 'Groq', 'Azure'].map((name, i) => (
                <span key={`${gi}-${i}`} className="flex-shrink-0 px-4 py-1 rounded border border-white/5 bg-white/[0.03] text-xs font-medium text-white/30 hover:text-white/50 hover:border-white/10 transition-all">
                  {name}
                </span>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 2: CAPABILITIES ═══════════════ */
const CAPABILITIES = [
  { icon: <Layers size={22} />, title: '多协议兼容', desc: '原生支持 OpenAI、Claude、Gemini，切换 Base URL 即可接入' },
  { icon: <Zap size={22} />, title: '智能路由', desc: '根据模型名称自动路由至最优供应商，无需关心底层调度' },
  { icon: <CreditCard size={22} />, title: '统一计费', desc: '跨供应商统一 Token 消耗统计与账单，告别多平台充值' },
  { icon: <RefreshCw size={22} />, title: '容错降级', desc: '多供应商端点自动切换，逐级降级保障服务持续可用' },
  { icon: <Cpu size={22} />, title: '模型丰富', desc: '接入 80+ 主流模型，覆盖文本、图像、视频、语音全模态' },
  { icon: <Shield size={22} />, title: '开箱即用', desc: '一键登录，分钟级接入，兼容现有 SDK，零迁移成本' },
];

function Capabilities() {
  const { t } = useTranslation();
  return (
    <section className="py-16 px-6 bg-white">
      <div className="max-w-[1200px] mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('平台核心能力')}</h2>
          <p className="text-gray-500 text-sm">一个 API 网关，连接所有主流 AI 模型供应商</p>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {CAPABILITIES.map((p, i) => (
            <div key={i} className="group p-5 rounded-lg border border-gray-200 bg-white hover:border-[#1976d2]/30 hover:shadow-lg hover:shadow-[#1976d2]/5 transition-all duration-300 cursor-pointer">
              <div className="w-10 h-10 rounded-lg bg-[#e3f2fd] text-[#1976d2] flex items-center justify-center mb-3 transition-transform duration-300 group-hover:scale-110">
                {p.icon}
              </div>
              <h3 className="font-bold text-base text-gray-900 mb-1.5 group-hover:text-[#1976d2] transition-colors">{t(p.title)}</h3>
              <p className="text-sm text-gray-500 leading-relaxed">{t(p.desc)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 3: HOW IT WORKS ═══════════════ */
const STEPS = [
  { n: '01', title: '注册账号', desc: '通过邮箱一键注册，即刻开始使用。', icon: <Users size={20} />, link: '/register' },
  { n: '02', title: '创建 API Key', desc: '在控制台创建密钥，支持多 Key 管理。', icon: <Key size={20} />, link: '/console/token' },
  { n: '03', title: '发起请求', desc: '使用你熟悉的 SDK 调用任意模型。', icon: <Send size={20} />, link: '/pricing' },
];

function HowItWorks() {
  const { t } = useTranslation();
  return (
    <section className="py-16 px-6 bg-white">
      <div className="max-w-[1000px] mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-2xl font-bold tracking-tight text-gray-900">{t('三步接入，分钟级上线')}</h2>
        </div>
        <div className="grid md:grid-cols-3 gap-6 relative">
          {STEPS.map((s, i) => (
            <Link key={i} to={s.link} className="group text-center relative">
              <div className="relative inline-flex">
                <div className="w-14 h-14 rounded-full bg-[#1976d2] text-white flex items-center justify-center shadow-lg shadow-[#1976d2]/20 group-hover:shadow-xl group-hover:shadow-[#1976d2]/30 group-hover:scale-110 transition-all duration-300">
                  {s.icon}
                </div>
                <span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[#e3f2fd] text-[#1976d2] text-[10px] font-bold flex items-center justify-center border-2 border-white">
                  {s.n}
                </span>
              </div>
              <h3 className="text-base font-bold text-gray-900 mt-4 mb-1.5 group-hover:text-[#1976d2] transition-colors">{t(s.title)}</h3>
              <p className="text-sm text-gray-500 max-w-[200px] mx-auto leading-relaxed">{t(s.desc)}</p>
              {i < STEPS.length - 1 && (
                <div className="hidden md:block absolute top-7 left-[60%] w-[80%] h-px">
                  <div className="w-full h-full border-t-2 border-dashed border-[#bbdefb]" />
                </div>
              )}
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 5: QUICK START ═══════════════ */
const PROVS = ['openai', 'claude', 'gemini'];
const PROV_LABELS = { openai: 'OpenAI', claude: 'Claude', gemini: 'Gemini' };
const LANGS = ['curl', 'python', 'nodejs'];
const LANG_LABELS = { curl: 'cURL', python: 'Python', nodejs: 'Node.js' };
const SAMPLES = {
  openai: {
    curl: `curl https://api.turingtoken.ai/v1/chat/completions \\
  -H "Authorization: Bearer $OPENAI_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "gpt-4o",
    "messages": [{"role": "user", "content": "Hello!"}]
  }'`,
    python: `from openai import OpenAI

client = OpenAI(
    base_url="https://api.turingtoken.ai",
    api_key="sk-your-key"
)

response = client.chat.completions.create(
    model="gpt-4o",
    messages=[{"role": "user", "content": "Hello!"}]
)
print(response.choices[0].message.content)`,
    nodejs: `import OpenAI from "openai";

const client = new OpenAI({
  baseURL: "https://api.turingtoken.ai",
  apiKey: "sk-your-key",
});

const response = await client.chat.completions.create({
  model: "gpt-4o",
  messages: [{ role: "user", content: "Hello!" }],
});
console.log(response.choices[0].message.content);`,
  },
  claude: {
    curl: `curl https://api.turingtoken.ai/v1/messages \\
  -H "x-api-key: sk-your-key" \\
  -H "anthropic-version: 2023-06-01" \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "claude-sonnet-4-20250514",
    "max_tokens": 1024,
    "messages": [{"role": "user", "content": "Hello!"}]
  }'`,
    python: `import anthropic

client = anthropic.Anthropic(
    base_url="https://api.turingtoken.ai",
    api_key="sk-your-key"
)

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    messages=[{"role": "user", "content": "Hello!"}]
)
print(response.content[0].text)`,
    nodejs: `import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  baseURL: "https://api.turingtoken.ai",
  apiKey: "sk-your-key",
});

const response = await client.messages.create({
  model: "claude-sonnet-4-20250514",
  max_tokens: 1024,
  messages: [{ role: "user", content: "Hello!" }],
});
console.log(response.content[0].text);`,
  },
  gemini: {
    curl: `curl "https://api.turingtoken.ai/v1beta/models/gemini-2.0-flash:generateContent?key=sk-your-key" \\
  -H "Content-Type: application/json" \\
  -d '{
    "contents": [{"parts":[{"text": "Hello!"}]}]
  }'`,
    python: `import google.generativeai as genai

genai.configure(api_key="sk-your-key")
model = genai.GenerativeModel("gemini-2.0-flash")
response = model.generate_content("Hello!")
print(response.text)`,
    nodejs: `import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI("sk-your-key");
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
const result = await model.generateContent("Hello!");
console.log(result.response.text());`,
  },
};

function QuickStart() {
  const { t } = useTranslation();
  const [prov, setProv] = useState('openai');
  const [lang, setLang] = useState('curl');
  const [copied, setCopied] = useState(false);
  const code = SAMPLES[prov]?.[lang] || '';
  const copy = useCallback(() => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 1500); }, [code]);

  return (
    <section className="py-16 px-6 bg-[#f5f7fa]">
      <div className="max-w-[900px] mx-auto">
        <div className="text-center mb-10">
          <h2 className="text-2xl font-bold tracking-tight text-gray-900">{t('快速开始')}</h2>
        </div>
        <div className="rounded-lg border border-gray-200 bg-white shadow-sm overflow-hidden">
          <div className="flex items-center gap-1 px-3 pt-3 border-b border-gray-100">
            {PROVS.map(p => (
              <button key={p} onClick={() => setProv(p)} className={`px-4 py-2 rounded-t text-sm font-medium transition-all ${prov === p ? 'bg-[#1976d2] text-white' : 'text-gray-400 hover:text-gray-600'}`}>
                {PROV_LABELS[p]}
              </button>
            ))}
            <div className="flex-1" />
            <div className="flex items-center gap-3 pr-2">
              {LANGS.map(l => (
                <button key={l} onClick={() => setLang(l)} className={`text-xs font-mono pb-2 transition-all ${lang === l ? 'text-[#1976d2] font-semibold border-b-2 border-[#1976d2]' : 'text-gray-400 hover:text-gray-600'}`}>
                  {LANG_LABELS[l]}
                </button>
              ))}
              <button onClick={copy} className="p-1.5 rounded text-gray-400 hover:text-white hover:bg-[#1976d2] transition-all mb-2">
                {copied ? <Check size={13} className="text-emerald-400" /> : <Copy size={13} />}
              </button>
            </div>
          </div>
          <div className="bg-gradient-to-br from-[#0a1929] to-[#0d2137] p-5 border-t border-[#1976d2]/20">
            <pre className="font-mono text-[11px] leading-[1.9] text-[#90caf9] overflow-x-auto"><code>{code}</code></pre>
          </div>
        </div>
        <Link to="/pricing" className="group mt-5 flex items-center justify-between p-4 rounded-lg border border-gray-200 bg-white hover:border-[#1976d2]/30 hover:shadow-lg hover:shadow-[#1976d2]/5 transition-all">
          <div>
            <p className="text-xs font-mono text-[#1976d2] tracking-wider uppercase mb-1">Model Pricing</p>
            <p className="font-bold text-gray-900 group-hover:text-[#1976d2] transition-colors">{t('查看模型定价，了解完整列表')}</p>
          </div>
          <ArrowUpRight size={18} className="text-gray-400 group-hover:text-[#1976d2] transition-all" />
        </Link>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 6: CTA ═══════════════ */
function CTA() {
  const { t } = useTranslation();
  return (
    <section className="py-16 px-6 bg-white">
      <div className="max-w-[1000px] mx-auto">
        <div className="relative rounded-lg overflow-hidden bg-gradient-to-br from-[#0a1929] via-[#0d2137] to-[#132f4c]">
          <div className="absolute inset-0 opacity-[0.03]" style={{
            backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
            backgroundSize: '30px 30px',
          }} />
          <div className="absolute top-4 right-4">
            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-500/20 text-red-400 text-xs font-medium">
              <span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" />
              限时活动
            </span>
          </div>
          <div className="relative p-10 md:p-12 text-center">
            <span className="inline-block px-3 py-1 rounded-full bg-[#42a5f5]/20 text-[#42a5f5] text-xs font-medium tracking-wider mb-5">SPECIAL OFFER</span>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-3">{t('注册即送 ¥10 额度')}</h2>
            <p className="text-white/60 text-base mb-6 max-w-lg mx-auto leading-relaxed">{t('新用户注册即赠 ¥10 Token，7 天有效期。兼容 OpenAI / Claude / Gemini 协议，一个 API Key 调用所有主流模型。')}</p>
            <div className="flex items-center justify-center gap-4 mb-8 text-sm text-white/50">
              <span className="flex items-center gap-1.5">
                <Check size={14} className="text-emerald-400" />
                无需绑定信用卡
              </span>
              <span className="flex items-center gap-1.5">
                <Check size={14} className="text-emerald-400" />
                即开即用
              </span>
              <span className="flex items-center gap-1.5">
                <Check size={14} className="text-emerald-400" />
                按量计费
              </span>
            </div>
            <div className="flex flex-col sm:flex-row gap-3 justify-center">
              <Link to="/register" className="inline-flex items-center justify-center gap-2 px-8 py-3 bg-[#1976d2] text-white rounded font-medium hover:bg-[#1565c0] transition-all">
                {t('免费注册')} <ArrowRight size={16} />
              </Link>
              <Link to="/pricing" className="inline-flex items-center justify-center gap-2 px-8 py-3 text-white/70 rounded font-medium border border-white/20 hover:border-white/30 hover:text-white hover:bg-white/5 transition-all">
                {t('查看价格')}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 7: STATS ═══════════════ */
function Stats() {
  const { t } = useTranslation();
  const nav = useNavigate();
  return (
    <section className="py-14 bg-[#f5f7fa]">
      <div className="max-w-[1200px] mx-auto px-6">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {[
            { n: '80+', l: 'AI 模型', d: '覆盖主流模型' },
            { n: '40+', l: '供应商', d: '全球优质渠道' },
            { n: '99.9%', l: '可用率', d: '稳定可靠' },
            { n: '<100ms', l: '响应延迟', d: '极速响应' },
          ].map((s, i) => (
            <div key={i} className="text-center p-5 rounded-lg bg-white border border-gray-100">
              <div className="text-3xl font-bold text-[#1976d2] mb-1">{s.n}</div>
              <div className="text-sm font-medium text-gray-900 mb-0.5">{s.l}</div>
              <div className="text-xs text-gray-400">{s.d}</div>
            </div>
          ))}
        </div>
        <div className="text-center mt-8">
          <button onClick={() => nav('/pricing')} className="inline-flex items-center gap-2 px-5 py-2 rounded border border-gray-200 bg-white text-sm font-medium text-gray-600 hover:border-[#1976d2]/30 hover:text-[#1976d2] hover:shadow-md hover:shadow-[#1976d2]/5 transition-all">
            {t('查看全部模型')} <ArrowRight size={14} />
          </button>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 8: PRICING PREVIEW ═══════════════ */
const PRICING_MODELS = [
  { name: 'deepseek-V4', input: '¥0.014/1K', output: '¥0.056/1K' },
  { name: 'deepseek-v4-Flash', input: '¥0.0028/1K', output: '¥0.011/1K' },
  { name: 'MiniMax-M2.1', input: '¥0.014/1K', output: '¥0.056/1K' },
  { name: 'MiniMax-M2.5', input: '¥0.017/1K', output: '¥0.067/1K' },
];

function PricingPreview() {
  const { t } = useTranslation();
  const nav = useNavigate();
  return (
    <section className="py-14 bg-[#f5f7fa]">
      <div className="max-w-[1000px] mx-auto px-6">
        <div className="text-center mb-8">
          <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('透明定价')}</h2>
          <p className="text-gray-500 text-sm">按量计费，用多少付多少，无隐藏费用</p>
        </div>
        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
          <div className="grid grid-cols-4 bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-500">
            <div className="px-4 py-3">模型</div>
            <div className="px-4 py-3">输入价格</div>
            <div className="px-4 py-3">输出价格</div>
            <div className="px-4 py-3 text-right">操作</div>
          </div>
          {PRICING_MODELS.map((m, i) => (
            <div key={i} className={`grid grid-cols-4 text-sm ${i < PRICING_MODELS.length - 1 ? 'border-b border-gray-100' : ''}`}>
              <div className="px-4 py-3 font-medium text-gray-900">{m.name}</div>
              <div className="px-4 py-3 text-gray-600">{m.input}</div>
              <div className="px-4 py-3 text-gray-600">{m.output}</div>
              <div className="px-4 py-3 text-right">
                <button onClick={() => nav('/pricing')} className="text-[#1976d2] text-xs font-medium hover:underline">
                  查看详情
                </button>
              </div>
            </div>
          ))}
        </div>
        <div className="text-center mt-6">
          <button onClick={() => nav('/pricing')} className="inline-flex items-center gap-2 px-5 py-2 rounded border border-gray-200 bg-white text-sm font-medium text-gray-600 hover:border-[#1976d2]/30 hover:text-[#1976d2] hover:shadow-md hover:shadow-[#1976d2]/5 transition-all">
            {t('查看完整价格表')} <ArrowRight size={14} />
          </button>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 10: TESTIMONIALS ═══════════════ */
const TESTIMONIALS = [
  { name: '张工', role: 'AI 创业公司 CTO', content: '接入 TuringToken 后，我们无需逐一对接各家 API，开发效率提升了 3 倍。智能路由让我们的服务稳定性达到了 99.95%。' },
  { name: '李经理', role: '互联网大厂技术负责人', content: '统一计费功能非常实用，以前每个月要对账 5 家供应商，现在一个后台全搞定。成本降低了 20%。' },
  { name: '王同学', role: '独立开发者', content: '作为个人开发者，最看重的是按量计费和免费额度。TuringToken 让我能用上 GPT-4o 而不用担心账单。' },
];

function Testimonials() {
  const { t } = useTranslation();
  return (
    <section className="py-14 bg-white">
      <div className="max-w-[1200px] mx-auto px-6">
        <div className="text-center mb-8">
          <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('用户评价')}</h2>
          <p className="text-gray-500 text-sm">来自真实用户的声音</p>
        </div>
        <div className="grid md:grid-cols-3 gap-5">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="p-5 rounded-lg border border-gray-200 bg-white hover:shadow-lg hover:shadow-gray-100 transition-all">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-full bg-[#e3f2fd] text-[#1976d2] flex items-center justify-center font-bold text-sm">
                  {t.name.charAt(0)}
                </div>
                <div>
                  <div className="text-sm font-medium text-gray-900">{t.name}</div>
                  <div className="text-xs text-gray-400">{t.role}</div>
                </div>
              </div>
              <p className="text-sm text-gray-600 leading-relaxed">"{t.content}"</p>
              <div className="flex gap-0.5 mt-3">
                {[1,2,3,4,5].map(s => (
                  <svg key={s} className="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20">
                    <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
                  </svg>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 11: FAQ ═══════════════ */
const FAQS = [
  { q: '什么是 TuringToken？', a: 'TuringToken 是一个统一的 AI 网关平台，通过一个 API Key 即可调用 OpenAI、Claude、Gemini 等多家主流大模型，无需分别对接。' },
  { q: '如何开始使用？', a: '注册账号后，在控制台创建 API Key，将 Base URL 设置为 api.turingtoken.ai 即可。兼容现有 OpenAI SDK，无需修改代码。' },
  { q: '支持哪些模型？', a: '目前支持 80+ 模型，包括 GPT-4o、Claude 3.5 Sonnet、Gemini 1.5 Pro、DeepSeek V3、通义千问、智谱 GLM-4 等主流模型。' },
  { q: '计费方式是什么？', a: '按 Token 消耗量计费，用多少付多少。新用户注册即送 ¥10 额度，7 天有效期。无最低消费，无月费。' },
  { q: '数据安全如何保障？', a: '我们不存储任何请求和响应内容，所有数据仅用于实时转发。支持 HTTPS 加密传输，企业版可选私有部署。' },
];

function FAQ() {
  const { t } = useTranslation();
  const [openIdx, setOpenIdx] = useState(null);
  return (
    <section className="py-14 bg-[#f5f7fa]">
      <div className="max-w-[800px] mx-auto px-6">
        <div className="text-center mb-8">
          <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('常见问题')}</h2>
          <p className="text-gray-500 text-sm">如有其他问题，请联系 support@turingtoken.ai</p>
        </div>
        <div className="space-y-3">
          {FAQS.map((f, i) => (
            <div key={i} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
              <button
                onClick={() => setOpenIdx(openIdx === i ? null : i)}
                className="w-full flex items-center justify-between px-5 py-4 text-left"
              >
                <span className="text-sm font-medium text-gray-900">{f.q}</span>
                <ChevronRight size={16} className={`text-gray-400 transition-transform ${openIdx === i ? 'rotate-90' : ''}`} />
              </button>
              {openIdx === i && (
                <div className="px-5 pb-4">
                  <p className="text-sm text-gray-500 leading-relaxed">{f.a}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ SECTION: CONTACT US ═══════════════ */
function ContactUs() {
  const { t } = useTranslation();
  return (
    <section className="py-16 bg-[#f5f7fa]">
      <div className="max-w-[800px] mx-auto px-6 text-center">
        <h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('联系我们')}</h2>
        <p className="text-gray-500 text-sm mb-10">如有任何问题或合作需求，欢迎随时联系</p>
        <div className="grid md:grid-cols-3 gap-6">
          <div className="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-lg hover:shadow-gray-100 hover:border-[#1976d2]/20 transition-all group">
            <div className="w-12 h-12 rounded-xl bg-[#e3f2fd] flex items-center justify-center mx-auto mb-4 group-hover:bg-[#1976d2] group-hover:scale-110 transition-all">
              <svg className="w-6 h-6 text-[#1976d2] group-hover:text-white transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
            <h3 className="text-sm font-semibold text-gray-900 mb-1">{t('邮箱联系')}</h3>
            <p className="text-xs text-gray-500">support@turingtoken.com</p>
          </div>
          <div className="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-lg hover:shadow-gray-100 hover:border-[#1976d2]/20 transition-all group">
            <div className="w-12 h-12 rounded-xl bg-[#e3f2fd] flex items-center justify-center mx-auto mb-4 group-hover:bg-[#1976d2] group-hover:scale-110 transition-all">
              <svg className="w-6 h-6 text-[#1976d2] group-hover:text-white transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <h3 className="text-sm font-semibold text-gray-900 mb-1">{t('在线客服')}</h3>
            <p className="text-xs text-gray-500">工作日 9:00 - 18:00 在线</p>
          </div>
          <div className="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-lg hover:shadow-gray-100 hover:border-[#1976d2]/20 transition-all group">
            <div className="w-12 h-12 rounded-xl bg-[#e3f2fd] flex items-center justify-center mx-auto mb-4 group-hover:bg-[#1976d2] group-hover:scale-110 transition-all">
              <svg className="w-6 h-6 text-[#1976d2] group-hover:text-white transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>
            <h3 className="text-sm font-semibold text-gray-900 mb-1">{t('商务合作')}</h3>
            <p className="text-xs text-gray-500">business@turingtoken.com</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ FOOTER ═══════════════ */
function Footer() {
  const { t } = useTranslation();
  return (
    <footer className="bg-[#0a1929] border-t border-white/5">
      <div className="max-w-[1200px] mx-auto px-6 py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-10">
          <div>
            <div className="flex items-center gap-2.5 mb-4">
              <img src="/logo.jpg" alt="" className="w-6 h-6 rounded object-cover" />
              <span className="font-bold text-white text-sm">TuringToken</span>
            </div>
            <p className="text-xs text-white/30 leading-relaxed">统一 AI 网关，一个 API 连接所有主流大模型。</p>
          </div>
          <div>
            <h4 className="text-sm font-medium text-white mb-3">产品</h4>
            <div className="space-y-2">
              <Link to="/pricing" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('定价')}</Link>
              <Link to="/console" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('控制台')}</Link>
              <Link to="/benchmarks" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('模型评测')}</Link>
            </div>
          </div>
          <div>
            <h4 className="text-sm font-medium text-white mb-3">支持</h4>
            <div className="space-y-2">
              <Link to="/docs" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('文档')}</Link>
              <Link to="/about" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('关于我们')}</Link>
              <span className="block text-xs text-white/40">support@turingtoken.ai</span>
            </div>
          </div>
          <div>
            <h4 className="text-sm font-medium text-white mb-3">法律</h4>
            <div className="space-y-2">
              <span className="block text-xs text-white/40">服务协议</span>
              <span className="block text-xs text-white/40">隐私政策</span>
              <span className="block text-xs text-white/40">合规声明</span>
            </div>
          </div>
        </div>
        <div className="pt-6 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-3">
          <span className="text-xs text-white/20">&copy; 2026 {getSystemName()} All rights reserved.</span>
          <span className="text-xs text-white/20">Powered by QuantumNous</span>
        </div>
      </div>
    </footer>
  );
}

/* ═══════════════ EXPORT ═══════════════ */
const Home = () => (
  <div className="min-h-screen">
    <Hero />
    <Capabilities />
    <HowItWorks />
    <QuickStart />
    <Stats />
    <PricingPreview />
    <Testimonials />
    <FAQ />
    <CTA />
    <ContactUs />
    <Footer />
  </div>
);

export default Home;