// pages/home.jsx — the locked marketing home for Pawnther adults.
// B (cinematic hero, panther eyes, paper intermissions, mascot peeks)
// + C (instrument panel: brass gauges, eval bar, sparkline, Maia rating dial).

const { useState: useSH, useEffect: useEH, useRef: useRH } = React;

function HomePage(){
  const [dark, setDark] = useSH(false);
  return (
    <PageShell active="home" dark={dark}>
      <HeroBlock setDark={setDark} dark={dark} />
      <MarqueeLines />
      <ProblemSpread />
      <ThreeActs />
      <InstrumentRow />
      <SparringPanel />
      <PricingPreview />
      <FinalCTA />
      <DarkToggle dark={dark} setDark={setDark} />
    </PageShell>
  );
}

// ──────────────────────────────────────────────────────────────────────
function DarkToggle({ dark, setDark }){
  return (
    <button onClick={() => setDark(d => !d)} style={{
      position:'fixed', bottom: 18, right: 18, zIndex: 100,
      padding:'10px 16px', borderRadius: 999,
      background: dark ? '#fff7e6' : '#191714',
      color: dark ? '#191714' : '#fff7e6',
      border: 0,
      fontFamily:'JetBrains Mono, monospace',
      fontSize: 11, fontWeight: 800, letterSpacing:'.18em',
      textTransform:'uppercase', cursor:'pointer',
      boxShadow:'0 8px 24px -8px rgba(0,0,0,.3)',
    }}>{dark ? '☀ Light' : '☾ Dark'}</button>
  );
}

// ──────────────────────────────────────────────────────────────────────
function HeroBlock({ dark }){
  return (
    <CinematicHero>
      <div style={{ paddingTop: 60, paddingLeft: 28, paddingRight: 28 }}>
        <Folio dark>VOL. I · NO. 01 · TRAINING FOR THE HUNT</Folio>

        <div style={{
          display:'grid',
          gridTemplateColumns: 'minmax(0, 1.05fr) minmax(0, .95fr)',
          gap: 56, marginTop: 22, alignItems: 'start',
        }}>
          <div>
            <h1 className="pw-reveal" style={{
              fontSize: 'clamp(64px, 8vw, 116px)', lineHeight: '.9', letterSpacing:'-.06em',
              fontVariationSettings: '"opsz" 144, "SOFT" 50',
              color: '#fff7e6', maxWidth: '11ch',
            }}>
              Hunt your<br/>
              <em style={{
                fontStyle:'italic', color:'var(--gold)',
                fontVariationSettings:'"opsz" 144, "SOFT" 80',
              }}>blunders</em>
              <span style={{
                display:'inline-block', verticalAlign:'-.05em',
                transform:'translateY(8px) rotate(-4deg)',
                marginLeft: 18,
              }}>
                <svg width="120" height="90" viewBox="0 0 64 50">
                  <g fill="var(--gold)">
                    <path d="M8 44 C8 22, 18 14, 32 14 C44 14, 56 22, 56 40 L54 46 L42 46 L40 42 L24 42 L22 46 L12 46 Z" />
                    <path d="M12 20 L8 6 L20 16 Z" />
                    <path d="M52 20 L56 6 L44 16 Z" />
                  </g>
                  <ellipse cx="36" cy="28" rx="4" ry="2.4" fill="#fff7e6" />
                  <circle cx="37" cy="28" r=".9" fill="#0e0a08" />
                </svg>
              </span>
            </h1>

            <ScrambleLede />

            <div className="pw-reveal" style={{
              '--pw-d':'380ms',
              marginTop: 32, display:'flex', gap: 10, flexWrap:'wrap',
            }}>
              <CTAButton variant="gold" size="lg">
                Start the hunt <span style={{ fontSize: 16 }}>→</span>
              </CTAButton>
              <CTAButton variant="dark" size="lg">Meet Maia ♛</CTAButton>
            </div>

            {/* Hero meta strip with bullet dots */}
            <div className="pw-reveal" style={{
              '--pw-d':'480ms',
              marginTop: 36, display:'flex', gap: '14px 26px', flexWrap:'wrap',
              fontFamily:'JetBrains Mono, monospace', fontSize: 10.5,
              fontWeight: 800, letterSpacing:'.18em', textTransform:'uppercase',
              color:'rgba(255,247,230,.55)',
            }}>
              {['Adult MVP', 'Maia 2 sparring', 'Practical, not theoretical', 'Android first'].map(t => (
                <span key={t} style={{ display:'inline-flex', alignItems:'center', gap: 8 }}>
                  <span style={{
                    width:6, height:6, borderRadius:'50%',
                    background:'var(--gold)',
                    boxShadow:'0 0 0 3px rgba(227,155,68,.18)',
                  }} />{t}
                </span>
              ))}
            </div>
          </div>

          {/* Floating board with eval bar + move list + idea */}
          <aside className="pw-reveal" style={{
            '--pw-d':'220ms',
            display:'grid', gridTemplateColumns:'40px 1fr', gap: 14,
            padding: 18,
            borderRadius: 24,
            background: 'rgba(20,16,12,.55)',
            border: '1px solid rgba(255,247,230,.12)',
            backdropFilter:'blur(12px)', WebkitBackdropFilter:'blur(12px)',
            boxShadow:'0 24px 60px -20px rgba(0,0,0,.55)',
          }}>
            {/* Eval bar */}
            <div style={{ paddingTop: 36 }}>
              <EvalBar value={1.4} max={5} height={320} depth={22} />
            </div>

            <div style={{ display:'grid', gap: 14 }}>
              <header style={{
                display:'flex', justifyContent:'space-between',
                fontFamily:'JetBrains Mono, monospace', fontSize: 10.5,
                fontWeight: 800, letterSpacing:'.18em', textTransform:'uppercase',
                color:'rgba(255,247,230,.55)',
              }}>
                <span style={{ display:'inline-flex', alignItems:'center', gap: 8 }}>
                  <span style={{
                    width:7, height:7, borderRadius:'50%', background:'var(--olive)',
                    animation:'pwLivePulse 1.8s var(--ease-soft) infinite',
                  }} />
                  Live · annotated
                </span>
                <span>FIG. 01 — White to move</span>
              </header>

              <MiniBoard
                pieces={{
                  e1:'wK', a1:'wR', h1:'wR', d2:'wP', e4:'wP', f3:'wN', c4:'wB',
                  e8:'bK', a8:'bR', h8:'bR', f7:'bP', g7:'bP', h7:'bP', c6:'bN',
                  d6:'bP', g8:'bN',
                }}
                ring={['f7']}
                arrows={[{ from:'c4', to:'f7' }]}
              />

              <MoveList dark moves={[
                ['e4','c5'], ['Nf3','d6'], ['d4','cxd4'], ['Nxd4','Nf6'],
                ['Nc3','a6'], ['Be3','e5'], ['Nb3','Be6'], ['f3','h5'],
                ['Bc4','…'],
              ]} current={16} />

              <div style={{
                padding:'10px 14px', borderRadius: 12,
                background: 'rgba(227,155,68,.12)',
                border: '1px solid rgba(227,155,68,.3)',
                fontFamily:'Fraunces, serif', fontStyle:'italic',
                fontSize: 14, color: 'var(--gold)',
              }}>
                <span style={{
                  fontFamily:'JetBrains Mono, monospace', fontWeight:800,
                  fontStyle:'normal', marginRight: 6,
                }}>Idea —</span>
                eliminate the f7 guard, then the king is on the run.
              </div>
            </div>
          </aside>
        </div>
      </div>
    </CinematicHero>
  );
}

