// ===== page-home.jsx =====
const { useState: useSH, useEffect: useEH } = React;

function HomePage({ navigate }) {
  return (
    <div>
      <UrgencyBanner />
      <HeroSection navigate={navigate} />
      <PainPoints navigate={navigate} />
      <TrustStats />
      <Dimensions />
      <DetectionPrinciple />
      <ProcessFlow navigate={navigate} />
      <PriceCompare navigate={navigate} />
      <Pricing navigate={navigate} />
      <RewriteAssist />
      <Testimonials />
      <FaqSection />
      <DisclaimerStrip />
    </div>
  );
}

// ----- Pain points (3 cards) -----
function PainPoints({ navigate }) {
  const cards = [
    {
      icon: <I.Clock size={20} />,
      tag: '场景 · 01',
      title: '凌晨 3 点改完终稿',
      body: '明早 9 点要提交，导师说会查 AIGC。万一不过，重新写来不及。',
      cta: '立即自查一次',
      action: () => navigate('upload'),
    },
    {
      icon: <I.AlertTriangle size={20} />,
      tag: '场景 · 02',
      title: '上届师兄延毕的真实案例',
      body: '“我觉得自己写得挺自然的”——这是被打回前最常说的话。高校对 AI 生成文本的审查正在收紧。',
      cta: '提前避免',
      action: () => navigate('upload'),
    },
    {
      icon: <I.Wallet size={20} />,
      tag: '场景 · 03',
      title: '知网一次 ¥80，刷不起',
      body: '改一版查一次，本科论文至少改 3–5 版。我们 ¥4.9 / 次，让你随便自查，改到放心为止。',
      cta: '立即省钱',
      action: () => navigate('upload'),
    },
  ];
  return (
    <Section eyebrow="为什么学生会选择墨鉴" title="三个你可能正在面对的场景"
             subtitle="我们不贩卖焦虑，只是把毕业季那几个凌晨三点的隔壁宿舍场景重新讲一次。">
      <div className="grid md:grid-cols-3 gap-5">
        {cards.map((c, i) => (
          <Reveal key={i} delay={i * 80}>
            <Card className="p-7 h-full flex flex-col group hover:shadow-soft hover:-translate-y-0.5 transition-all">
              <div className="flex items-center justify-between">
                <div className="w-11 h-11 rounded-xl bg-navy-900 text-white flex items-center justify-center">{c.icon}</div>
                <span className="text-[10.5px] tracking-[0.18em] uppercase text-ink-400 font-semibold mono">{c.tag}</span>
              </div>
              <div className="mt-5 text-[19px] font-semibold text-navy-900 tracking-tight">{c.title}</div>
              <p className="mt-2 text-[13.5px] text-ink-500 leading-relaxed flex-1">{c.body}</p>
              <button onClick={c.action} className="mt-5 inline-flex items-center gap-1.5 text-[13.5px] font-medium text-brand-600 hover:text-brand-700 self-start group-hover:gap-2.5 transition-all">
                <I.ArrowRight size={14} />{c.cta}
              </button>
            </Card>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ----- Urgency banner (rotating messages, navy bg) -----
function UrgencyBanner() {
  const [i, setI] = useSH(0);
  useEH(() => {
    const id = setInterval(() => setI(v => (v + 1) % MOCK.URGENCY_BANNERS.length), 4500);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="bg-navy-950 text-white">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-8 h-11 flex items-center justify-center overflow-hidden">
        <div className="flex items-center gap-3">
          <span className="relative flex h-2 w-2">
            <span className="absolute inset-0 rounded-full bg-bad-500 opacity-70 animate-ping" />
            <span className="relative inline-flex rounded-full h-2 w-2 bg-bad-500" />
          </span>
          <div className="relative h-5 overflow-hidden text-[13px]" style={{ width: 'min(90vw, 720px)' }}>
            {MOCK.URGENCY_BANNERS.map((b, idx) => (
              <div key={idx}
                   className="absolute inset-0 flex items-center justify-center transition-all duration-500"
                   style={{
                     opacity: i === idx ? 1 : 0,
                     transform: i === idx ? 'translateY(0)' : (idx > i ? 'translateY(8px)' : 'translateY(-8px)'),
                   }}>
                <span className="whitespace-nowrap">{b}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ----- Detection Principle — text comparison + algorithm pipeline -----
function DetectionPrinciple() {
  const { human, ai } = MOCK.DETECTION_DEMO;

  // Render text with <mark>-style highlights for hinted phrases (no hover required).
  // Hints come from mock data; we render them as inline marks so the user
  // immediately *sees* what the engine looked at — anxious scanning is faster
  // when the visual evidence is already on screen.
  const renderHighlighted = (text, hints, tone) => {
    let segments = [{ text, hint: null }];
    hints.forEach(h => {
      const next = [];
      segments.forEach(s => {
        if (s.hint || !s.text.includes(h.phrase)) { next.push(s); return; }
        const idx = s.text.indexOf(h.phrase);
        if (idx > 0) next.push({ text: s.text.slice(0, idx), hint: null });
        next.push({ text: h.phrase, hint: h.tip });
        if (idx + h.phrase.length < s.text.length) next.push({ text: s.text.slice(idx + h.phrase.length), hint: null });
      });
      segments = next;
    });
    return segments.map((s, i) => s.hint ? (
      <mark key={i}
            className={`rounded-sm px-0.5 ${tone === 'ok' ? 'bg-ok-100 text-ok-700' : 'bg-warn-100 text-warn-700'}`}
            style={{ boxShadow: `inset 0 -2px 0 ${tone === 'ok' ? '#10B981' : '#F59E0B'}` }}
            title={s.hint}>
        {s.text}
      </mark>
    ) : <React.Fragment key={i}>{s.text}</React.Fragment>);
  };

  const Demo = ({ data, tone, label }) => {
    const accent = tone === 'ok' ? '#10B981' : '#EF4444';
    const bg     = tone === 'ok' ? 'bg-ok-50'  : 'bg-bad-50';
    const ring   = tone === 'ok' ? 'ring-ok-100' : 'ring-bad-100';
    const VerdictIcon = tone === 'ok' ? I.CheckCircle : I.AlertTriangle;
    return (
      <div className={`rounded-2xl p-5 ${bg} ring-1 ${ring} transition-all hover:shadow-soft`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="w-7 h-7 rounded-md bg-white text-navy-900 flex items-center justify-center ring-1 ring-ink-200">
              {tone === 'ok' ? <I.UserCheck size={14} /> : <I.Cpu size={14} />}
            </span>
            <div className="text-[12.5px] font-semibold text-navy-900">{label}</div>
          </div>
          <span className="inline-flex items-center gap-1.5 px-2 h-6 rounded-full text-[11px] font-semibold ring-1"
                style={{ color: accent, background: 'white', borderColor: accent }}>
            <VerdictIcon size={12} />
            判定 · {data.verdict}
          </span>
        </div>
        <p className="mt-4 text-[14px] text-ink-700 leading-[1.9]" style={{ textIndent: '2em' }}>
          {renderHighlighted(data.text, data.hints, tone)}
        </p>
        <div className="mt-4 grid grid-cols-3 gap-2">
          <Stat3 label="句长方差" value={data.burstiness.toFixed(1)} accent={accent} />
          <Stat3 label="困惑度"   value={data.perplexity}             accent={accent} />
          <Stat3 label="套话密度" value={data.cliche + '%'}            accent={accent} />
        </div>
      </div>
    );
  };

  return (
    <Section eyebrow="检测原理" title="我们如何识别 AI 生成内容"
             subtitle="以下是一段真实样例的拆解。所有信号均来自学术界已发表的语言模型检测研究，并针对中文学术写作进行了校准。">
      <div className="grid lg:grid-cols-12 gap-6">
        {/* Left: stacked text demos */}
        <div className="lg:col-span-7 space-y-4">
          <Demo data={human} tone="ok"  label="人类撰写" />
          <Demo data={ai}    tone="bad" label="AI 生成"   />
          <div className="text-[11.5px] text-ink-400 leading-relaxed pl-1">
            检测方法参考：Gehrmann et al. 2019 (GLTR)、Mitchell et al. 2023 (DetectGPT)、Vasilatos et al. 2023 等公开发表研究，
            并基于中文学术写作语料进行了适配训练。
          </div>
        </div>

        {/* Right: vertical pipeline */}
        <div className="lg:col-span-5">
          <Card className="p-6 sm:p-7 h-full">
            <div className="flex items-center justify-between">
              <div className="text-[11px] tracking-[0.18em] uppercase text-brand-600 font-semibold">算法流程</div>
              <Badge tone="ink" className="mono">PIPELINE v1.4</Badge>
            </div>
            <div className="mt-5 relative">
              {/* vertical gradient line */}
              <div className="absolute left-[18px] top-2 bottom-2 w-px"
                   style={{ background: 'linear-gradient(180deg, #0F1E3D 0%, #2563EB 100%)' }} />
              <ol className="space-y-4">
                {MOCK.PIPELINE_STEPS.map((s, i) => (
                  <Reveal key={s.step} delay={i * 70} as="li" className="relative pl-12 group rounded-lg -ml-2 p-2 transition-colors hover:bg-ink-50">
                    <span className="absolute left-2 top-3 w-9 h-9 rounded-full bg-navy-900 text-white flex items-center justify-center mono text-[11px] font-semibold ring-4 ring-white">
                      {s.step}
                    </span>
                    <div className="flex items-start justify-between gap-3">
                      <div className="text-[14px] font-semibold text-navy-900">{s.title}</div>
                      <span className="text-[10.5px] text-ink-400 mono whitespace-nowrap mt-1">{s.meta}</span>
                    </div>
                    <div className="mt-1 text-[12.5px] text-ink-500 leading-relaxed whitespace-pre-line">{s.desc}</div>
                  </Reveal>
                ))}
              </ol>
            </div>
          </Card>
        </div>
      </div>
    </Section>
  );
}

function Stat3({ label, value, accent }) {
  return (
    <div className="rounded-lg bg-white ring-1 ring-ink-200 p-2.5">
      <div className="text-[10.5px] uppercase tracking-wider text-ink-500 font-semibold">{label}</div>
      <div className="num mt-0.5 text-[18px] font-bold leading-none" style={{ color: accent }}>{value}</div>
    </div>
  );
}

// ----- Rewrite Assist (fake door) -----
function RewriteAssist() {
  const [openTier, setOpenTier] = useSH(null);
  const tiers = MOCK.REWRITE_TIERS;

  return (
    <>
      <Section eyebrow="检测之后 · 路线图" title="改写辅助 · 即将上线"
               subtitle="检测发现风险只是第一步。我们正在开发四种改写辅助工具，帮助你针对性地修订 AI 痕迹明显的段落。点击下方“加入候补”，上线后第一时间通知你。">
        <div className="grid sm:grid-cols-2 gap-5">
          {tiers.map((t, i) => {
            const Icon = I[t.icon] || I.FileText;
            return (
              <Reveal key={t.key} delay={i * 80}>
                <Card className={`p-7 h-full flex flex-col transition-all hover:shadow-soft hover:-translate-y-0.5 ${t.available ? 'ring-2 ring-navy-900' : ''}`}>
                  <div className="flex items-center justify-between gap-3">
                    <div className="w-11 h-11 rounded-xl bg-navy-900 text-white flex items-center justify-center"><Icon size={20} /></div>
                    <Badge tone={t.badge.tone}>{t.badge.label}</Badge>
                  </div>
                  <div className="mt-5 text-[19px] font-semibold text-navy-900 tracking-tight">{t.title}</div>
                  <p className="mt-2 text-[13.5px] text-ink-500 leading-relaxed flex-1">{t.desc}</p>
                  <div className="mt-4 flex flex-wrap gap-1.5">
                    {t.tags.map(tag => (
                      <span key={tag} className="inline-flex items-center px-2 h-6 rounded-full bg-ink-100 text-ink-700 text-[11.5px] font-medium">{tag}</span>
                    ))}
                  </div>
                  <div className="mt-6 pt-5 border-t border-ink-200">
                    <Button kind={t.available ? 'dark' : 'secondary'} size="md" onClick={() => setOpenTier(t)} iconRight={<I.ArrowRight size={14} />} className="w-full">{t.cta}</Button>
                  </div>
                </Card>
              </Reveal>
            );
          })}
        </div>

        <div className="mt-6 p-4 rounded-xl bg-ink-100 text-[12px] text-ink-500 leading-relaxed">
          <strong className="text-navy-900">说明：</strong>以上四项均为<strong>规划中</strong>功能，目前墨鉴仅提供 AIGC 检测服务本身。
          我们不开发也不推荐任何"绕过检测"的工具——改写辅助的目标是帮助你<strong className="text-navy-900">把 AI 生成的段落改回你自己的表达</strong>，而非把检测分数虚假地刷低。
        </div>
      </Section>

      <CandidateModal tier={openTier} onClose={() => setOpenTier(null)} />
    </>
  );
}

// ----- Candidate / Waitlist modal -----
function CandidateModal({ tier, onClose }) {
  const [email, setEmail] = useSH('');
  const [wechat, setWechat] = useSH('');
  const [scenario, setScenario] = useSH('');
  const [submitting, setSubmitting] = useSH(false);
  const [submitted, setSubmitted] = useSH(false);
  const [errorMsg, setErrorMsg] = useSH(null);

  useEH(() => {
    if (!tier) return;
    setEmail(''); setWechat(''); setScenario(''); setSubmitted(false); setSubmitting(false); setErrorMsg(null);
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [tier, onClose]);

  // After submitting, auto-close the modal 2s later
  useEH(() => {
    if (!submitted) return;
    const t = setTimeout(onClose, 2000);
    return () => clearTimeout(t);
  }, [submitted, onClose]);

  if (!tier) return null;

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email.trim() || submitting) return;
    setSubmitting(true);
    setErrorMsg(null);
    try {
      await window.API.joinWaitlist({
        tier: tier.key,
        email: email.trim(),
        wechat: wechat.trim() || undefined,
        scenario: scenario.trim() || undefined,
      });
      setSubmitted(true);
    } catch (err) {
      console.error('waitlist join failed', err);
      setErrorMsg(err?.message || '提交失败，请稍后重试');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 fade-up" style={{ background: 'rgba(15, 23, 42, 0.55)' }} onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-soft ring-1 ring-ink-200 w-full max-w-[480px] p-6 sm:p-7 relative" onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose} className="absolute top-3 right-3 w-8 h-8 rounded-md text-ink-400 hover:bg-ink-100 flex items-center justify-center"><I.X size={16} /></button>

        {!submitted ? (
          <>
            <div className="flex items-center gap-2">
              <Badge tone={tier.badge.tone}>{tier.badge.label}</Badge>
              <span className="text-[11px] text-ink-400 mono">tier · {tier.key}</span>
            </div>
            <h3 className="mt-3 text-[20px] font-bold text-navy-900 tracking-tight">加入候补名单</h3>
            <p className="mt-1 text-[13px] text-ink-500 leading-relaxed">
              你感兴趣的功能：<span className="text-navy-900 font-medium">{tier.title}</span>。上线后第一时间通知你，并提供首批 50% 折扣。
            </p>

            <form onSubmit={handleSubmit} className="mt-5 space-y-4">
              <div>
                <label className="text-[12px] font-medium text-ink-700">邮箱 <span className="text-bad-500">*</span></label>
                <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                       placeholder="your@email.com"
                       className="mt-1 w-full h-10 px-3 rounded-lg ring-1 ring-ink-200 bg-white text-[13.5px] focus:outline-none focus:ring-2 focus:ring-brand-500" />
              </div>
              <div>
                <label className="text-[12px] font-medium text-ink-700">微信号 <span className="text-ink-400">（选填）</span></label>
                <input type="text" value={wechat} onChange={(e) => setWechat(e.target.value)}
                       placeholder="便于发送 Prompt 包"
                       className="mt-1 w-full h-10 px-3 rounded-lg ring-1 ring-ink-200 bg-white text-[13.5px] focus:outline-none focus:ring-2 focus:ring-brand-500" />
              </div>
              <div>
                <label className="text-[12px] font-medium text-ink-700">你的使用场景？ <span className="text-ink-400">（选填）</span></label>
                <textarea rows="3" value={scenario} onChange={(e) => setScenario(e.target.value)}
                          placeholder="如：本科毕业论文 / 研究生论文 / 期刊投稿 ..."
                          className="mt-1 w-full px-3 py-2 rounded-lg ring-1 ring-ink-200 bg-white text-[13.5px] focus:outline-none focus:ring-2 focus:ring-brand-500 resize-none" />
              </div>
              <Button kind="dark" size="lg" type="submit" disabled={submitting}
                      icon={submitting ? <I.Spinner size={14} /> : null}
                      iconRight={!submitting ? <I.ArrowRight size={14} /> : null}
                      className="w-full">
                {submitting ? '提交中 ...' : '加入候补名单'}
              </Button>
              {errorMsg && (
                <div className="text-[11.5px] text-bad-600 text-center bg-bad-50 ring-1 ring-bad-100 rounded-md p-2">
                  {errorMsg}
                </div>
              )}
              <p className="text-[11px] text-ink-400 text-center">提交即同意我们以邮件 / 微信方式联系你 · 不会用于其他用途</p>
            </form>
          </>
        ) : (
          <div className="text-center py-6">
            <div className="w-14 h-14 mx-auto rounded-full bg-ok-500 text-white flex items-center justify-center"><I.Check size={26} /></div>
            <h3 className="mt-4 text-[20px] font-bold text-navy-900 tracking-tight">已加入候补名单 ✓</h3>
            <p className="mt-2 text-[13.5px] text-ink-500 leading-relaxed">我们会在上线后 24h 内通过 <span className="text-navy-900 font-medium">{email}</span> 通知你，并提供首批 50% 折扣。</p>
            <div className="mt-4 text-[11px] text-ink-400">2 秒后自动关闭</div>
          </div>
        )}
      </div>
    </div>
  );
}

// ----- Price compare bars -----
function PriceCompare({ navigate }) {
  const max = Math.max(...MOCK.PRICE_COMPARE.map(p => p.price));
  return (
    <Section eyebrow="价格对比" title="同样的自查需求，价格差出 16 倍"
             subtitle="我们专注于 AIGC 概率检测，不做重复率检测，所以可以做得很便宜。改多少版都不心疼。">
      <Card className="p-7 sm:p-9">
        <div className="space-y-5">
          {MOCK.PRICE_COMPARE.map((p, i) => {
            const w = (p.price / max) * 100;
            const isOurs = p.ours;
            return (
              <Reveal key={p.name} delay={i * 90}>
                <div className="grid grid-cols-[150px_1fr_120px] md:grid-cols-[200px_1fr_160px] items-center gap-4">
                  <div className="min-w-0">
                    <div className={`text-[14.5px] font-semibold ${isOurs ? 'text-navy-900' : 'text-ink-700'} truncate`}>{p.name}</div>
                    <div className="text-[11.5px] text-ink-400 mt-0.5 truncate">{p.desc}</div>
                  </div>
                  <div className="relative h-10 rounded-lg overflow-hidden bg-ink-50">
                    <div className={`absolute inset-y-0 left-0 rounded-lg ${isOurs ? 'bg-brand-600' : 'bg-ink-300'}`}
                         style={{ width: `${w}%`, transition: `width 1.1s cubic-bezier(.22,.61,.36,1) ${i * 120}ms` }} />
                    {isOurs && (
                      <span className="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-white tracking-[0.18em] uppercase">Mojian</span>
                    )}
                  </div>
                  <div className="text-right">
                    <span className="num font-bold tracking-tight" style={{ fontSize: isOurs ? '40px' : '22px', color: isOurs ? '#2563EB' : '#0F172A', lineHeight: 1 }}>
                      <span className="text-ink-400 text-[14px] font-medium mr-0.5">¥</span>{p.price}
                    </span>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>

        <div className="mt-7 pt-6 border-t border-ink-200 flex flex-wrap items-center justify-between gap-4">
          <div className="text-[12.5px] text-ink-500 max-w-xl leading-relaxed">
            <strong className="text-navy-900">说明：</strong>上表中的第三方价格为市场常见路边价，仅侜参考，以各平台实际报价为准。各平台检测维度不同，不能直接取代官方查重。
          </div>
          <Button kind="primary" size="md" onClick={() => navigate('upload')} iconRight={<I.ArrowRight size={14} />}>以 ¥4.9 起检测</Button>
        </div>
      </Card>
    </Section>
  );
}

// ----- Hero -----
function HeroSection({ navigate }) {
  return (
    <section className="relative overflow-hidden bg-white">
      <div className="absolute inset-0 grid-bg opacity-60 pointer-events-none" />
      <div className="absolute -top-40 -right-40 w-[680px] h-[680px] rounded-full bg-brand-50 blur-3xl opacity-50 pointer-events-none" />
      <div className="relative max-w-[1200px] mx-auto px-6 lg:px-8 pt-20 pb-24 grid lg:grid-cols-12 gap-12 items-center">
        <div className="lg:col-span-7">
          <div className="inline-flex items-center gap-2 h-7 px-3 rounded-full bg-navy-900/[0.04] ring-1 ring-navy-900/10 text-[12.5px] text-navy-900">
            <span className="w-1.5 h-1.5 rounded-full bg-ok-500 pulse-dot" />
            学术写作 · AI 智能鉴定
          </div>
          <h1 className="mt-6 text-[42px] sm:text-[56px] leading-[1.04] font-bold text-navy-900 tracking-tight" style={{ textWrap: 'balance' }}>
            论文 AIGC 率超标，
            <br />
            <span className="text-bad-500">可能让你延毕。</span>
          </h1>
          <p className="mt-6 text-[16.5px] text-ink-500 leading-relaxed max-w-xl">
            <span className="text-navy-900 font-semibold">30 秒帮你提前发现风险</span> · 知网检测 ¥80 一次，我们 <span className="text-navy-900 font-semibold">¥4.9 / 次</span> 自查。基于困惑度 (Perplexity) 与突发性 (Burstiness) 多维度统计模型，覆盖 ChatGPT / Claude / DeepSeek / 文心 / 通义。
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-3">
            <Button size="lg" onClick={() => navigate('upload')} iconRight={<I.ArrowRight size={16} />}>立即检测</Button>
            <Button kind="secondary" size="lg" onClick={() => navigate('report', { id: 'r-1085' })} icon={<I.Eye size={16} />}>查看示例报告</Button>
            <div className="hidden sm:flex items-center gap-2 text-[13px] text-ink-500 ml-2">
              <I.ShieldCheck size={14} className="text-ok-600" />
              检测完成后 24 小时内自动删除
            </div>
          </div>
          <div className="mt-10 flex items-center gap-8 text-[12.5px] text-ink-500">
            <div className="flex items-center gap-2"><I.Cpu size={14} /> 5 维度统计模型</div>
            <div className="flex items-center gap-2"><I.Layers size={14} /> 8 大模型指纹</div>
            <div className="flex items-center gap-2"><I.Clock size={14} /> 平均 23s 出报告</div>
          </div>
        </div>

        <div className="lg:col-span-5">
          <Card className="p-5 sm:p-6 shadow-soft">
            <div className="flex items-center justify-between mb-2">
              <div className="flex items-center gap-2">
                <div className="w-7 h-7 rounded-md bg-navy-900 text-white flex items-center justify-center"><I.Activity size={14} /></div>
                <div className="text-[13px] font-semibold text-navy-900">检测引擎 · 概率分布</div>
              </div>
              <Badge tone="ok"><span className="w-1.5 h-1.5 rounded-full bg-ok-500" />运行中</Badge>
            </div>
            <div className="flex items-center gap-2 mb-3 px-2.5 py-1.5 rounded-lg bg-ink-50 ring-1 ring-ink-200">
              <I.Activity size={12} className="text-bad-500" />
              <div className="text-[11.5px] text-ink-500">实时检测中 · <span className="num font-semibold text-navy-900"><AnimatedNumber value={1247} /></span> 篇论文</div>
              <span className="ml-auto inline-flex items-center gap-1 text-[10.5px] text-ok-600"><span className="w-1.5 h-1.5 rounded-full bg-ok-500 pulse-dot" />LIVE</span>
            </div>
            <HeroViz />
            <div className="mt-2 grid grid-cols-3 gap-2 pt-4 border-t border-ink-200">
              <Stat label="样本句数" value="1,247" />
              <Stat label="信号置信" value="0.92" mono />
              <Stat label="模型匹配" value="GPT-4 · 72%" small />
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
}

function Stat({ label, value, mono, small }) {
  return (
    <div>
      <div className="text-[10.5px] tracking-[0.18em] uppercase text-ink-400">{label}</div>
      <div className={`num mt-0.5 font-semibold text-navy-900 ${small ? 'text-[13px]' : 'text-[17px]'} ${mono ? 'mono' : ''}`}>{value}</div>
    </div>
  );
}

// ----- Trust stats -----
function TrustStats() {
  return (
    <section className="border-y border-ink-200 bg-ink-50">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-8 py-14 grid grid-cols-2 lg:grid-cols-4 gap-6">
        {MOCK.STATS_HERO.map((s, i) => (
          <Reveal key={s.label} delay={i * 80} className="">
            <div className="text-[12.5px] text-ink-500 mb-2 tracking-wide">{s.label}</div>
            <div className="text-[40px] sm:text-[44px] font-bold text-navy-900 leading-none tracking-tight">
              <AnimatedNumber value={s.value} decimals={s.value % 1 !== 0 ? 1 : 0} />
              <span className="text-[15px] font-medium text-ink-500 align-baseline ml-1">{s.suffix}</span>
            </div>
            <div className="mt-3 h-0.5 w-12 bg-navy-900/15" />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ----- Dimensions -----
function Dimensions() {
  const dimensionCards = [
    { icon: <I.Activity size={20} />,  title: '困惑度分析', en: 'Perplexity',   desc: '评估文本对统计语言模型的可预测程度，AI 生成文本的困惑度通常显著偏低，呈现"过于流畅"的统计特征。' },
    { icon: <I.BarChart size={20} />,  title: '突发性检测', en: 'Burstiness',   desc: '分析句长、复杂度与信息密度的方差。人类写作起伏更大，AI 输出更平稳——这是关键判别信号。' },
    { icon: <I.FileText size={20} />,  title: '套话密度识别', en: 'Boilerplate', desc: '检测"综上所述"、"值得注意的是"、"全方位多层次"等 AI 高频过渡词与四字短语的密度。' },
    { icon: <I.Layers size={20} />,    title: '句式规律性', en: 'Regularity',   desc: '评估段落结构、句法骨架是否过于工整。识别 AI 模板化输出与排比型表达的痕迹。' },
  ];
  return (
    <Section id="product" eyebrow="检测引擎" title="多维度学术级分析引擎"
             subtitle="所有维度均基于公开发表的语言学与统计学研究，并针对中文学术写作场景进行了校准。报告中所有指标可单独溯源。">
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        {dimensionCards.map((d, i) => (
          <Reveal key={d.title} delay={i * 70}>
            <Card className="p-6 h-full hover:shadow-soft hover:-translate-y-0.5 transition-all">
              <div className="w-10 h-10 rounded-lg bg-navy-900 text-white flex items-center justify-center">{d.icon}</div>
              <div className="mt-5">
                <div className="text-[10.5px] tracking-[0.18em] uppercase text-brand-600 font-semibold">{d.en}</div>
                <div className="mt-1 text-[18px] font-semibold text-navy-900">{d.title}</div>
              </div>
              <p className="mt-3 text-[13.5px] text-ink-500 leading-relaxed">{d.desc}</p>
            </Card>
          </Reveal>
        ))}
      </div>

      {/* Sub-row: model coverage */}
      <div className="mt-10">
        <Card className="p-6 sm:p-7">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div>
              <div className="text-[10.5px] tracking-[0.18em] uppercase text-brand-600 font-semibold">MODEL COVERAGE</div>
              <div className="mt-1 text-[18px] font-semibold text-navy-900">已覆盖 8 大主流大语言模型指纹</div>
            </div>
            <Badge tone="brand"><I.Sparkles size={12} /> 模型库持续更新</Badge>
          </div>
          <div className="mt-5 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
            {['GPT-4', 'GPT-4o', 'Claude 3', 'Claude Sonnet', 'DeepSeek', '文心一言', '通义千问', '豆包'].map((m, i) => (
              <div key={m} className="h-12 rounded-lg ring-1 ring-ink-200 bg-ink-50/60 flex items-center justify-center text-[13px] font-medium text-ink-700">{m}</div>
            ))}
          </div>
        </Card>
      </div>
    </Section>
  );
}

// ----- Process flow -----
function ProcessFlow({ navigate }) {
  const steps = [
    { icon: <I.Upload size={22} />, title: '上传论文', desc: '支持 .docx / .pdf / .txt 格式，单文件不超过 10MB。无需注册即可上传。' },
    { icon: <I.Cpu    size={22} />, title: '智能分析', desc: 'LLM 多维度评分 + 段落级建模，30 秒内完成。上传文件 24 小时内自动删除。' },
    { icon: <I.FileText size={22} />, title: '获取报告', desc: '整体 AIGC 概率 + 段落标记 + 模型指纹 + 改写建议。支持 PDF 下载。' },
  ];
  return (
    <Section eyebrow="使用流程" title="三步完成一次专业自查">
      <div className="grid md:grid-cols-3 gap-5 relative">
        {/* dashed connectors */}
        <div className="hidden md:block absolute top-12 left-[16.6%] right-[16.6%] h-px border-t border-dashed border-ink-300" />
        {steps.map((s, i) => (
          <Reveal key={s.title} delay={i * 100}>
            <Card className="p-7 relative">
              <div className="flex items-center justify-between">
                <div className="w-12 h-12 rounded-xl bg-brand-50 text-brand-600 flex items-center justify-center ring-1 ring-brand-100">{s.icon}</div>
                <div className="num text-[44px] font-bold text-ink-100 leading-none">0{i+1}</div>
              </div>
              <div className="mt-5 text-[19px] font-semibold text-navy-900">{s.title}</div>
              <p className="mt-2 text-[13.5px] text-ink-500 leading-relaxed">{s.desc}</p>
            </Card>
          </Reveal>
        ))}
      </div>
      <div className="mt-10 text-center">
        <Button size="lg" onClick={() => navigate('upload')} iconRight={<I.ArrowRight size={16} />}>立即上传论文</Button>
      </div>
    </Section>
  );
}

// ----- Pricing -----
function Pricing({ navigate }) {
  const plans = [
    {
      name: '标准版', price: '4.9', words: '≤ 30,000 字',
      features: ['完整 AIGC 概率分析', '段落级风险标记', '模型指纹匹配', 'PDF 报告下载', '24 小时内自动删除文件'],
      cta: '选择标准版',
    },
    {
      name: '完整版', price: '9.9', words: '≤ 100,000 字', recommended: true,
      features: ['标准版全部功能', '优先处理通道', '可对同一文件 30 天无限次复检', '多版本结果对照', '专属客服邮箱响应'],
      cta: '选择完整版',
    },
  ];
  return (
    <Section id="pricing" eyebrow="定价方案" title="按字数计费，无任何隐藏费用"
             subtitle="所有方案均提供完整报告。完整版增加优先通道与多次复检，适合反复改稿场景。">
      <div className="grid md:grid-cols-2 gap-5">
        {plans.map((p) => (
          <Card key={p.name} className={`p-7 sm:p-8 relative ${p.recommended ? 'ring-2 ring-navy-900 shadow-soft' : ''}`}>
            {p.recommended && <div className="absolute -top-3 left-7"><Badge tone="navy">推荐 · 多数毕业生选择</Badge></div>}
            <div className="flex items-baseline justify-between">
              <div className="text-[20px] font-semibold text-navy-900">{p.name}</div>
              <div className="text-[12.5px] text-ink-500 tnum">{p.words}</div>
            </div>
            <div className="mt-5 flex items-baseline gap-1">
              <span className="text-[18px] text-ink-500 font-medium">¥</span>
              <span className="num text-[56px] font-bold text-navy-900 leading-none tracking-tight">{p.price}</span>
              <span className="text-[14px] text-ink-500 ml-2">/ 次检测</span>
            </div>
            <ul className="mt-6 space-y-3">
              {p.features.map(f => (
                <li key={f} className="flex items-start gap-2.5 text-[14px] text-ink-700">
                  <I.Check size={16} className={`mt-0.5 ${p.recommended ? 'text-navy-900' : 'text-ok-600'}`} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <Button
              size="lg" className="w-full mt-7"
              kind={p.recommended ? 'dark' : 'secondary'}
              onClick={() => navigate('upload')}
              iconRight={<I.ArrowRight size={16} />}>
              {p.cta}
            </Button>
          </Card>
        ))}
      </div>
      <div className="mt-6 text-center text-[13px] text-ink-500">
        <button onClick={() => navigate('trial')} className="inline-flex items-center gap-1.5 px-3 h-8 rounded-full bg-ink-50 ring-1 ring-ink-200 text-ink-700 hover:bg-ink-100">
          <I.Sparkles size={12} className="text-brand-600" />
          免费试用 1000 字 · 无需注册 · 体验段落级标记
          <I.ArrowRight size={12} className="text-ink-400" />
        </button>
      </div>
    </Section>
  );
}

// ----- Testimonials -----
function Testimonials() {
  return (
    <Section eyebrow="用户反馈" title="毕业季同行的真实使用记录"
             subtitle="下面是近期用户反馈，未隐去学校名称，但涵盖部分个人信息。">
      <div className="grid md:grid-cols-3 gap-5">
        {MOCK.TESTIMONIALS.map((t, i) => (
          <Reveal key={i} delay={i * 80}>
            <Card className="p-7 h-full flex flex-col">
              <div className="flex items-center justify-between">
                <I.Quote size={22} className="text-brand-600 opacity-40" />
                <span className="text-[11px] text-ink-400 num">{t.ago}</span>
              </div>
              <p className="mt-4 text-[14.5px] text-ink-700 leading-relaxed flex-1">“{t.quote}”</p>
              <div className="mt-6 flex items-center gap-3 pt-5 border-t border-ink-200">
                <div className="w-9 h-9 rounded-full bg-navy-900 text-white flex items-center justify-center text-[13px] font-semibold">{t.name[0]}</div>
                <div className="flex-1 min-w-0">
                  <div className="text-[13.5px] font-semibold text-navy-900">{t.name}</div>
                  <div className="text-[11.5px] text-ink-500 truncate">{t.school}</div>
                </div>
                <span className="text-[10.5px] text-ink-400 num">{t.date}</span>
              </div>
            </Card>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ----- FAQ -----
function FaqSection() {
  const [open, setOpen] = useSH(0);
  return (
    <Section id="faq" eyebrow="常见问题" title="关于检测的几个澄清">
      <div className="grid lg:grid-cols-12 gap-10">
        <div className="lg:col-span-4">
          <p className="text-[14px] text-ink-500 leading-relaxed">
            我们鼓励将 AIGC 检测视为<span className="text-navy-900 font-medium">写作质量的体检工具</span>，而非最终鉴定。
            报告中的所有维度都附带了原文段落与解释，便于你判断"哪些是真的需要改"。
          </p>
          <div className="mt-6 flex items-start gap-3 p-4 rounded-xl bg-warn-50 ring-1 ring-warn-100">
            <I.Info size={16} className="text-warn-600 mt-0.5 flex-shrink-0" />
            <div className="text-[12.5px] text-warn-600 leading-relaxed">
              <strong className="font-semibold">参考性指标声明：</strong>检测结果仅供作者自查改进使用，不构成最终学术鉴定。请以所在机构官方查重系统结果为准。
            </div>
          </div>
        </div>
        <div className="lg:col-span-8 divide-y divide-ink-200 border-y border-ink-200">
          {MOCK.FAQ.map((f, i) => (
            <div key={i}>
              <button onClick={() => setOpen(open === i ? -1 : i)} className="w-full py-5 flex items-center justify-between gap-4 text-left">
                <span className="text-[15px] font-medium text-navy-900">{f.q}</span>
                <I.ChevronDown size={18} className={`text-ink-500 transition-transform ${open === i ? 'rotate-180' : ''}`} />
              </button>
              <div className="overflow-hidden transition-[max-height,opacity] duration-300" style={{ maxHeight: open === i ? 200 : 0, opacity: open === i ? 1 : 0 }}>
                <p className="pb-5 text-[14px] text-ink-500 leading-relaxed pr-8">{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ----- Disclaimer strip (above footer) -----
function DisclaimerStrip() {
  return (
    <section className="bg-navy-950 text-white">
      <div className="max-w-[1200px] mx-auto px-6 lg:px-8 py-12 grid md:grid-cols-12 gap-6 items-center">
        <div className="md:col-span-2">
          <I.ShieldCheck size={36} className="text-brand-500" />
        </div>
        <div className="md:col-span-7">
          <div className="text-[12px] tracking-[0.18em] uppercase text-brand-500 font-semibold mb-1">重要声明</div>
          <h3 className="text-[20px] font-semibold tracking-tight">本平台提供学术写作辅助参考</h3>
          <p className="mt-2 text-[13.5px] text-ink-300 leading-relaxed">
            检测结果仅供作者自查改进使用，不构成最终学术鉴定。请以所在机构官方查重系统结果为准。
            本平台不保留用户论文原文，所有上传文件在检测完成 24 小时内自动从服务器删除。
          </p>
        </div>
        <div className="md:col-span-3 md:text-right">
          <Button kind="primary" size="md" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>返回顶部</Button>
        </div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;
