// Pawnprint — main landing page
const { useState: uS, useEffect: uE, useRef: uR } = React;

const TWEAKS_DEFAULT = /*EDITMODE-BEGIN*/{
  "headline_variant": "mistakes",
  "primary_cta": "Connect Chess.com — It's Free",
  "show_hero_badge": true,
  "gold_intensity": "warm"
} /*EDITMODE-END*/;

const HEADLINES = {
  mistakes: { h: <>Every blunder is a <em>lesson</em> waiting to happen.</>, t: "Pawnprint turns your mistakes into your training plan — and coaches your child in language they actually understand." },
  soul: { h: <>The <em>soul of chess</em>, taught in your language.</>, t: "Pawnprint imports your games, finds your blunders with Stockfish, and turns them into puzzles coached by the classical masters." },
  coach: { h: <>Your games. Your puzzles. <em>Your coach.</em></>, t: "The first chess trainer built from your child's own games — not someone else's. Free to start, always." }
};

function Nav() {
  const [scrolled, setScrolled] = uS(false);
  uE(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <a href="#top" className="brand">
          <Mark size={30} />
          <Wordmark size={22} />
        </a>
        <div className="nav-links">
          <a href="#loop">The Loop</a>
          <a href="#modes">Training</a>
          <a href="#difference">Difference</a>
          <a href="#coaches">For Clubs</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <a href="/login" className="nav-signin">Sign In</a>
          <a href="#signup" className="btn btn-primary" style={{ padding: '12px 20px', fontSize: 11 }}>Sign Up <span className="arrow">→</span></a>
        </div>
      </div>
    </nav>);

}

function Hero({ tweaks }) {
  const copy = HEADLINES[tweaks.headline_variant] || HEADLINES.mistakes;
  return (
    <section className="hero container" id="top">
      <div className="hero-glow" />
      <div className="hero-grid">
        <div>
          {tweaks.show_hero_badge &&
          <div className="eyebrow left" style={{ marginBottom: 28 }}>
              <span>A Scholastic Chess Academy</span>
            </div>
          }
          <h1>{copy.h}</h1>
          <p className="tagline">{copy.t}</p>
          <div className="ctas">
            <a href="#signup" className="btn btn-primary">
              {tweaks.primary_cta} <span className="arrow">→</span>
            </a>
            <a href="#loop" className="btn btn-ghost">See How It Works</a>
          </div>
          <div className="stat-row">
            <div className="stat"><span className="k">Any Age</span><span className="v">Beginner → Master</span></div>
            <div className="stat"><span className="k">Free</span><span className="v">To Start</span></div>
            <div className="stat"><span className="k">Stockfish 17</span><span className="v">Engine</span></div>
          </div>
        </div>
        <div className="hero-scene">
          <HeroCoach />
        </div>
      </div>
    </section>);

}

function Problem() {
  const pains = [
  { cost: '$50–150', unit: '/ hour', title: 'Human Coach', body: 'Expensive. Hard to schedule. Impossible every day — and the mistakes keep compounding in between.' },
  { cost: '1 in 1000', unit: 'personal', title: 'Puzzle Apps', body: 'Generic positions from anonymous games. None of them show your child the exact pattern they just missed.' },
  { cost: 'Age 7 = Age 17', unit: 'vocabulary', title: 'The Explanations', body: '"Develop the initiative on the kingside." A 2400-player wrote that. A nine-year-old is reading it.' }];

  return (
    <section className="section problem container">
      <div className="kicker">Chapter I · The Problem</div>
      <div className="problem-quote" style={{ marginTop: 32 }}>
        You keep making the same mistakes. And nobody can tell you why — in language you understand — every single day.
      </div>
      <div style={{ marginTop: 48 }}><Flourish glyph="♜ ♞ ♝" /></div>
      <div className="problem-pains">
        {pains.map((p) =>
        <div key={p.title} className="pain gold-frame">
            <span className="corner-tr"></span><span className="corner-bl"></span>
            <div className="cost">{p.cost}<small> {p.unit}</small></div>
            <h4>{p.title}</h4>
            <p>{p.body}</p>
          </div>
        )}
      </div>
    </section>);

}

const LOOP_STEPS = [
{ t: 'Play on Chess.com', d: 'Your child plays their normal games — rated, unrated, rapid, blitz, it all counts.' },
{ t: 'Import in one click', d: 'Connect once. Every new game flows in automatically. Nothing to upload.' },
{ t: 'Analyze with Stockfish', d: 'A real engine — not an LLM guessing — finds the exact moment the game turned.' },
{ t: 'Puzzle the blunder', d: 'That exact board position becomes a drill, scheduled with spaced repetition.' },
{ t: 'Coach in their voice', d: 'An AI trained on Capablanca, Tarrasch, and Nimzowitsch explains — at their age and reading level.' },
{ t: 'Play again, sharper', d: 'The pattern becomes automatic. The next game, the same trap looks obvious.' }];


