// Claimmee 落地页 — 机会感 hero + 赔偿估算器钩子 + 三步 + 档位 + 费用预览 + FAQ。
const { Button, TrustChip, Panel, Badge, Disclaimer } = window.ClaimmeeDesignSystem_e4fda8;
const Mkt = window.ClaimmeeMkt;

function useCountUp(target, ms = 600) {
  const [val, setVal] = React.useState(target);
  const prev = React.useRef(target);
  React.useEffect(() => {
    const from = prev.current, to = target, start = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / ms);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(from + (to - from) * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
      else prev.current = to;
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, ms]);
  return val;
}

// 挂载淡入（transition 落定在可见态——截图/验证安全，且真实浏览器中平滑）
function Reveal({ children, delay = 0, style = {} }) {
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setOn(true), 20 + delay);
    return () => clearTimeout(t);
  }, [delay]);
  return (
    <div style={{ ...style, opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(16px)', transition: 'opacity .5s var(--ease-out), transform .5s var(--ease-out)' }}>
      {children}
    </div>
  );
}

function Selectish({ value, onChange, children }) {
  return (
    <select value={value} onChange={onChange} style={{
      width: '100%', border: '1px solid rgba(255,255,255,0.28)', borderRadius: 'var(--radius-md)',
      padding: '0.8rem 0.9rem', background: 'rgba(255,255,255,0.12)', color: '#fff', fontFamily: 'var(--font-sans)',
      fontWeight: 700, fontSize: '1rem', appearance: 'none', cursor: 'pointer', minHeight: 'var(--tap-min)',
    }}>{children}</select>
  );
}

function Calculator() {
  const [from, setFrom] = React.useState('PVG');
  const [to, setTo] = React.useState('LHR');
  const [disruption, setDisruption] = React.useState('delay');
  const [delay, setDelay] = React.useState(240);
  const res = Mkt.assess({ from, to, disruption, delayMin: delay, extraordinary: false });
  const amount = useCountUp(res.amount);
  const eligible = res.status !== 'not_eligible';

  const go = () => {
    window.ClaimmeeMkt._prefill = { from, to, disruption, delayMin: delay };
    window.ClaimmeeNav && window.ClaimmeeNav('funnel');
  };

  const lblStyle = { display: 'block', color: 'var(--teal-100)', fontWeight: 700, fontSize: '0.82rem', marginBottom: 6 };

  return (
    <div style={{
      background: 'rgba(255,255,255,0.10)', border: '1px solid rgba(255,255,255,0.20)', borderRadius: 'var(--radius-2xl)',
      padding: 22, boxShadow: '0 24px 70px rgba(7,59,58,0.45)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 14 }}>
        <span style={{ color: '#fff', fontWeight: 800, fontSize: '1.05rem' }}>免费估算你能拿回多少</span>
        <span style={{ color: 'var(--teal-100)', fontSize: '0.76rem', fontWeight: 700, letterSpacing: '0.08em' }}>无需证件</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div><label style={lblStyle}>出发城市</label>
          <Selectish value={from} onChange={(e) => setFrom(e.target.value)}>
            {Mkt.CN.map((c) => <option key={c} value={c}>{Mkt.CITIES[c].city} {c}</option>)}
          </Selectish>
        </div>
        <div><label style={lblStyle}>到达城市</label>
          <Selectish value={to} onChange={(e) => setTo(e.target.value)}>
            {Mkt.EU.map((c) => <option key={c} value={c}>{Mkt.CITIES[c].city} {c}</option>)}
          </Selectish>
        </div>
      </div>
      <div style={{ marginTop: 12 }}><label style={lblStyle}>遇到的问题</label>
        <div style={{ display: 'flex', gap: 8 }}>
          {Mkt.DISRUPTIONS.map((d) => (
            <button key={d.key} onClick={() => setDisruption(d.key)} style={{
              flex: 1, padding: '0.6rem 0.4rem', borderRadius: 'var(--radius-pill)', cursor: 'pointer',
              border: disruption === d.key ? '0' : '1px solid rgba(255,255,255,0.28)',
              background: disruption === d.key ? 'var(--amber-500)' : 'rgba(255,255,255,0.08)',
              color: disruption === d.key ? 'var(--amber-ink)' : '#fff', fontWeight: 800, fontSize: '0.85rem',
              fontFamily: 'var(--font-sans)', transition: 'all var(--dur-base) var(--ease-out)',
            }}>{d.label}</button>
          ))}
        </div>
      </div>
      {disruption === 'delay' && (
        <div style={{ marginTop: 14 }}>
          <label style={lblStyle}>到达延误时长 · <strong style={{ color: '#fff' }}>{(delay / 60).toFixed(1)} 小时</strong></label>
          <input type="range" min="0" max="600" step="30" value={delay} onChange={(e) => setDelay(Number(e.target.value))}
            style={{ width: '100%', accentColor: 'var(--amber-500)' }} />
        </div>
      )}
      <div style={{ marginTop: 18, borderRadius: 'var(--radius-xl)', padding: '18px 20px', background: eligible ? 'linear-gradient(135deg, rgba(245,158,11,0.22), rgba(13,148,136,0.18))' : 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)' }}>
        <div style={{ color: 'var(--teal-100)', fontSize: '0.82rem', fontWeight: 700 }}>{eligible ? '预计可拿回' : '当前条件暂不符合'}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 4 }}>
          <span style={{ color: '#fff', fontSize: '2.6rem', fontWeight: 950, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>€{amount}</span>
          {eligible && <span style={{ color: 'var(--teal-100)', fontWeight: 700, fontSize: '0.85rem' }}>每位乘客</span>}
        </div>
      </div>
      <button onClick={go} style={{
        width: '100%', marginTop: 14, border: 0, borderRadius: 'var(--radius-pill)', padding: '1rem',
        background: 'var(--amber-500)', color: 'var(--amber-ink)', fontWeight: 900, fontSize: '1.05rem',
        fontFamily: 'var(--font-sans)', cursor: 'pointer', boxShadow: 'var(--shadow-amber)', minHeight: 'var(--tap-min)',
      }}>免费进入 3 分钟初筛 →</button>
      <p style={{ margin: '10px 0 0', color: 'var(--teal-100)', fontSize: '0.74rem', textAlign: 'center', opacity: 0.85 }}>仅为合成估算 · 非法律建议 · 不成功不收费</p>
    </div>
  );
}

function SectionTitle({ eyebrow, title, sub }) {
  return (
    <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 36px' }}>
      {eyebrow && <div style={{ color: 'var(--teal-700)', fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10 }}>{eyebrow}</div>}
      <h2 style={{ margin: 0, fontSize: 'clamp(1.8rem, 3.5vw, 2.6rem)', fontWeight: 900, color: 'var(--slate-900)', letterSpacing: '-0.03em', lineHeight: 1.1 }}>{title}</h2>
      {sub && <p style={{ margin: '14px 0 0', color: 'var(--text-muted)', fontSize: '1.05rem', lineHeight: 1.6 }}>{sub}</p>}
    </div>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--border-subtle)' }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
        background: 'transparent', border: 0, padding: '20px 4px', cursor: 'pointer', textAlign: 'left',
        fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: '1.05rem', color: 'var(--slate-900)',
      }}>
        <span>{q}</span>
        <span style={{ flex: '0 0 auto', width: 26, height: 26, display: 'grid', placeItems: 'center', borderRadius: '50%', background: 'var(--teal-100)', color: 'var(--teal-700)', fontWeight: 900, transform: open ? 'rotate(45deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-out)' }}>+</span>
      </button>
      <div style={{ maxHeight: open ? 240 : 0, overflow: 'hidden', transition: 'max-height var(--dur-slow) var(--ease-out)' }}>
        <p style={{ margin: '0 4px 20px', color: 'var(--text-body)', lineHeight: 1.7 }}>{a}</p>
      </div>
    </div>
  );
}

function Landing() {
  const wrap = { width: 'min(1120px, calc(100vw - 32px))', margin: '0 auto' };
  return (
    <div>
      {/* HERO */}
      <section style={{ background: 'var(--grad-hero)', paddingBottom: 64 }}>
        <div style={{ ...wrap, paddingTop: 56, display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,0.95fr)', gap: 48, alignItems: 'center' }} className="hero-grid">
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.25)', color: '#fff', fontWeight: 700, fontSize: '0.8rem' }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--amber-500)' }} />中文优先 · EC261/2004
            </div>
            <h1 style={{ margin: '20px 0 0', color: '#fff', fontSize: 'clamp(2.4rem, 5vw, 4rem)', fontWeight: 950, lineHeight: 0.98, letterSpacing: '-0.04em' }}>
              你的欧洲航班，<br />可能有一笔<br /><span style={{ color: 'var(--amber-500)' }}>€600 在等你领回</span>
            </h1>
            <p style={{ margin: '22px 0 0', color: 'var(--text-on-teal)', fontSize: '1.15rem', lineHeight: 1.7, maxWidth: 480 }}>
              欧洲航班延误、取消或被拒载？用中文 3 分钟判断能否索赔。不上传证件、不成功不收费，首单免佣金。
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 28 }}>
              <TrustChip tone="glass">不成功不收费</TrustChip>
              <TrustChip tone="glass">首单免佣金</TrustChip>
              <TrustChip tone="glass">全中文服务</TrustChip>
              <TrustChip tone="glass">GDPR 合规</TrustChip>
            </div>
          </div>
          <Calculator />
        </div>
      </section>

      {/* 中断分段 */}
      <section style={{ ...wrap, paddingTop: 72 }}>
        <SectionTitle eyebrow="先选你遇到的情况" title="哪种问题，都可能可以索赔" sub="选择你的航班遭遇，我们用 EC261/2004 规则帮你判断资格与金额。" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="three-col">
          {Mkt.DISRUPTIONS.map((d, i) => (
            <Reveal key={d.key} delay={i * 80}>
              <Panel style={{ height: '100%', cursor: 'pointer' }} onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('funnel')}>
                <div style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--teal-100)', color: 'var(--teal-700)', display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: '1.2rem' }}>{i + 1}</div>
                <h3 style={{ margin: '16px 0 6px', fontSize: '1.3rem', fontWeight: 800, color: 'var(--slate-900)' }}>{d.label}</h3>
                <p style={{ margin: 0, color: 'var(--text-muted)', lineHeight: 1.6 }}>{d.hint} · 通常可主张 €250–€600 赔偿。</p>
                <div style={{ marginTop: 16, color: 'var(--teal-700)', fontWeight: 800, fontSize: '0.92rem' }}>立即初筛 →</div>
              </Panel>
            </Reveal>
          ))}
        </div>
      </section>

      {/* 三步流程 */}
      <section style={{ ...wrap, paddingTop: 88 }}>
        <SectionTitle eyebrow="只需三步" title="把麻烦交给我们" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="three-col">
          {Mkt.STEPS.map((s, i) => (
            <Reveal key={s.n} delay={i * 80}>
              <div style={{ padding: '4px 8px' }}>
                <div style={{ fontSize: '3rem', fontWeight: 950, color: 'var(--teal-100)', lineHeight: 1, letterSpacing: '-0.04em' }}>{s.n}</div>
                <h3 style={{ margin: '6px 0 8px', fontSize: '1.25rem', fontWeight: 800, color: 'var(--slate-900)' }}>{s.title}</h3>
                <p style={{ margin: 0, color: 'var(--text-body)', lineHeight: 1.7 }}>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* 赔偿档位 */}
      <section style={{ paddingTop: 88 }}>
        <div style={wrap}>
          <SectionTitle eyebrow="赔偿金额" title="按航程距离，分三档" sub="EC261/2004 规定的固定赔偿标准——与机票价格无关。" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="three-col">
            {Mkt.TIERS.map((t, i) => (
              <Reveal key={t.amt} delay={i * 80}>
                <Panel variant={i === 2 ? 'hero' : 'card'} style={{ textAlign: 'center', height: '100%' }}>
                  <div style={{ fontSize: '3rem', fontWeight: 950, letterSpacing: '-0.03em', color: i === 2 ? '#fff' : 'var(--teal-700)' }}>€{t.amt}</div>
                  <div style={{ marginTop: 8, fontWeight: 800, color: i === 2 ? '#fff' : 'var(--slate-900)' }}>{t.range}</div>
                  <div style={{ marginTop: 6, color: i === 2 ? 'var(--text-on-teal)' : 'var(--text-muted)', fontSize: '0.92rem' }}>{t.note}</div>
                </Panel>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* 费用预览 */}
      <section style={{ ...wrap, paddingTop: 88 }}>
        <Panel variant="tint" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 32, alignItems: 'center', padding: 40 }} className="fees-grid">
          <div>
            <div style={{ color: 'var(--teal-700)', fontWeight: 800, fontSize: '0.8rem', letterSpacing: '0.16em', textTransform: 'uppercase' }}>透明费用</div>
            <h2 style={{ margin: '12px 0', fontSize: 'clamp(1.6rem, 3vw, 2.2rem)', fontWeight: 900, color: 'var(--slate-900)', lineHeight: 1.15 }}>佣金只收 15–18%，<br />还首单免佣金</h2>
            <p style={{ margin: '0 0 20px', color: 'var(--text-body)', lineHeight: 1.7 }}>约为市场平均水平的一半。不成功不收费，没有隐藏费用。</p>
            <Button variant="primary" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('fees')}>查看费用明细</Button>
          </div>
          <div style={{ display: 'grid', gap: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderRadius: 'var(--radius-xl)', background: 'var(--white)', border: '1px solid var(--border-teal)' }}>
              <span style={{ fontWeight: 800, color: 'var(--slate-900)' }}>Claimmee</span>
              <span style={{ fontWeight: 950, color: 'var(--teal-700)', fontSize: '1.3rem' }}>15–18%</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderRadius: 'var(--radius-xl)', background: 'var(--surface-sunken)' }}>
              <span style={{ fontWeight: 800, color: 'var(--slate-600)' }}>市场平均</span>
              <span style={{ fontWeight: 900, color: 'var(--slate-500)', fontSize: '1.3rem' }}>25–35%</span>
            </div>
          </div>
        </Panel>
      </section>

      {/* FAQ */}
      <section style={{ ...wrap, paddingTop: 88 }}>
        <SectionTitle eyebrow="常见问题" title="还有疑问？" />
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          {Mkt.FAQ.map((f) => <FaqItem key={f.q} q={f.q} a={f.a} />)}
        </div>
      </section>

      {/* 末尾 CTA */}
      <section style={{ ...wrap, paddingTop: 80, paddingBottom: 90 }}>
        <Panel variant="hero" style={{ textAlign: 'center', padding: '56px 32px' }}>
          <h2 style={{ margin: 0, color: '#fff', fontSize: 'clamp(1.8rem, 4vw, 3rem)', fontWeight: 950, letterSpacing: '-0.03em', lineHeight: 1.05 }}>3 分钟，看看你能拿回多少</h2>
          <p style={{ margin: '16px auto 28px', color: 'var(--text-on-teal)', maxWidth: 520, lineHeight: 1.7, fontSize: '1.05rem' }}>免费、无需证件、不成功不收费。现在就开始。</p>
          <button onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('funnel')} style={{ border: 0, borderRadius: 'var(--radius-pill)', padding: '1.1rem 2.4rem', background: 'var(--amber-500)', color: 'var(--amber-ink)', fontWeight: 900, fontSize: '1.15rem', fontFamily: 'var(--font-sans)', cursor: 'pointer', boxShadow: 'var(--shadow-amber)' }}>开始免费初筛 →</button>
        </Panel>
      </section>
    </div>
  );
}

window.Landing = Landing;
window.ClaimmeeReveal = Reveal;
window.ClaimmeeSectionTitle = SectionTitle;