function Landing({ onNavigate }) {
  const { t } = useI18n();
  const [heroHash, setHeroHash] = React.useState(window.makeHash(Math.floor(Math.random()*9999)));
  const [sampleProjectId, setSampleProjectId] = React.useState(null);
  React.useEffect(() => {
    const tt = setInterval(() => setHeroHash(window.makeHash(Math.floor(Math.random()*99999))), 3200);
    return () => clearInterval(tt);
  }, []);
  React.useEffect(() => {
    fetch('/api/ticker')
      .then((r) => r.json())
      .then((items) => setSampleProjectId(items[0]?.id || null))
      .catch(() => setSampleProjectId(null));
  }, []);

  return (
    <div>
      <HashTicker />

      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 80, alignItems:'end' }}>
            <div>
              <div className="hero-eyebrow">{t('landing.eyebrow')}</div>
              <h1 className="hero-title">
                {t('landing.title.a')}<br/>
                <em>{t('landing.title.b')}</em>
              </h1>
              <p className="hero-sub">{t('landing.sub')}</p>
              <div className="row gap-12">
                <button className="btn btn-primary btn-lg" onClick={() => onNavigate('upload')}>
                  {t('landing.cta.start')} <IconArrowRight />
                </button>
                <button className="btn btn-secondary btn-lg" onClick={() => onNavigate('verify')}>
                  {t('landing.cta.verify')}
                </button>
              </div>
            </div>

            {/* Live hash preview */}
            <div>
              <div className="card-flat" style={{ padding: 28 }}>
                <div className="eyebrow mb-16">{t('landing.hero.lastBlock')}</div>
                <div className="hash-mono-lg">
                  <ScrambleHash target={heroHash} duration={2200} />
                </div>
                <div className="mt-24 divider-dashed" style={{ paddingTop: 16 }} />
                <div className="row between">
                  <div className="col gap-4">
                    <span className="tiny">{t('landing.hero.timestamp')}</span>
                    <span className="mono" style={{ fontSize: 13 }}>{fmtTimeUTC(new Date().toISOString())}</span>
                  </div>
                  <div className="col gap-4" style={{ alignItems:'flex-end' }}>
                    <span className="tiny">{t('landing.hero.status')}</span>
                    <span className="badge badge-verified"><span className="dot-verified" /> {t('common.sealed')}</span>
                  </div>
                </div>
              </div>
              <div className="mt-16 small ink-3">{t('landing.hero.demoNote')}</div>
            </div>
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="py-80" style={{ borderTop:'1px solid var(--hairline)', background: 'var(--surface-soft)' }}>
        <div className="container">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.6fr', gap: 80 }}>
            <div>
              <div className="eyebrow mb-16">{t('landing.why.eyebrow')}</div>
              <h2 className="h2">
                <RichText html={t('landing.why.title.a')} /><br/>
                <RichText html={t('landing.why.title.b')} />
              </h2>
            </div>
            <div className="col gap-32">
              <div className="numbered col gap-24">
                <div>
                  <div className="h4">{t('landing.why.item1.title')}</div>
                  <div className="small ink-2 mt-8">{t('landing.why.item1.body')}</div>
                </div>
                <div>
                  <div className="h4">{t('landing.why.item2.title')}</div>
                  <div className="small ink-2 mt-8">{t('landing.why.item2.body')}</div>
                </div>
                <div>
                  <div className="h4">{t('landing.why.item3.title')}</div>
                  <div className="small ink-2 mt-8">{t('landing.why.item3.body')}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* LIFELINE GRAPHIC */}
      <section className="py-80">
        <div className="container">
          <div className="text-center mb-48">
            <div className="eyebrow mb-16">{t('landing.anatomy.eyebrow')}</div>
            <h2 className="h2 serif italic">{t('landing.anatomy.title')}</h2>
          </div>

          <div style={{ position:'relative', padding:'40px 0' }}>
            <svg viewBox="0 0 1200 200" className="lifeline-svg" style={{ width:'100%', height:'auto' }}>
              <line className="line" x1="40" y1="100" x2="1160" y2="100" />
              {[
                {x:80,  label:'PROMPT',     who:'ai'},
                {x:220, label:'REF · IMG',  who:'human'},
                {x:360, label:'GEN v1',     who:'ai'},
                {x:500, label:'GEN v2',     who:'ai'},
                {x:640, label:'EDIT · AE',  who:'human'},
                {x:780, label:'SFX',        who:'ai'},
                {x:920, label:'FINAL CUT',  who:'human'},
                {x:1080,label:'SEAL',       who:'chain'},
              ].map((n, i) => (
                <g key={i}>
                  <circle
                    cx={n.x} cy={100}
                    r={n.who === 'chain' ? 12 : 7}
                    style={ n.who === 'ai' ? { fill:'var(--primary)', stroke:'var(--primary-active)', strokeWidth: 1 }
                          : n.who === 'human' ? { fill:'var(--accent-teal)', stroke:'none' }
                          : { fill:'var(--ink)', stroke:'none' } }
                  />
                  <text x={n.x} y={140} textAnchor="middle" style={{ fontFamily:'Inter, sans-serif', fontSize:10, fontWeight:500, letterSpacing:'0.12em', fill:'var(--muted)' }}>
                    {n.label}
                  </text>
                  <text x={n.x} y={78} textAnchor="middle" style={{ fontFamily:'JetBrains Mono, monospace', fontSize:9, letterSpacing:'0.06em', fill:'var(--muted-soft)' }}>
                    {String(i+1).padStart(2,'0')}
                  </text>
                </g>
              ))}
            </svg>
          </div>

          <div className="row gap-24 mt-32" style={{ justifyContent:'center', flexWrap:'wrap' }}>
            <div className="row gap-8"><span style={{ width:10, height:10, background:'var(--primary)', borderRadius:'50%' }} /><span className="small">{t('landing.anatomy.legend.ai')}</span></div>
            <div className="row gap-8"><span style={{ width:10, height:10, background:'var(--accent-teal)', borderRadius:'50%' }} /><span className="small">{t('landing.anatomy.legend.human')}</span></div>
            <div className="row gap-8"><span style={{ width:10, height:10, background:'var(--ink)', borderRadius:'50%' }} /><span className="small">{t('landing.anatomy.legend.chain')}</span></div>
          </div>
        </div>
      </section>

      {/* SAMPLE CERTIFICATE PREVIEW */}
      <section className="py-80" style={{ borderTop:'1px solid var(--hairline)' }}>
        <div className="container">
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 64, alignItems:'center' }}>
            <div>
              <div className="eyebrow mb-16">{t('landing.cert.eyebrow')}</div>
              <h2 className="h2 serif mb-24"><RichText html={t('landing.cert.title')} /></h2>
              <p className="ink-2" style={{ fontSize:16, lineHeight:1.6 }}>{t('landing.cert.body')}</p>
              <button
                className="btn btn-secondary mt-32"
                onClick={() => sampleProjectId && onNavigate('certificate:' + sampleProjectId)}
                disabled={!sampleProjectId}
                style={{ opacity: sampleProjectId ? 1 : 0.4 }}
              >
                {t('landing.cert.cta')} <IconArrowRight />
              </button>
            </div>
            <div style={{ transform:'rotate(-1.2deg)', transformOrigin:'center' }}>
              <div className="certificate" style={{ padding: 40 }}>
                <div className="row between mb-24">
                  <div className="col gap-4">
                    <div className="tiny">{t('cert.title')}</div>
                    <div className="mono" style={{ fontSize: 10, color:'var(--muted)' }}>№ JB-2026-00847</div>
                  </div>
                  <div className="certificate-seal">
                    <div style={{ fontFamily:'var(--serif)', fontSize: 11 }}>{t('cert.sealed')}</div>
                    <div className="mono" style={{ fontSize: 9, marginTop: 3, letterSpacing:'0.1em' }}>07·24</div>
                  </div>
                </div>
                <div className="serif" style={{ fontSize: 32, lineHeight: 1.1, letterSpacing:'-0.01em' }}>
                  Neon Tokyo<br/>
                  <span className="italic ink-3" style={{ fontSize: 20 }}>a short film</span>
                </div>
                <div className="mt-24 divider-dashed" style={{ paddingTop: 16 }} />
                <div className="col gap-8">
                  <div className="tiny">{t('cert.finalMerkle')}</div>
                  <div className="mono" style={{ fontSize: 11, wordBreak:'break-all', lineHeight: 1.5 }}>
                    0xa3f21c88b7d4e5f6091c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a
                  </div>
                </div>
                <div className="mt-24 row between">
                  <div className="col gap-4">
                    <div className="tiny">{t('cert.authoredBy')}</div>
                    <div className="mono" style={{ fontSize:12 }}>creator.eth</div>
                  </div>
                  <div className="col gap-4" style={{ alignItems:'flex-end' }}>
                    <div className="tiny">{t('verify.row.chain')}</div>
                    <ChainBadge chain="polygon" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="footer">
        <div className="container between" style={{ alignItems:'flex-end' }}>
          <div>
            <div className="brand-mark">Jervis<em style={{ color:'var(--primary)', fontStyle:'italic' }}>Box</em></div>
            <div className="tiny mt-8" style={{ textTransform:'none', letterSpacing:0, fontSize:13, color:'var(--muted)' }}>{t('landing.footer.tag')}</div>
          </div>
          <div className="row gap-24 small ink-3">
            <a onClick={() => onNavigate('dashboard')} style={{cursor:'pointer'}}>{t('nav.dashboard')}</a>
            <a onClick={() => onNavigate('verify')} style={{cursor:'pointer'}}>{t('nav.verify')}</a>
            <a onClick={() => onNavigate('settings')} style={{cursor:'pointer'}}>{t('nav.settings')}</a>
            <span className="mono">v0.4 · beta</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

// Small inline-HTML renderer for translations that embed <em> tags.
function RichText({ html }) {
  return <span dangerouslySetInnerHTML={{ __html: html }} />;
}

window.Landing = Landing;