function Loop() {
  const [active, setActive] = uS(0);
  uE(() => {
    const i = setInterval(() => setActive((a) => (a + 1) % LOOP_STEPS.length), 3200);
    return () => clearInterval(i);
  }, []);
  return (
    <section className="section container" id="loop">
      <div className="kicker">Chapter II · The Loop</div>
      <h2 className="display" style={{ marginTop: 18 }}>Six steps. One continuous <em>training</em> ritual.</h2>
      <p className="lede">Most platforms give you puzzles. Pawnprint gives you a loop — and the loop keeps tightening until the mistake disappears.</p>
      <div className="loop-wrap">
        <div className="loop-steps">
          {LOOP_STEPS.map((s, i) =>
          <div key={i} className={`loop-step ${active === i ? 'active' : ''}`} onMouseEnter={() => setActive(i)}>
              <div className="num">{String(i + 1).padStart(2, '0')}</div>
              <div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
          )}
        </div>
        <div className="loop-visual">
          <LoopCycle active={active} onHover={setActive} />
        </div>
      </div>
    </section>);

}

function Modes() {
  // Three "rooms." The Training Hub exposes 10+ exercises + the puzzle library.
  // Edit the `hubExercises` array to rename / add / remove — the UI scales.
  const hubExercises = [
    { name: 'My Blunders',         note: 'Your own mistakes, on SRS' },
    { name: 'Mixed Training',      note: 'Your blunders + 5.4M puzzles' },
    { name: 'K+Q vs K Drill',      note: 'Endgame — more coming soon' },
    { name: 'Stalemate Traps',     note: 'Avoid the half-point' },
    { name: 'Lichess Puzzles Only',note: 'Pure Lichess library' },
    { name: 'Find the Danger',     note: 'Defensive scan — unique to Pawnprint' },
    { name: 'Flash Scan',          note: 'Rapid board read' },
    { name: 'Move Judge',          note: 'Rate the candidate' },
    { name: 'Compare Positions',   note: 'Spot the difference' },
    { name: 'Transfer Test',       note: 'Same pattern, new board' },
    { name: "Master's Move",       note: 'Guess the GM choice' },
    { name: 'Memory Recall',       note: 'Reconstruct the position' },
    { name: 'Critical Moment',     note: 'Find the turning point' },
  ];

  const modes = [
    {
      chapter: 'Mode I',
      title: 'Pawnprint Fundamentals Academy',
      shortTitle: 'PFA',
      sub: 'The guided curriculum — from "how the pieces move" to tactical fluency.',
      body: 'Structured lessons from absolute beginner through club-strong. Every concept is grounded in the classical pedagogical canon — Capablanca, Tarrasch, Nimzowitsch — scaffolded by age and rating.',
      rows: ['rnbqkbnr', 'pppppppp', '........', '........', '........', '........', 'PPPPPPPP', 'RNBQKBNR'],
      highlights: [],
      tags: ['Age-scaffolded', 'Mastery-gated', 'Progress tracked']
    },
    {
      chapter: 'Mode II',
      title: 'Analyze Games',
      shortTitle: 'Game Review',
      sub: 'Import from Chess.com and Lichess.org — free, unlimited.',
      body: 'Connect your account and every game becomes a lesson. Pawnprint asks "what were you thinking here?" before showing the answer — so your reasoning, not Stockfish\'s, drives the coaching.',
      rows: ['r.bq.rk.', 'pp...ppp', '..n..n..', '..bp....', '..B.P...', '.....N..', 'PPP..PPP', 'RNBQ.RK.'],
      highlights: ['3-3'], threats: ['3-2'],
      integrations: ['Chess.com', 'Lichess.org'],
      tags: ['Socratic', 'Stockfish 17', 'Classical masters cited']
    },
    {
      chapter: 'Mode III',
      title: 'Training Hub',
      shortTitle: 'The Hub',
      sub: '10+ exercises. 5.4 million puzzles. All of your blunders, on SRS.',
      body: 'Every tactical pattern, every defensive habit, every endgame technique — with coaching recommendations that adapt to what you missed yesterday.',
      hub: true,
      exercises: hubExercises,
      stats: [
        { n: '10+', l: 'exercise modes' },
        { n: '5.4M', l: 'curated puzzles' },
        { n: 'SRS', l: 'on your blunders' },
      ],
      tags: ['Adaptive', 'Coached', 'Growing library']
    }
  ];

  return (
    <section className="section container" id="modes">
      <div className="kicker">Chapter III · Three Rooms of Training</div>
      <h2 className="display" style={{ marginTop: 18 }}>Not a puzzle app. A <em>coaching studio</em> in three rooms.</h2>
      <p className="lede" style={{ marginTop: 14 }}>One curriculum. One way to review your games. One hub of exercises and puzzles — all coached, all adapting to you.</p>
      <div className="modes">
        {modes.map((m) =>
        <div key={m.title} className={`mode ${m.hub ? 'mode-hub' : ''}`}>
            <span className="chapter">{m.chapter}</span>
            <h3>{m.title}</h3>
            <div className="sub">{m.sub}</div>
            <p>{m.body}</p>

            {m.hub ? (
              <div className="hub-body">
                <div className="hub-intro">
                  <div className="hub-stats">
                    {m.stats.map(s =>
                      <div key={s.l} className="hub-stat">
                        <span className="hub-stat-n">{s.n}</span>
                        <span className="hub-stat-l">{s.l}</span>
                      </div>
                    )}
                  </div>
                  <div className="tags">{m.tags.map((t) => <span key={t}>{t}</span>)}</div>
                </div>
                <div className="hub-list">
                  <div className="hub-list-head">Exercise modes <span>· growing</span></div>
                  <ul>
                    {m.exercises.map((e, i) =>
                      <li key={e.name}>
                        <span className="hub-ex-num">{String(i + 1).padStart(2, '0')}</span>
                        <span className="hub-ex-name">{e.name}</span>
                        <span className="hub-ex-note">{e.note}</span>
                      </li>
                    )}
                    <li className="hub-more">
                      <span className="hub-ex-num">+</span>
                      <span className="hub-ex-name">New modes added regularly</span>
                      <span className="hub-ex-note">Request-driven roadmap</span>
                    </li>
                  </ul>
                </div>
              </div>
            ) : (
              <>
                {m.integrations && (
                  <div className="mode-integrations">
                    {m.integrations.map(ig => <span key={ig}>✠ {ig}</span>)}
                  </div>
                )}
                <div className="board-wrap">
                  <Board rows={m.rows} highlights={m.highlights || []} threats={m.threats || []} targets={m.targets || []} className="sm" />
                </div>
              </>
            )}

            {!m.hub && <div className="tags">{m.tags.map((t) => <span key={t}>{t}</span>)}</div>}
          </div>
        )}
      </div>
    </section>);

}

