function Landing({ go }) {
  const wide = useWide();
  const pad = wide ? '0 32px' : '0 20px';

  return (
    <div style={{ background: TH.bg, color: TH.ink, fontFamily: TH.serif, minHeight: '100vh' }}>
      <Ticker/>

      {/* Hero */}
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: wide ? '64px 32px 48px' : '40px 20px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: wide ? '1.25fr 1fr' : '1fr', gap: wide ? 56 : 32 }}>
          <div>
            <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 18 }}>
              ❦ A JOURNAL FOR SYSTEMATIC CRYPTO TRADERS
            </div>
            <div style={{ fontSize: wide ? 76 : 48, lineHeight: 1, letterSpacing: -2.5, fontWeight: 400, color: TH.ink, marginBottom: 22 }}>
              Trade with your<br/>
              head, not your <span style={{ fontStyle: 'italic', color: TH.accent }}>heart.</span>
            </div>
            <div style={{ fontFamily: TH.serif, fontSize: wide ? 18 : 16, lineHeight: 1.6, color: TH.inkSoft, maxWidth: 520, marginBottom: 32 }}>
              Walkforward is a friendly research desk for crypto traders who want to get better. Read our weekly
              memos, run real backtests on our tools, and trade alongside a community that shows its work —
              no hype, no gurus.
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn primary onClick={() => go('signup')}>Start free →</Btn>
              <Btn ghost onClick={() => go('pricing')}>See what's inside</Btn>
            </div>
            <div style={{ marginTop: 40, display: 'flex', gap: wide ? 32 : 20, flexWrap: 'wrap', fontFamily: TH.mono, fontSize: 11, color: TH.muted, letterSpacing: 1.5 }}>
              <span>✓ NO PAID PROMOS</span>
              <span>✓ OPEN METHODOLOGY</span>
              <span>✓ CRYPTO BILLING</span>
            </div>
          </div>

          {wide && (
            <div style={{ padding: '0 0 0 32px', borderLeft: `1px solid ${TH.rule}` }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 18 }}>
                <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.muted, letterSpacing: 2 }}>RESEARCH INDEX</div>
                <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 1 }}>● LIVE</div>
              </div>
              {[
                { tag: 'BACKTEST', t: 'SMA 50/200 · BTC · 2019–2026', r: 'Sharpe 1.82', c: TH.green },
                { tag: 'MEMO', t: 'Funding regime shift — who pays to be long?', r: '7 min', c: TH.accent },
                { tag: 'SIGNAL', t: 'ETH/BTC mean reversion · 4H', r: 'Open', c: TH.green },
                { tag: 'BACKTEST', t: 'Donchian breakout · SOL · walk-fwd', r: 'Sharpe 1.21', c: TH.green },
                { tag: 'MEMO', t: 'A note on survivorship bias in altcoin baskets', r: '11 min', c: TH.accent },
                { tag: 'SIGNAL', t: 'Perp basis divergence · multi-venue', r: 'Closed +4.2%', c: TH.muted },
                { tag: 'VIDEO', t: 'Position sizing for volatile assets — part II', r: '18 min', c: TH.accent },
              ].map((row, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 16,
                  padding: '11px 0', borderBottom: `1px solid ${TH.rule}`, alignItems: 'center',
                }}>
                  <span style={{ fontFamily: TH.mono, fontSize: 10, color: row.c, letterSpacing: 1.5 }}>{row.tag}</span>
                  <span style={{ fontFamily: TH.serif, fontSize: 15, color: TH.ink }}>{row.t}</span>
                  <span style={{ fontFamily: TH.mono, fontSize: 11, color: TH.inkSoft }}>{row.r}</span>
                </div>
              ))}
              <div onClick={() => go('videos')} style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, padding: '14px 0', letterSpacing: 1, cursor: 'pointer' }}>
                + 284 more in the vault →
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Divider strip — numbers */}
      <div style={{ borderTop: `1px solid ${TH.rule}`, borderBottom: `1px solid ${TH.rule}`, background: TH.panel }}>
        <div style={{ maxWidth: 1480, margin: '0 auto', padding: wide ? '24px 32px' : '20px', display: 'grid', gridTemplateColumns: wide ? 'repeat(4, 1fr)' : 'repeat(2, 1fr)', gap: wide ? 32 : 16 }}>
          {[
            ['487', 'Members'],
            ['142', 'Memos published'],
            ['2.3M+', 'Backtests run'],
            ['94', 'Video lectures'],
          ].map(([n, l], i) => (
            <div key={i}>
              <div style={{ fontFamily: TH.serif, fontSize: wide ? 36 : 28, color: TH.accent, letterSpacing: -0.5 }}>{n}</div>
              <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.muted, letterSpacing: 1.5, textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* What you get */}
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: wide ? '64px 32px' : '40px 20px' }}>
        <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2, marginBottom: 10 }}>§ WHAT'S INSIDE</div>
        <div style={{ fontSize: wide ? 44 : 32, letterSpacing: -1.2, marginBottom: 40, maxWidth: 720 }}>
          Everything you need to move from <span style={{ fontStyle: 'italic', color: TH.accent }}>feeling</span> to <span style={{ fontStyle: 'italic' }}>knowing</span>.
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: wide ? 'repeat(3, 1fr)' : '1fr', gap: wide ? 0 : 16 }}>
          {[
            {
              k: '01', t: 'SMA & strategy backtester',
              d: 'Test moving-average crossovers, mean-reversion, and breakout systems on 7 years of BTC, ETH, and SOL data. Walk-forward validated. Export CSV.',
              foot: 'TOOL · INCLUDED',
            },
            {
              k: '02', t: 'Weekly research memo',
              d: 'Every Sunday, a short, peer-reviewed dispatch on regime, funding, and cross-asset signals. Written to be read, not sold.',
              foot: '≈ 8 min / week',
            },
            {
              k: '03', t: 'Private Telegram',
              d: 'Trade tape from the community. Every call tagged, timestamped, and archived. Mods keep it signal, not noise.',
              foot: '487 members · active',
            },
            {
              k: '04', t: 'Portfolio tracker',
              d: 'Connect wallets and exchanges, see a consolidated PnL curve, and benchmark against BTC. Read-only, always.',
              foot: 'ON-CHAIN + CEX',
            },
            {
              k: '05', t: 'Video lecture archive',
              d: '94 hours of recorded workshops on position sizing, risk management, and reading on-chain data. No gatekeeping.',
              foot: '94 LECTURES',
            },
            {
              k: '06', t: 'Live Q&A + reviews',
              d: 'Monthly open calls with working quants. Bring a trade, get a walk-through. Everything recorded.',
              foot: 'MONTHLY',
            },
          ].map((c, i) => (
            <div key={i} style={{
              padding: wide ? '32px 28px' : '24px 0',
              borderTop: wide ? `1px solid ${TH.rule}` : 'none',
              borderBottom: wide ? 'none' : `1px solid ${TH.rule}`,
              borderRight: wide && (i % 3) !== 2 ? `1px solid ${TH.rule}` : 'none',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                <span style={{ fontFamily: TH.mono, fontSize: 11, color: TH.accent, letterSpacing: 2 }}>{c.k}</span>
                <span style={{ fontFamily: TH.mono, fontSize: 10, color: TH.muted, letterSpacing: 1 }}>{c.foot}</span>
              </div>
              <div style={{ fontFamily: TH.serif, fontSize: 24, marginBottom: 10 }}>{c.t}</div>
              <div style={{ fontFamily: TH.serif, fontSize: 15, color: TH.inkSoft, lineHeight: 1.55 }}>{c.d}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Quote / voice */}
      <div style={{ background: TH.panel, borderTop: `1px solid ${TH.rule}`, borderBottom: `1px solid ${TH.rule}` }}>
        <div style={{ maxWidth: 1000, margin: '0 auto', padding: wide ? '72px 32px' : '40px 20px', textAlign: 'center' }}>
          <div style={{ fontFamily: TH.serif, fontSize: wide ? 34 : 24, lineHeight: 1.35, letterSpacing: -0.5, fontStyle: 'italic', color: TH.ink, marginBottom: 20 }}>
            "Every serious trader I know reads Walkforward. It's the closest thing to a Bloomberg terminal
            for retail — with the curiosity of a grad seminar."
          </div>
          <div style={{ fontFamily: TH.mono, fontSize: 11, color: TH.muted, letterSpacing: 2 }}>
            — M. CHEN · FORMER JANE STREET
          </div>
        </div>
      </div>

      {/* CTA */}
      <div style={{ maxWidth: 1480, margin: '0 auto', padding: wide ? '72px 32px' : '48px 20px', textAlign: 'center' }}>
        <div style={{ fontSize: wide ? 56 : 36, letterSpacing: -1.5, marginBottom: 16 }}>
          Come trade <span style={{ fontStyle: 'italic', color: TH.accent }}>thoughtfully.</span>
        </div>
        <div style={{ fontFamily: TH.serif, fontSize: 17, color: TH.inkSoft, maxWidth: 560, margin: '0 auto 28px', lineHeight: 1.55 }}>
          Start with the free sample memo and backtester preview. No card, no pressure.
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Btn primary onClick={() => go('signup')}>Create free account →</Btn>
          <Btn ghost onClick={() => go('pricing')}>View pricing</Btn>
        </div>
      </div>

      <Footer/>
    </div>
  );
}

Object.assign(window, { Landing });