function ScrambleLede(){
  const text = "Theory is the easy part. The hard part is seeing the board — the squares, the lines, the two moves you can't calculate before you blunder.";
  const [out, setOut] = useSH('');
  const ref = useRH(null);
  useEH(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting){
        io.disconnect();
        const chars = "abcdefgh12345678NBRQKpx+ ";
        let i = 0;
        const reveal = () => {
          if (i >= text.length) return;
          const scram = text.slice(0, i) +
            Array.from({ length: Math.min(8, text.length - i) },
              () => chars[Math.floor(Math.random() * chars.length)]).join('');
          setOut(scram);
          i += 1;
          setTimeout(reveal, 22);
        };
        reveal();
      }
    }, { threshold: .3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <p ref={ref} style={{
      marginTop: 26,
      fontFamily:'Fraunces, serif', fontStyle:'italic',
      fontSize: 22, lineHeight: 1.4,
      color:'rgba(255,247,230,.78)',
      maxWidth: '56ch',
      paddingLeft: 22, borderLeft:'2px solid var(--gold)',
      fontVariationSettings:'"opsz" 36, "SOFT" 60',
      minHeight: '6em',
    }}>{out || text}</p>
  );
}

// ──────────────────────────────────────────────────────────────────────
function MarqueeLines(){
  const items = [
    ['Najdorf Sicilian',           '1.e4 c5 2.Nf3 d6 3.d4 cxd4 4.Nxd4 Nf6 5.Nc3 a6'],
    ['Ruy López, Berlin',          '1.e4 e5 2.Nf3 Nc6 3.Bb5 Nf6 4.O-O Nxe4'],
    ["Queen's Gambit Declined",    '1.d4 d5 2.c4 e6 3.Nc3 Nf6 4.Bg5 Be7'],
    ['Caro–Kann, Advance',         '1.e4 c6 2.d4 d5 3.e5 Bf5'],
    ["King's Indian",              '1.d4 Nf6 2.c4 g6 3.Nc3 Bg7 4.e4 d6'],
    ['Italian, Giuoco Pianissimo', '1.e4 e5 2.Nf3 Nc6 3.Bc4 Bc5 4.d3 Nf6'],
  ];
  return (
    <section style={{
      margin: '0 0 0', padding: '14px 0',
      borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)',
      background: 'rgba(255,253,248,.4)',
      overflow:'hidden',
      WebkitMaskImage:'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)',
      maskImage:'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)',
    }}>
      <div style={{
        display:'flex', gap: 56, width: 'max-content',
        animation:'pwMarquee 60s linear infinite',
      }}>
        {[...items, ...items].map(([name, moves], i) => (
          <span key={i} style={{
            display:'inline-flex', alignItems:'center', gap: 16,
            fontFamily:'Fraunces, serif', fontStyle:'italic',
            fontSize: 18, fontWeight: 500, color:'var(--ink-soft)', whiteSpace:'nowrap',
          }}>
            <em style={{ fontStyle:'italic', color:'var(--gold)', fontWeight:600 }}>{name}</em>
            <span style={{
              fontFamily:'JetBrains Mono, monospace', fontSize: 12,
              fontWeight: 800, padding:'3px 9px', borderRadius: 8,
              border:'1px solid var(--line)', background:'var(--paper-card)',
              fontStyle:'normal', color:'var(--ink)',
            }}>{moves}</span>
            <span style={{ width:5, height:5, borderRadius:'50%', background:'var(--gold)' }} />
          </span>
        ))}
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
function ProblemSpread(){
  return (
    <section style={{ padding: '72px 28px 32px', maxWidth: 1320, margin:'0 auto' }}>
      <div className="pw-reveal" style={{
        display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap: 36, marginBottom: 28,
      }}>
        <div>
          <Kicker>The problem</Kicker>
          <h2 style={{ marginTop: 10, fontSize: 50, letterSpacing:'-.04em', lineHeight: 1.04, fontFamily:'Fraunces, serif' }}>
            Apps overfeed theory and<br/>
            <em style={{ fontStyle:'italic', color:'var(--gold)' }}>underfeed sight.</em>
          </h2>
        </div>
        <p style={{ maxWidth: 420, color:'var(--ink-soft)', fontSize: 15, lineHeight: 1.55 }}>
          Most platforms drown you in puzzles and openings while quietly avoiding
          the skills that actually decide club games — calculation, board geometry,
          and not blundering a piece on move 18.
        </p>
      </div>

      <div className="pw-reveal" style={{
        '--pw-d':'120ms',
        display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16,
      }}>
        <ComparisonCard
          variant="bad"
          tag="What other apps do"
          items={[
            'Endless rated puzzles you solve by pattern recognition',
            'Opening trees that demand 40 moves of theory',
            'Bots that play unrealistically — too perfect or too random',
            'Analysis that says "−1.2" and goes quiet',
          ]} />
        <ComparisonCard
          variant="good"
          tag="What Pawnther does"
          items={[
            'Drills for board vision, notation, mental geometry',
            'Opening Improver: lines opponents actually play',
            'Maia: a human-like opponent that blunders like a human',
            'Review that turns mistakes into the next drill',
          ]} />
      </div>
    </section>
  );
}

function ComparisonCard({ variant, tag, items }){
  const isBad = variant === 'bad';
  return (
    <div style={{
      padding: 26, borderRadius: 22,
      background: isBad ? 'var(--paper-card)' : 'rgba(255,253,248,.7)',
      border: isBad ? '1px dashed var(--line-strong)' : '1px solid var(--line-strong)',
      boxShadow: isBad ? 'none' : '0 18px 40px -22px rgba(48,37,22,.16)',
    }}>
      <span style={{
        display:'inline-block',
        padding:'5px 12px', borderRadius: 999,
        background: isBad ? 'var(--rose-soft)' : 'var(--olive-soft)',
        color: isBad ? '#8b3850' : '#5f6d4d',
        fontFamily:'JetBrains Mono, monospace',
        fontSize: 10.5, fontWeight: 800, letterSpacing:'.16em', textTransform:'uppercase',
        marginBottom: 14,
      }}>{tag}</span>
      <ul style={{ listStyle:'none', display:'grid', gap: 10, padding: 0 }}>
        {items.map(t => (
          <li key={t} style={{ display:'grid', gridTemplateColumns:'20px 1fr', gap: 10, fontSize: 14.5, lineHeight: 1.5 }}>
            {isBad
              ? <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--rose)" strokeWidth="2.5" strokeLinecap="round"><path d="M6 6l12 12M18 6l-12 12"/></svg>
              : <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--gold)" strokeWidth="2.5" strokeLinecap="round"><path d="M20 6L9 17l-5-5"/></svg>}
            <span>{t}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// Three acts: SEE, CALCULATE, POUNCE — paper / dark / paper cinematic flow
// ──────────────────────────────────────────────────────────────────────
function ThreeActs(){
  return (
    <>
      <SeeAct />
      <CalculateAct />
      <PounceAct />
    </>
  );
}

function SeeAct(){
  const cards = [
    { title:'Square Color',      accent:'gold',  icon:<Ic name="grid" />,    desc:'Name the colour of any square instantly. Geometry internalised.' },
    { title:'Tap the Square',    accent:'blue',  icon:<Ic name="target" />,  desc:'Hear a coordinate, find the square. Fluent coordinates.' },
    { title:'Knight Pathfinder', accent:'olive', icon:<Ic name="knight" />,  desc:'Walk the knight to the king via a legal path.' },
    { title:'Position Memory',   accent:'rose',  icon:<Ic name="memory" />,  desc:'Study, hide, recall. Mental board control.' },
  ];
  return (
    <section style={{ padding: '40px 28px 32px', maxWidth: 1320, margin:'0 auto' }}>
      <div className="pw-reveal" style={{
        display:'grid', gridTemplateColumns:'minmax(0, 5fr) minmax(0, 7fr)',
        gap: 48, alignItems:'start',
      }}>
        <div style={{ position:'sticky', top: 100 }}>
          <Kicker>01 — See</Kicker>
          <h2 style={{
            marginTop: 14, fontSize: 60, letterSpacing:'-.045em', lineHeight: 1.02,
            fontFamily:'Fraunces, serif',
          }}>
            Before you can<br/>
            calculate, you have<br/>
            to <em style={{ fontStyle:'italic', color:'var(--gold)' }}>see.</em>
          </h2>
          <p style={{ marginTop: 14, color:'var(--ink-soft)', fontSize: 16, maxWidth:'42ch' }}>
            Four exercises that build coordinate fluency, board geometry, and
            mental control of squares the engine can't help you see.
          </p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 14 }}>
          {cards.map((c, i) => (
            <FCard key={c.title} {...c} delay={i * 90} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CalculateAct(){
  return (
    <section style={{
      position:'relative', overflow:'hidden',
      padding: '80px 28px',
      background:
        'radial-gradient(60% 80% at 20% 80%, rgba(216,106,145,.32), transparent 60%),' +
        'radial-gradient(50% 70% at 90% 20%, rgba(227,155,68,.18), transparent 60%),' +
        'linear-gradient(160deg, #0e0a08 0%, #1a1411 60%, #271a1e 100%)',
      color: '#fff7e6',
      margin: '40px 0',
    }}>
      <span style={{
        position:'absolute', right: -60, top: -80,
        fontFamily:'Fraunces, serif', fontSize: 520, lineHeight: 1,
        color:'rgba(227,155,68,.07)', pointerEvents:'none',
      }}>♞</span>
      <div className="pw-reveal" style={{
        maxWidth: 1320, margin:'0 auto', display:'grid',
        gridTemplateColumns:'minmax(0, 5fr) minmax(0, 7fr)', gap: 56,
      }}>
        <div style={{ position:'sticky', top: 100 }}>
          <Kicker>02 — Calculate</Kicker>
          <h2 style={{
            marginTop: 14, fontSize: 60, letterSpacing:'-.045em', lineHeight: 1.02,
            color:'#fff7e6', fontFamily:'Fraunces, serif',
          }}>
            Three clean moves<br/>
            <em style={{ fontStyle:'italic', color:'var(--gold)' }}>without losing<br/>the line.</em>
          </h2>
          <p style={{ marginTop: 14, color:'rgba(255,247,230,.65)', fontSize: 16, maxWidth:'42ch' }}>
            Notation, Blind Tactics, Blindfold. The drills that turn sight into
            calculation under pressure.
          </p>
        </div>

        <div style={{ display:'grid', gap: 0 }}>
          {[
            { num:'05', title:'Notation',     desc:'Read a game in algebraic. Hear "Nf3 e5 Bc4" and see the board, not the pieces.' },
            { num:'06', title:'Blind Tactics', desc:'Solve a tactic from a position you only saw briefly. Calculation under pressure.' },
            { num:'07', title:'Blindfold',    desc:'Play a full game without seeing the pieces. The end-state of visualisation.' },
          ].map((r, i) => (
            <a key={r.title} className="pw-reveal" href="#" style={{
              '--pw-d': `${i * 80}ms`,
              display:'grid', gridTemplateColumns:'56px 1fr auto',
              gap: 24, alignItems:'center', padding: '24px 0',
              borderBottom: '1px solid rgba(255,247,230,.12)',
              color:'#fff7e6',
            }}>
              <span style={{
                fontFamily:'JetBrains Mono, monospace', fontSize: 13,
                fontWeight: 800, color:'var(--gold)', letterSpacing:'.12em',
              }}>EX·{r.num}</span>
              <div>
                <div style={{
                  fontFamily:'Fraunces, serif', fontSize: 34, fontWeight:700,
                  letterSpacing:'-.03em',
                  fontVariationSettings: '"opsz" 80, "SOFT" 30',
                }}>{r.title}</div>
                <div style={{ color:'rgba(255,247,230,.65)', fontSize: 14.5, marginTop: 6, maxWidth: '52ch' }}>
                  {r.desc}
                </div>
              </div>
              <span style={{
                width: 48, height: 48, borderRadius:'50%',
                border:'1px solid rgba(255,247,230,.2)',
                display:'grid', placeItems:'center', color:'rgba(255,247,230,.7)',
              }}>→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function PounceAct(){
  return (
    <section style={{ padding: '40px 28px 24px', maxWidth: 1320, margin:'0 auto' }}>
      <div className="pw-reveal" style={{
        display:'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems:'center',
      }}>
        <div>
          <Kicker>03 — Pounce</Kicker>
          <h2 style={{
            marginTop: 14, fontSize: 60, letterSpacing:'-.045em', lineHeight: 1.02,
            fontFamily:'Fraunces, serif',
          }}>
            Beat a human-like<br/>opponent.<br/>
            <em style={{ fontStyle:'italic', color:'var(--rose)' }}>Maia plays like Maia.</em>
          </h2>
          <p style={{ marginTop: 14, color:'var(--ink-soft)', fontSize: 16, maxWidth:'42ch' }}>
            Maia is trained on millions of human games. She plays the moves a player
            at your ELO would actually play — including the mistakes. Beat her, and
            you've beaten a believable opponent.
          </p>
          <div style={{ marginTop: 22, display:'flex', gap: 10 }}>
            <CTAButton variant="gold">Read about Maia</CTAButton>
            <CTAButton variant="ghost">Play vs Maia 1500</CTAButton>
          </div>
        </div>

        <MaiaPortraitCard />
      </div>
    </section>
  );
}

function MaiaPortraitCard(){
  return (
    <div style={{
      position:'relative',
      borderRadius: 32,
      padding: 24,
      background:
        'radial-gradient(60% 80% at 80% 10%, rgba(216,106,145,.28), transparent 60%),' +
        'radial-gradient(50% 70% at 10% 90%, rgba(110,138,160,.28), transparent 60%),' +
        'linear-gradient(160deg, #181519, #2a1f24)',
      border:'1px solid rgba(255,247,230,.12)',
      boxShadow:'0 30px 60px -20px rgba(0,0,0,.45)',
      color:'#fff7e6',
      minHeight: 460,
      overflow:'hidden',
    }}>
      <span style={{
        position:'absolute', right: -40, top: -80,
        fontFamily:'serif', fontSize: 520,
        color:'rgba(216,106,145,.10)', pointerEvents:'none',
      }}>♛</span>
      <div style={{ position:'relative', zIndex: 2 }}>
        <Folio dark>Opponent · profile</Folio>
        <h3 style={{
          fontFamily:'Fraunces, serif', fontSize: 56,
          fontStyle:'italic', letterSpacing:'-.03em',
          marginTop: 8, fontVariationSettings:'"opsz" 144, "SOFT" 70',
          color: '#fff7e6', lineHeight: 1,
        }}>
          Maia <span style={{ fontStyle:'normal', color:'var(--rose)' }}>♛</span>
        </h3>
        <p style={{ marginTop: 10, fontSize: 14, color:'rgba(255,247,230,.7)', maxWidth:'34ch' }}>
          Adjustable rating: <em style={{ color:'var(--gold)' }}>200 → 2000+</em>
        </p>
        <img src="assets/maia.png" alt=""
          style={{
            width: 220, height: 220, objectFit:'contain',
            marginTop: -10, marginLeft:'auto', display:'block',
            filter:'drop-shadow(0 14px 20px rgba(0,0,0,.45))',
            animation:'pwBob 6s var(--ease-soft) infinite',
          }} />
      </div>
      <div style={{
        position:'relative', zIndex:2,
        marginTop: 8,
      }}>
        <RatingDial value={1700} min={200} max={2000} dark label="MAIA · DIAL" />
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// INSTRUMENT ROW — the Codex panel, restyled as a "what you'll see when
// you train" section.
// ──────────────────────────────────────────────────────────────────────
function InstrumentRow(){
  return (
    <section style={{ padding: '40px 28px 24px', maxWidth: 1320, margin:'0 auto', position:'relative' }}>
      <div className="pw-reveal" style={{
        display:'flex', justifyContent:'space-between', alignItems:'flex-end',
        marginBottom: 24, gap: 24, flexWrap:'wrap',
      }}>
        <div>
          <Kicker>Your instruments</Kicker>
          <h2 style={{
            marginTop: 10, fontSize: 50, letterSpacing:'-.045em', lineHeight: 1.02,
            fontFamily:'Fraunces, serif',
          }}>
            A reading room for<br/>
            <em style={{ fontStyle:'italic', color:'var(--gold)' }}>your sight.</em>
          </h2>
        </div>
        <p style={{ maxWidth: 400, color:'var(--ink-soft)', fontSize: 14.5, lineHeight: 1.55 }}>
          Every session updates your instruments. Read them together — weakness,
          progress, and the right drill to do next at a glance.
        </p>
      </div>

      <div className="pw-reveal" style={{
        '--pw-d':'120ms',
        display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr', gap: 16,
      }}>
        <InstrumentCard title="LEDGER · SIGHT" hint="↑ +6.4 wk">
          <div style={{ display:'flex', alignItems:'baseline', gap: 12 }}>
            <span style={{
              fontFamily:'Fraunces, serif', fontWeight: 700,
              fontSize: 80, letterSpacing:'-.05em', lineHeight: 1,
              fontVariationSettings:'"opsz" 144, "SOFT" 30',
              background:'linear-gradient(180deg, var(--ink), #4a4138)',
              WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent',
            }}>1442</span>
            <span style={{
              fontFamily:'Fraunces, serif', fontStyle:'italic',
              fontSize: 16, color:'var(--ink-soft)',
              maxWidth:'22ch',
            }}>est. board-vision rating, last 14 sessions</span>
          </div>
          <div style={{ marginTop: 8 }}>
            <Sparkline
              points={[1380, 1392, 1395, 1388, 1402, 1411, 1408, 1415, 1422, 1418, 1430, 1426, 1438, 1442]}
              color="var(--gold)" height={86} />
          </div>
          <div style={{
            display:'flex', justifyContent:'space-between',
            fontFamily:'JetBrains Mono, monospace', fontSize: 9,
            fontWeight: 800, letterSpacing:'.18em', color:'var(--ink-muted)',
            marginTop: 4,
          }}>
            {['M','T','W','T','F','S','S','M','T','W','T','F','S','S'].map((d,i) =>
              <span key={i}>{d}</span>)}
          </div>
        </InstrumentCard>

        <InstrumentCard title="LIVE · EVAL" hint="+1.4">
          <div style={{ display:'flex', alignItems:'center', justifyContent:'center', padding:'10px 0' }}>
            <EvalBar value={1.4} max={5} height={200} depth={22} />
          </div>
          <p style={{
            marginTop: 6, fontFamily:'Fraunces, serif', fontStyle:'italic',
            fontSize: 13, color:'var(--ink-soft)', lineHeight: 1.5,
          }}>
            Stockfish breathes here — depth 22 in your last position.
          </p>
        </InstrumentCard>

        <div style={{
          padding: 22, borderRadius: 18,
          background: 'linear-gradient(160deg, #181519 0%, #2a1f24 100%)',
          color: '#fff7e6',
          border:'1px solid rgba(255,247,230,.16)',
          position:'relative', overflow:'hidden',
        }}>
          <span style={{
            position:'absolute', right:-40, top:-60,
            fontFamily:'Fraunces, serif', fontSize: 240,
            color:'rgba(216,106,145,.12)', lineHeight: 1, pointerEvents:'none',
          }}>♛</span>
          <div style={{
            display:'flex', justifyContent:'space-between',
            fontFamily:'JetBrains Mono, monospace', fontSize: 10,
            fontWeight:800, letterSpacing:'.18em', textTransform:'uppercase',
            color:'rgba(255,247,230,.55)',
            paddingBottom: 8, borderBottom:'1px solid rgba(255,247,230,.12)',
            position:'relative', zIndex: 1,
          }}>
            <span>Maia · dial</span>
            <span style={{ color:'var(--rose)' }}>● 1700</span>
          </div>
          <div style={{ position:'relative', zIndex: 1, marginTop: 14 }}>
            <RatingDial value={1700} min={200} max={2000} dark label="" />
          </div>
          <BrassGauge label="Sight"    value={62} color="var(--gold)" dark delta={3} />
          <BrassGauge label="Calc"     value={48} color="var(--olive)" dark delta={1} />
          <BrassGauge label="Memory"   value={71} color="var(--blue)" dark delta={-2} />
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// SPARRING PANEL — last-game review (carried from Hunt direction)
// ──────────────────────────────────────────────────────────────────────
function SparringPanel(){
  return (
    <section style={{ padding: '40px 28px 24px', maxWidth: 1320, margin:'0 auto' }}>
      <div className="pw-reveal" style={{
        position:'relative', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0,
        borderRadius: 32, overflow:'hidden',
        border: '1px solid var(--line-strong)',
        boxShadow: '0 30px 60px -25px rgba(48,37,22,.22)',
      }}>
        <div style={{
          padding: '40px 36px',
          background: 'linear-gradient(180deg, var(--paper-card), var(--paper-200))',
        }}>
          <Kicker>Last game · sparring</Kicker>
          <h2 style={{
            marginTop: 10, fontSize: 42, letterSpacing:'-.04em', lineHeight: 1.04,
            fontFamily:'Fraunces, serif',
          }}>
            A review that<br/><em style={{ fontStyle:'italic', color:'var(--gold)' }}>names what you did.</em>
          </h2>
          <p style={{
            marginTop: 16, color:'var(--ink-soft)', fontSize: 16, lineHeight: 1.55,
            maxWidth: '44ch',
          }}>
            Load your last game from PGN or paste a FEN. Pawnther classifies every
            move, finds the recurring patterns, and queues the right drill.
          </p>
          <ul style={{ listStyle:'none', margin:'20px 0 24px', padding:0, display:'grid', gap: 10 }}>
            {['Stockfish-backed move classification, with a human reason.',
              'Pattern notes that find the habit, not the move.',
              'Every weakness feeds the next training set.'].map(t => (
              <li key={t} style={{ display:'flex', gap:10, fontSize: 14.5, color:'var(--ink)' }}>
                <span style={{ color:'var(--gold)', flex:'0 0 auto' }}>✓</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <CTAButton variant="gold">Open analysis →</CTAButton>
        </div>

        <div style={{
          position:'relative',
          padding: '40px 36px',
          background:
            'radial-gradient(60% 80% at 80% 10%, rgba(216,106,145,.28), transparent 60%),' +
            'radial-gradient(50% 70% at 10% 90%, rgba(110,138,160,.28), transparent 60%),' +
            'linear-gradient(160deg, #181519 0%, #221d20 60%, #2a1f24 100%)',
          color: '#fffaf2',
          overflow:'hidden',
        }}>
          <span style={{
            position:'absolute', right: -50, top: -90,
            fontFamily:'Fraunces, serif', fontSize: 460, lineHeight: 1,
            color:'rgba(216,106,145,.10)', pointerEvents:'none',
          }}>♛</span>

          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18 }}>
            <strong style={{ fontSize: 13, letterSpacing:'.02em' }}>Sparring · last game</strong>
            <span style={{
              display:'inline-flex', alignItems:'center', gap: 6,
              padding:'6px 11px', borderRadius:999,
              background:'rgba(243,226,230,.16)',
              color:'#f3e2e6', border:'1px solid rgba(243,226,230,.28)',
              fontSize: 11, fontWeight: 800, fontFamily:'JetBrains Mono, monospace',
              letterSpacing:'.1em', textTransform:'uppercase',
            }}>♛ Maia 1700</span>
          </div>

          <div style={{
            padding: 16, borderRadius: 14,
            background:'rgba(255,255,255,.06)',
            marginBottom: 16,
          }}>
            <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:10.5,
              color:'rgba(255,250,242,.6)', fontWeight:800,
              textTransform:'uppercase', letterSpacing:'.16em' }}>
              Result · loss in 34 moves
            </div>
            <div style={{ fontFamily:'Fraunces, serif', fontStyle:'italic',
              fontSize: 24, fontWeight: 600, letterSpacing:'-.02em', marginTop:6 }}>
              Knight dropped on <em style={{ color:'var(--gold)' }}>move 18</em>
            </div>
            <div style={{ fontSize:13, color:'rgba(255,250,242,.7)', marginTop:6 }}>
              After 17.Qxd5 you walked into a fork on c7.
            </div>
          </div>

          <div style={{ display:'grid', gap: 10 }}>
            {[
              ['d6',  56, 'var(--gold)', 'Best · solid'],
              ['Nc6', 29, 'var(--blue)', 'Sound'],
              ['e6',  18, 'var(--rose)', 'Inaccuracy'],
            ].map(([sq, pct, col, note]) => (
              <div key={sq} style={{
                display:'grid', gridTemplateColumns:'48px 1fr 100px 40px',
                gap: 10, alignItems:'center',
                fontFamily:'JetBrains Mono, monospace', fontSize: 12, fontWeight: 800,
              }}>
                <span>{sq}</span>
                <span style={{ height:8, borderRadius:999, background:'rgba(255,255,255,.10)', overflow:'hidden' }}>
                  <span style={{ display:'block', height:'100%', width:`${pct}%`,
                    background: `linear-gradient(90deg, ${col}, rgba(255,255,255,.4))`,
                    borderRadius: 999 }} />
                </span>
                <span style={{
                  color: 'rgba(255,250,242,.6)', textTransform:'uppercase',
                  fontSize: 9.5, letterSpacing:'.14em', fontWeight: 700,
                }}>{note}</span>
                <span style={{ textAlign:'right' }}>{pct}%</span>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 16, padding: '12px 14px', borderRadius: 14,
            background:'rgba(255,255,255,.06)',
            border:'1px solid rgba(255,255,255,.10)',
          }}>
            <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10,
              color:'rgba(255,250,242,.6)', fontWeight:800,
              letterSpacing:'.14em', textTransform:'uppercase', marginBottom: 4 }}>
              Recommended drill
            </div>
            <div style={{ fontSize: 13, fontWeight: 800 }}>
              Knight forks after queen trades · 6 min
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
function PricingPreview(){
  return (
    <section style={{ padding: '40px 28px 24px', maxWidth: 1320, margin:'0 auto' }}>
      <div className="pw-reveal" style={{
        display:'flex', justifyContent:'space-between', alignItems:'flex-end',
        marginBottom: 28, gap: 24, flexWrap:'wrap',
      }}>
        <div>
          <Kicker>Pricing</Kicker>
          <h2 style={{
            marginTop: 10, fontSize: 50, letterSpacing:'-.045em',
            fontFamily:'Fraunces, serif',
          }}>
            Free is real. <em style={{ fontStyle:'italic', color:'var(--gold)' }}>Paid is honest.</em>
          </h2>
        </div>
        <p style={{ maxWidth: 380, color:'var(--ink-soft)', fontSize: 14.5, lineHeight: 1.55 }}>
          Free covers all seven exercises with daily caps and unranked Maia sparring.
          Pro removes caps and funds the heavier review features.
        </p>
      </div>

      <div className="pw-reveal" style={{
        '--pw-d':'120ms',
        position:'relative',
        display:'grid', gridTemplateColumns:'1fr 1fr', gap: 0,
        borderRadius: 36, overflow:'hidden',
        border:'1px solid var(--line-strong)',
        boxShadow: '0 30px 60px -25px rgba(48,37,22,.18)',
      }}>
        <div style={{
          padding: 40,
          background:'linear-gradient(180deg, #fffdf6, #f6ecda)',
        }}>
          <Kicker color="var(--gold)">Free · trainer</Kicker>
          <h3 style={{
            marginTop: 12, fontSize: 48, letterSpacing:'-.04em',
            fontFamily:'Fraunces, serif', fontVariationSettings:'"opsz" 144, "SOFT" 50',
          }}>Trainer</h3>
          <div style={{
            fontFamily:'Fraunces, serif', fontWeight: 700,
            fontSize: 64, letterSpacing:'-.05em', marginTop: 14, lineHeight: 1,
          }}>€0<small style={{
            fontFamily:'Inter', fontSize: 13, fontWeight: 700,
            color:'var(--ink-muted)',
          }}> / forever</small></div>
          <ul style={{ listStyle:'none', padding:0, margin:'22px 0 24px', display:'grid', gap: 10 }}>
            {['Daily caps: 3 beginner sets, 2 intermediate, 1 advanced',
              'Maia 2 sparring with adjustable rating',
              'Opening tree (read-only)',
              'Basic analysis on last 3 games'].map(t => (
              <li key={t} style={{ display:'flex', gap:10, fontSize: 14, color:'var(--ink)' }}>
                <span style={{ color:'var(--gold)', flex:'0 0 auto' }}>✓</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <CTAButton variant="ghost" style={{ width:'100%', justifyContent:'center' }}>Start free</CTAButton>
        </div>

        <div style={{
          position:'relative', overflow:'hidden',
          padding: 40,
          background:
            'radial-gradient(60% 80% at 80% 10%, rgba(216,106,145,.28), transparent 60%),' +
            'radial-gradient(50% 70% at 10% 90%, rgba(227,155,68,.28), transparent 60%),' +
            'linear-gradient(160deg, #1a1612, #2a221c)',
          color:'#fff7e6',
        }}>
          <span style={{
            position:'absolute', top: 18, right: 18,
            fontFamily:'JetBrains Mono, monospace', fontSize: 10,
            fontWeight: 800, letterSpacing:'.18em', textTransform:'uppercase',
            color:'var(--gold-soft)',
            padding:'5px 11px', borderRadius: 999,
            background:'rgba(255,255,255,.04)', border:'1px solid rgba(241,223,177,.4)',
          }}>Most loved</span>
          <Kicker color="var(--gold-soft)">Pro</Kicker>
          <h3 style={{
            marginTop: 12, fontSize: 48, letterSpacing:'-.04em',
            fontFamily:'Fraunces, serif',
            fontVariationSettings:'"opsz" 144, "SOFT" 50',
          }}>Pawnther Pro</h3>
          <div style={{
            fontFamily:'Fraunces, serif', fontWeight: 700,
            fontSize: 64, letterSpacing:'-.05em', marginTop: 14, lineHeight: 1,
          }}>€4.99<small style={{
            fontFamily:'Inter', fontSize: 13, fontWeight: 700,
            color:'rgba(255,250,242,.55)',
          }}> / mo · yearly</small></div>
          <ul style={{ listStyle:'none', padding:0, margin:'22px 0 24px', display:'grid', gap: 10 }}>
            {['Everything in Trainer, unlimited',
              'Maia 2 line play and memory modes as they land',
              'Opening Improver + Remember-the-Line',
              'Deeper Stockfish review and pattern notes',
              'Cloud sync across devices'].map(t => (
              <li key={t} style={{ display:'flex', gap:10, fontSize: 14, color:'#fff7e6' }}>
                <span style={{ color:'var(--gold-soft)', flex:'0 0 auto' }}>✓</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
          <CTAButton variant="gold" style={{ width:'100%', justifyContent:'center' }}>See Pro →</CTAButton>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
function FinalCTA(){
  return (
    <section style={{ padding: '40px 28px 24px', maxWidth: 1320, margin:'0 auto' }}>
      <div className="pw-reveal" style={{
        position:'relative', overflow:'hidden',
        padding: '44px 36px', borderRadius: 28,
        background:
          'radial-gradient(60% 60% at 80% 20%, rgba(216,106,145,.20), transparent 60%),' +
          'radial-gradient(60% 60% at 20% 80%, rgba(227,155,68,.20), transparent 60%),' +
          'linear-gradient(160deg, #0e0a08, #1a1411)',
        color:'#fff7e6',
        display:'grid', gridTemplateColumns:'1fr auto', gap: 24, alignItems:'center',
      }}>
        <span style={{
          position:'absolute', right: -40, top: -50,
          fontFamily:'serif', fontSize: 320,
          color:'rgba(227,155,68,.07)', pointerEvents:'none',
        }}>♞</span>
        <div>
          <Kicker color="var(--gold-soft)">Early access</Kicker>
          <h2 style={{
            marginTop: 10, fontSize: 56, letterSpacing:'-.045em', lineHeight: 1.02,
            color:'#fff7e6', fontFamily:'Fraunces, serif', maxWidth:'18ch',
          }}>
            Join the hunt.<br/>
            <em style={{ fontStyle:'italic', color:'var(--gold)' }}>Train to see.</em>
          </h2>
          <p style={{ marginTop: 12, color:'rgba(255,247,230,.7)', maxWidth:'44ch', fontSize: 15 }}>
            Android first — iOS coming after launch. One free Pro month for early joiners.
          </p>
        </div>
        <form onSubmit={e => { e.preventDefault(); e.currentTarget.querySelector('button').textContent='Saved ✓'; }}
          style={{
            display:'flex', gap: 6, padding: 6, borderRadius: 999,
            background:'rgba(255,255,255,.08)', border:'1px solid rgba(255,255,255,.2)',
            minWidth: 360,
          }}>
          <input type="email" placeholder="your@email.com"
            style={{
              flex: 1, border: 0, background: 'transparent', outline: 'none',
              color:'#fff7e6', padding:'0 12px', fontWeight:500,
            }} />
          <button type="submit" style={{
            padding:'10px 16px', borderRadius:999,
            background:'var(--gold)', color:'#1a120a', fontWeight:800, fontSize:13,
            cursor:'pointer', border: 0,
          }}>Join waitlist</button>
        </form>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
function FCard({ accent, icon, title, desc, delay }){
  const colors = {
    gold:  ['rgba(227,155,68,.16)', 'var(--gold)'],
    olive: ['rgba(141,152,112,.16)', 'var(--olive)'],
    blue:  ['rgba(110,138,160,.16)', 'var(--blue)'],
    rose:  ['rgba(183,122,134,.16)', 'var(--rose)'],
  }[accent];
  return (
    <div className="pw-reveal" style={{
      '--pw-d': `${delay}ms`,
      position:'relative', overflow:'hidden',
      padding: 22, borderRadius: 22,
      background:'linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62))',
      border:'1px solid var(--line)',
      boxShadow:'0 8px 24px rgba(48,37,22,.06)',
    }}>
      <span style={{
        position:'absolute', left:0, top: 18, bottom: 18, width: 3,
        background: colors[1], borderRadius: 2,
      }} />
      <div style={{
        width: 46, height: 46, borderRadius: 14,
        display:'grid', placeItems:'center',
        background: colors[0], color: colors[1],
        marginBottom: 14,
      }}>{icon}</div>
      <h3 style={{ fontSize: 22, fontFamily:'Fraunces, serif', fontWeight: 700, letterSpacing:'-.03em' }}>{title}</h3>
      <p style={{ marginTop: 6, color: 'var(--ink-soft)', fontSize: 14.5, lineHeight: 1.5 }}>{desc}</p>
    </div>
  );
}

function Ic({ name }){
  const c = { stroke:'currentColor', strokeWidth: 2, strokeLinecap:'round', strokeLinejoin:'round', fill:'none' };
  const map = {
    grid:   <svg viewBox="0 0 24 24" width="22" height="22" {...c}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>,
    target: <svg viewBox="0 0 24 24" width="22" height="22" {...c}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/></svg>,
    knight: <svg viewBox="0 0 24 24" width="22" height="22" {...c}><path d="M7 21h10"/><path d="M9 21V13c0-3 1-6 4-7l4 2-2 3"/><path d="M11 11l-2 2"/></svg>,
    memory: <svg viewBox="0 0 24 24" width="22" height="22" {...c}><path d="M4 7h16M4 12h16M4 17h16M7 4v16M12 4v16M17 4v16"/></svg>,
  };
  return map[name] || null;
}

Object.assign(window, { HomePage });