function Matrix() {
  const rows = [
  ['Puzzles from YOUR own blunders', 'Generic puzzle database'],
  ['SRS scheduling on YOUR mistakes', 'No SRS — or openings only (Chessable, $30/course)'],
  ['Asks what you were thinking first', '"The best move was Qxf7."'],
  ['Coaching grounded in Capablanca, Tarrasch, Nimzowitsch', 'Pure LLM — no pedagogical authority'],
  ['Vocabulary scales to your age + rating', 'Same words for age 7 and age 17'],
  ['"Find the Danger" defensive mode', '100% offensive tactics only'],
  ['Auto-inserts confidence puzzles after fails', 'No adaptive recovery'],
  ['Stockfish analyzes. AI only explains.', 'GPT-4 doing chess analysis = wrong chess'],
  ['Free tier forever · paid tiers from $2.50/mo (billed annually)', 'Chess.com Premium: $99/yr · Coach: $50–150/hr']];

  return (
    <section className="section container" id="difference">
      <div className="kicker">Chapter IV · What Makes Pawnprint Different</div>
      <h2 className="display" style={{ marginTop: 18 }}>Built from <em>your</em> games. Coached in <em>your</em> language.</h2>
      <p className="lede">Every other platform trains the average child. Pawnprint trains <em>yours</em>.</p>
      <div className="matrix">
        <div className="matrix-head">
          <div className="p"><Mark size={22} /><Wordmark size={16} /></div>
          <div className="e">Everywhere Else</div>
        </div>
        {rows.map((r, i) =>
        <div key={i} className="matrix-row">
            <div className="p">{r[0]}</div>
            <div className="e">{r[1]}</div>
          </div>
        )}
      </div>
    </section>);

}

function VocabSection() {
  // Base (left) card stays Age 7. Right card is switchable across the range.
  const [age, setAge] = uS(12);

  // Per-age response + vocabulary tracker. Handcrafted so each age has
  // age-appropriate words, sentence complexity, and term-tracking.
  const profiles = {
    5: {
      label: 'Age 5 · Unrated',
      meta: '9 terms introduced · 3 acquired',
      msg: <>
        You moved your <span className="new">bishop</span>. But look! The <span className="learned">horse</span> could have hopped right here — and it would be attacking two of your best pieces at the same time. That's called a <span className="new">fork</span>. Super tricky!
      </>,
      terms: [
        { t: 'check', stage: 'ACQUIRED', pct: 100 },
        { t: 'king', stage: 'ACQUIRED', pct: 100 },
        { t: 'horse (knight)', stage: 'REINFORCING', pct: 55 },
        { t: 'fork', stage: 'NEW', pct: 0 },
        { t: 'bishop', stage: 'INTRODUCED', pct: 20 }]
    },
    7: {
      label: 'Age 7 · Unrated',
      meta: '16 terms introduced · 7 acquired',
      msg: <>
        You moved your <span className="new">bishop</span>, but look — your opponent's horse could have jumped here and attacked your <span className="learned">king</span> and your queen at the <em>same time</em>. That kind of double attack is called a <span className="new">fork</span>. Your king has to move first, so you'd lose the queen. Next time, before you move, ask: <em>can anything attack two of my pieces at once?</em>
      </>,
      terms: [
        { t: 'check', stage: 'ACQUIRED', pct: 100 },
        { t: 'king', stage: 'ACQUIRED', pct: 100 },
        { t: 'fork', stage: 'INTRODUCED', pct: 16 },
        { t: 'bishop', stage: 'REINFORCING', pct: 45 },
        { t: 'pin', stage: 'NEW', pct: 0 }]
    },
    9: {
      label: 'Age 9 · USCF 450',
      meta: '28 terms introduced · 14 acquired',
      msg: <>
        Your <span className="learned">bishop</span> move overlooks a <span className="learned">knight fork</span>: <span className="new">Nf7</span> attacks both your <span className="learned">king</span> and queen at once. A knight fork from f7 is a classic beginner trap — the <em>"Fried Liver"</em> pattern your opponent was setting up. Before moving the bishop, scan: <em>what squares are enemy knights three moves away from?</em>
      </>,
      terms: [
        { t: 'knight fork', stage: 'REINFORCING', pct: 70 },
        { t: 'Fried Liver', stage: 'INTRODUCED', pct: 25 },
        { t: 'bishop', stage: 'ACQUIRED', pct: 100 },
        { t: 'development', stage: 'REINFORCING', pct: 55 },
        { t: 'pin', stage: 'INTRODUCED', pct: 30 }]
    },
    12: {
      label: 'Age 12 · USCF 950',
      meta: '48 terms introduced · 30 acquired',
      msg: <>
        Your <span className="learned">bishop</span> development here ignores a tactical shot: <span className="learned">Nf7</span> is a <span className="learned">royal fork</span> — king and queen — winning material by force. Capablanca's rule applies: <em>before every move, confirm all checks, captures, and threats.</em> The geometry of <span className="learned">e5</span> and <span className="learned">c4</span> was already flagging this square for the knight.
      </>,
      terms: [
        { t: 'royal fork', stage: 'ACQUIRED', pct: 100 },
        { t: 'zugzwang', stage: 'REINFORCING', pct: 60 },
        { t: 'outpost', stage: 'ACQUIRED', pct: 100 },
        { t: 'prophylaxis', stage: 'INTRODUCED', pct: 22 },
        { t: 'zwischenzug', stage: 'REINFORCING', pct: 50 }]
    },
    15: {
      label: 'Age 15 · USCF 1680',
      meta: '88 terms introduced · 63 acquired',
      msg: <>
        The <span className="learned">bishop</span> on c4 was already pointed at f7 — the <span className="learned">classical weak square</span> in the Italian. Declining <span className="learned">Nf7</span> misses a forcing line: <span className="learned">Bxf7+ Kxf7 Ng5+</span> recovers the piece with a continuing <span className="learned">royal fork</span> motif. Nimzowitsch on prophylaxis: <em>every move must first answer the opponent's plan.</em>
      </>,
      terms: [
        { t: 'classical weak square', stage: 'ACQUIRED', pct: 100 },
        { t: 'prophylaxis', stage: 'ACQUIRED', pct: 100 },
        { t: 'Italian Game', stage: 'REINFORCING', pct: 75 },
        { t: 'zwischenzug', stage: 'ACQUIRED', pct: 100 },
        { t: 'desperado', stage: 'INTRODUCED', pct: 30 }]
    },
    17: {
      label: 'Age 17 · USCF 1850',
      meta: '110 terms introduced · 89 acquired',
      msg: <>
        The <span className="learned">Bxf7+ Kxf7 Ng5+</span> sequence converts a static advantage into a concrete <span className="learned">royal fork</span>. Post-fork, you're +3 with <span className="learned">outpost</span> on e6 and a <span className="learned">weak king</span> unable to castle. Per Dvoretsky: in opposite-castled positions, <em>tempo on the king is worth half a piece.</em> Your bishop move surrendered that tempo.
      </>,
      terms: [
        { t: 'Dvoretsky', stage: 'ACQUIRED', pct: 100 },
        { t: 'opposite castling', stage: 'ACQUIRED', pct: 100 },
        { t: 'desperado', stage: 'ACQUIRED', pct: 100 },
        { t: 'Zwischenschach', stage: 'REINFORCING', pct: 65 },
        { t: 'schwerpunkt', stage: 'INTRODUCED', pct: 28 }]
    }
  };

  const base = profiles[7];
  const compare = profiles[age];
  const ages = [5, 7, 9, 12, 15, 17];

  return (
    <section className="section container">
      <div className="kicker">Chapter V · Vocabulary Scaffolding</div>
      <h2 className="display" style={{ marginTop: 18 }}>The same blunder. Six <em>very</em> different lessons.</h2>
      <p className="lede">Every user has a personal vocabulary tracker. Words move from <em>introduced</em>, to <em>reinforcing</em>, to <em>acquired</em> — and only acquired words are used without a plain-language definition. No other chess platform does this.</p>

      <div className="vocab-age-tabs">
        <span className="vocab-age-label">Compare Age 7 vs.</span>
        {ages.filter(a => a !== 7).map((a, i, arr) =>
          <button key={a} onClick={() => setAge(a)} className={`vocab-age-tab ${age === a ? 'active' : ''}`}>
            Age {a}
          </button>
        )}
      </div>

      <div className="vocab-demo">
        <div className="vocab-card">
          <div className="vocab-head">
            <span className="who">{base.label}</span>
            <span className="meta">{base.meta}</span>
          </div>
          <div className="vocab-msg">{base.msg}</div>
          <div className="vocab-tracker">
            <div className="vocab-tracker-label">Vocabulary · this response</div>
            {base.terms.map((t) =>
              <div key={t.t} className={`vocab-term ${t.stage === 'ACQUIRED' ? 'acquired' : ''}`}>
                <span className="t">{t.t}</span>
                <div className="bar"><div className="fill" style={{ width: `${t.pct}%` }} /></div>
                <span className="stage">{t.stage}</span>
              </div>
            )}
          </div>
        </div>

        <div className="vocab-card" style={{ borderColor: 'var(--gold)' }} key={age}>
          <div className="vocab-head">
            <span className="who">{compare.label}</span>
            <span className="meta">{compare.meta}</span>
          </div>
          <div className="vocab-msg">{compare.msg}</div>
          <div className="vocab-tracker">
            <div className="vocab-tracker-label">Vocabulary · this response</div>
            {compare.terms.map((t) =>
              <div key={t.t} className={`vocab-term ${t.stage === 'ACQUIRED' ? 'acquired' : ''}`}>
                <span className="t">{t.t}</span>
                <div className="bar"><div className="fill" style={{ width: `${t.pct}%` }} /></div>
                <span className="stage">{t.stage}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function CoachingMoment() {
  const [thought, setThought] = uS('');
  const [submitted, setSubmitted] = uS(false);
  const rows = ['r.bqkbnr', 'pppp.ppp', '..n.....', '....p...', '..B.P...', '.....N..', 'PPPP.PPP', 'RNBQK..R'];
  return (
    <section className="section container">
      <div className="kicker">Chapter VI · The Wow Moment</div>
      <h2 className="display" style={{ marginTop: 18 }}>Before it tells you the answer, it <em>asks the question.</em></h2>
      <p className="lede">This is the first chess trainer that listens before it speaks. Your reasoning shapes the coaching.</p>

      <div className="coach-wrap">
        <div className="coach-stage gold-frame">
          <div className="kicker" style={{ marginBottom: 14, color: 'var(--ivory-mute)', letterSpacing: '0.22em' }}>Move 12 · You played Nxe5?</div>
          <Board rows={rows} highlights={['2-2']} targets={['3-4']} className="board-sm" />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--ivory-mute)' }}>
            <span>EVAL · +0.3 → <span style={{ color: 'var(--crimson-bright)' }}>−2.8</span></span>
            <span>STOCKFISH 17</span>
          </div>
        </div>

        <div className="coach-dialog">
          <div className="coach-line ask">
            <div className="from">Coach · asking</div>
            <div className="msg">What were you thinking when you took the pawn?</div>
            <div className="think-input">
              <input
                value={thought}
                onChange={(e) => setThought(e.target.value)}
                placeholder={submitted ? '' : 'Type what you saw in the position…'}
                onKeyDown={(e) => {if (e.key === 'Enter') setSubmitted(true);}} />
              
              <button onClick={() => setSubmitted(true)}>Send ↵</button>
            </div>
          </div>

          {submitted &&
          <>
              <div className="coach-line" style={{ borderColor: 'var(--gold-faint)' }}>
                <div className="from user">You</div>
                <div className="msg" style={{ fontStyle: 'normal', fontFamily: 'var(--f-body)' }}>
                  {thought || "I thought I was winning a free pawn."}
                </div>
              </div>
              <div className="coach-line">
                <div className="from">Coach · responding</div>
                <div className="msg">
                  A natural thought — the pawn looked loose. But your knight was the only defender of the d4 square, and the Bishop on c4 was already aimed at f7. Tarrasch wrote <em>"before every capture, count the cost of leaving."</em> You left your king's diagonal undefended for one free pawn.
                </div>
                <div className="cite">— Grounded in Tarrasch, <em>Die moderne Schachpartie</em> (1912)</div>
              </div>
            </>
          }
        </div>
      </div>
    </section>);

}

function Fundamentals() {
  const modules = [
  { n: 'I', t: 'How pieces move', done: true },
  { n: 'II', t: 'Check & checkmate', done: true },
  { n: 'III', t: 'Capturing & defending', done: true },
  { n: 'IV', t: 'Opening principles', done: true },
  { n: 'V', t: 'Basic tactics', done: true },
  { n: 'VI', t: 'Endgame patterns', done: true },
  { n: 'VII', t: 'Pawn structure', done: true },
  { n: 'VIII', t: 'King safety', done: true },
  { n: 'IX', t: 'Stalemate traps', done: true },
  { n: 'X', t: 'Graduation match', done: true }];

  return (
    <section className="section container" id="fundamentals">
      <div className="kicker">Chapter VII · Pawnprint Fundamentals</div>
      <h2 className="display" style={{ marginTop: 18 }}>Complete the Fundamentals. Earn a <em>free month</em> of Apprentice.</h2>
      <p className="lede">Ten free modules. Every piece, every pattern, every mate-in-one a 7-year-old needs before they sit down with a clock. Finish all ten — we'll send you a full month of Apprentice on us. No card required.</p>

      <div className="pfa">
        <div className="pfa-scroll gold-frame">
          <span className="corner-tr"></span><span className="corner-bl"></span>

          {/* Top brand band, spans full width */}
          <div className="pfa-brand-band">
            <Mark size={32} />
            <Wordmark size={20} />
            <span className="pfa-brand-tag">Fundamentals Academy</span>
          </div>

          {/* Title row */}
          <div className="pfa-title-row">
            <div className="pfa-title">Certificate of Completion</div>
            <div className="pfa-sub"><em>Pawnprint Fundamentals</em> · 10 of 10 modules</div>
          </div>

          {/* Modules */}
          <div className="pfa-modules">
            {modules.map((m) =>
            <div key={m.n} className="pfa-module">
                <span className="roman">{m.n}</span>
                <span className="name">{m.t}</span>
                <span className="check">✔</span>
              </div>
            )}
          </div>

          {/* Reward banner, spans bottom */}
          <div className="pfa-reward-banner">
            <div className="pfa-reward-left">
              <div className="pfa-reward-label">Reward Unlocked</div>
              <div className="pfa-reward-amt">1 Month Apprentice</div>
            </div>
            <div className="pfa-reward-right">
              <div className="pfa-reward-note">
                <strong>Kids (COPPA):</strong> no card required, ever.<br/>
                <strong>Adults:</strong> verify email + card — billed day 30, reminders at day 23 &amp; 28.
              </div>
            </div>
          </div>
        </div>

        <div className="pfa-rules">
          <h4>Free vs. Apprentice — what unlocks</h4>
          <table className="pfa-compare">
            <thead>
              <tr>
                <th></th>
                <th className="col-free">Free</th>
                <th className="col-app">Apprentice</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>Pawnprint Fundamentals</td><td>✓</td><td>✓</td></tr>
              <tr><td>Find the Danger mode</td><td>✓</td><td>✓</td></tr>
              <tr><td>Game imports / month</td><td>5</td><td className="hl">Unlimited</td></tr>
              <tr><td>Puzzles / day</td><td>5</td><td className="hl">Unlimited</td></tr>
              <tr><td>SRS on your blunders</td><td>—</td><td className="hl">✓</td></tr>
              <tr><td>Coaching depth</td><td>1–2 sentences</td><td className="hl">Full — cited</td></tr>
              <tr><td>Full 42-skill lesson library</td><td>—</td><td className="hl">✓</td></tr>
              <tr><td>Progress dashboard + weakness radar</td><td>—</td><td className="hl">✓</td></tr>
              <tr><td>Titled Tuesday Report (PDF)</td><td>—</td><td className="hl">✓</td></tr>
            </tbody>
          </table>
          <p className="pfa-compare-foot">Graduate the Fundamentals and all of the above unlock for 30 days — then you drop back to Free unless you keep Apprentice.</p>
        </div>
      </div>
    </section>);

}

function Pricing() {
  const [billing, setBilling] = uS('annual');
  const tiers = [
  { id: 'free', name: 'Free', mo: '$0', yr: '$0', per: '', who: 'Try before you buy', features: ['Full Pawnprint Fundamentals', '5 game imports / month', '5 puzzles / day', 'Find the Danger mode', 'Coaching · 1–2 sentences'], cta: 'Start Free', highlight: false },
  { id: 'family', name: 'Family', mo: '$7.99', yr: '$59.99', per: '/mo, billed yearly', who: 'Up to 4 players — one billing account', features: ['Everything in Apprentice', 'Up to 4 player profiles', 'Unlimited imports + puzzles', 'Full lesson library (42 skills)', 'Full coaching depth', 'Titled Tuesday Report (PDF)'], cta: 'Start 7-day Free Trial', highlight: false }];

  const compact = [
  { id: 'apprentice', name: 'Apprentice', mo: '$4.99', yr: '$29.99', per: '~$2.50/mo', who: 'Single player, casual learner' },
  { id: 'gm', name: 'GM in Training', mo: '$11.99', yr: '$54.99', per: '~$4.58/mo', who: 'Serious · competitive', featured: true },
  { id: 'coach', name: 'Coach', mo: '$21.99', yr: '$84.99', per: '~$7.08/mo', who: 'Clubs · up to 25 students' }];


  return (
    <section className="section pricing container" id="signup">
      <div className="kicker">Chapter VIII · Tiers of Training</div>
      <h2 className="display" style={{ margin: '18px auto 0' }}>Free to start. <em>Always.</em></h2>
      <p className="promise">Upgrade when your child does. The Free tier stays free — forever, no ads, no dark patterns.</p>

      <div className="billing-toggle">
        <button className={billing === 'monthly' ? 'on' : ''} onClick={() => setBilling('monthly')}>Monthly</button>
        <button className={billing === 'annual' ? 'on' : ''} onClick={() => setBilling('annual')}>Annual <span className="save">— 4 months free</span></button>
      </div>

      <div className="tier-pair">
        {tiers.map((t) =>
        <div key={t.id} className={`tier-card ${t.highlight ? 'hl' : ''}`}>
            <div className="tier-name">{t.name}</div>
            <div className="tier-price">
              <span className="amt">{billing === 'annual' ? t.yr : t.mo}</span>
              <span className="per">{billing === 'annual' && t.per ? t.per : t.mo === '$0' ? 'forever' : '/ month'}</span>
            </div>
            <div className="tier-who">{t.who}</div>
            <ul className="tier-feats">
              {t.features.map((f) => <li key={f}><span className="chk">✠</span>{f}</li>)}
            </ul>
            <a href="#" className={`btn ${t.highlight ? 'btn-primary' : 'btn-ghost'}`} style={{ width: '100%', justifyContent: 'center' }}>{t.cta}</a>
          </div>
        )}
      </div>

      <div className="tier-strip">
        <div className="tier-strip-label">Also available ·</div>
        {compact.map((c) =>
        <div key={c.id} className={`strip-cell ${c.featured ? 'featured' : ''}`}>
            {c.featured && <span className="rec">Recommended</span>}
            <div className="strip-name">{c.name}</div>
            <div className="strip-price">{billing === 'annual' ? c.yr : c.mo}<span className="strip-sub">{billing === 'annual' ? ` · ${c.per}` : '/ month'}</span></div>
            <div className="strip-who">{c.who}</div>
          </div>
        )}
      </div>

      <div className="pricing-footnote">
        <span>✠ Cancel anytime</span>
        <span>✠ 7-day free trial on paid tiers</span>
        <span>✠ Students of Coach-enrolled programs pay $2.99/mo</span>
      </div>

      <div style={{ marginTop: 56 }}><Flourish glyph="✦ ✦ ✦" /></div>
    </section>);

}

function Clubs() {
  return (
    <section className="section container" id="coaches">
      <div className="clubs">
        <div>
          <div className="kicker">Chapter IX · For Coaches & Clubs</div>
          <h2 className="display" style={{ marginTop: 18, fontSize: 'clamp(30px, 3.2vw, 44px)' }}>One flat rate. <em>Every</em> student, covered.</h2>
          <p>
            <strong style={{ color: 'var(--gold)', fontFamily: 'var(--f-head)', letterSpacing: '0.04em' }}>$21.99/month.</strong> Up to 25 students. No per-seat overflow. Six full scholarship slots you assign yourself — no admin queue, no approval process.
          </p>
          <p style={{ marginTop: 12 }}>
            Scholastic directors, after-school programs, homeschool co-ops, and military youth programming (SKIESUnlimited-eligible) can onboard an entire roster in minutes. Students pay their own discounted rate — $2.99/month or $19.99/year — so the real cost lives in the hands of families, not your budget line.
          </p>
          <div className="coach-bullets">
            <div className="cb"><span className="cb-k">$21.99</span><span className="cb-v">Flat, per month</span></div>
            <div className="cb"><span className="cb-k">25</span><span className="cb-v">Students included</span></div>
            <div className="cb"><span className="cb-k">6</span><span className="cb-v">Scholarship slots</span></div>
            <div className="cb"><span className="cb-k">$2.99</span><span className="cb-v">Student rate / mo</span></div>
          </div>
          <div className="ctas" style={{ marginTop: 28 }}>
            <a href="#" className="btn btn-primary">Start Coach Trial <span className="arrow">→</span></a>
            <a href="#" className="btn btn-ghost">Club Onboarding</a>
          </div>
        </div>
        <div className="gold-frame" style={{ padding: 32, background: 'var(--ink-1)' }}>
          <span className="corner-tr"></span><span className="corner-bl"></span>
          <div style={{ fontFamily: 'var(--f-body)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.5, color: 'var(--ivory)' }}>
            "I have twenty-six kids in my club and thirty minutes per student, per week. Pawnprint is the only thing on the market that gives them something real to do on the other six days."
          </div>
          <div style={{ marginTop: 20, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.18em', color: 'var(--ivory-mute)', textTransform: 'uppercase' }}>
            [ Chess club director · placeholder quote ]
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{ marginBottom: 16 }}>
              <Mark size={32} />
              <Wordmark size={24} />
            </div>
            <p style={{ color: 'var(--ivory-mute)', fontSize: 15, maxWidth: 320, lineHeight: 1.55 }}>
              Your games. Your puzzles. Your coach.<br />
              Chess training that speaks your language.
            </p>
          </div>
          <div>
            <h5>Product</h5>
            <a href="#loop">The Loop</a>
            <a href="#modes">Training Modes</a>
            <a href="#fundamentals">Fundamentals</a>
            <a href="#difference">What's Different</a>
            <a href="#signup">Pricing</a>
          </div>
          <div>
            <h5>For Educators</h5>
            <a href="#coaches">Coaches & Clubs</a>
            <a href="#">Schools</a>
            <a href="#">Military Families</a>
            <a href="#">Homeschool Co-ops</a>
          </div>
          <div>
            <h5>Community</h5>
            <a href="#">Parent Guide</a>
            <a href="#">Kid-Safe Promise</a>
            <a href="#">Blog</a>
            <a href="#">Contact</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Praxis Protocol LLC · Built by a chess parent in North Carolina</span>
          <span>♙ Built for players 2–122</span>
        </div>
      </div>
    </footer>);

}

// Tweaks panel (editmode)
function Tweaks({ tweaks, setTweaks }) {
  const [open, setOpen] = uS(false);
  uE(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  if (!open) return null;
  return (
    <div className="tweaks-panel open">
      <h5>♛ Tweaks</h5>

      <div className="tweak-row">
        <span>Headline</span>
        <div className="chips">
          {['mistakes', 'soul', 'coach'].map((v) =>
          <span key={v} className={`chip ${tweaks.headline_variant === v ? 'active' : ''}`} onClick={() => update('headline_variant', v)}>{v}</span>
          )}
        </div>
      </div>

      <div className="tweak-row" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
        <span>Primary CTA</span>
        <input
          value={tweaks.primary_cta}
          onChange={(e) => update('primary_cta', e.target.value)}
          style={{ width: '100%', background: 'var(--ink-0)', border: '1px solid var(--gold-line)', color: 'var(--ivory)', padding: '8px 10px', fontFamily: 'var(--f-body)', fontSize: 13 }} />
        
      </div>

      <div className="tweak-row">
        <span>Hero badge</span>
        <div className="chips">
          <span className={`chip ${tweaks.show_hero_badge ? 'active' : ''}`} onClick={() => update('show_hero_badge', true)}>on</span>
          <span className={`chip ${!tweaks.show_hero_badge ? 'active' : ''}`} onClick={() => update('show_hero_badge', false)}>off</span>
        </div>
      </div>

      <div className="tweak-row">
        <span>Gold</span>
        <div className="chips">
          {['warm', 'bright', 'antique'].map((v) =>
          <span key={v} className={`chip ${tweaks.gold_intensity === v ? 'active' : ''}`} onClick={() => update('gold_intensity', v)}>{v}</span>
          )}
        </div>
      </div>
    </div>);

}

function App() {
  const [tweaks, setTweaks] = uS(TWEAKS_DEFAULT);
  uE(() => {
    const map = {
      warm: { g: '#d4af37', d: '#b8941f', l: '#e8c560' },
      bright: { g: '#ecc94b', d: '#c7a224', l: '#f4d976' },
      antique: { g: '#b89a3a', d: '#8f7624', l: '#cfb75c' }
    };
    const c = map[tweaks.gold_intensity] || map.warm;
    document.documentElement.style.setProperty('--gold', c.g);
    document.documentElement.style.setProperty('--gold-deep', c.d);
    document.documentElement.style.setProperty('--gold-light', c.l);
  }, [tweaks.gold_intensity]);

  return (
    <>
      <div className="noise-bg" />
      <Nav />
      <Hero tweaks={tweaks} />
      <Problem />
      <Loop />
      <Modes />
      <Matrix />
      <VocabSection />
      <CoachingMoment />
      <Fundamentals />
      <Pricing />
      <Clubs />
      <Footer />
      <Tweaks tweaks={tweaks} setTweaks={setTweaks} />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);