// ============================================================
// KNOCKOUT — competitive elimination with spectator mode
// 6 artboards across 5 sections
// ============================================================

// ─── Heart icon ──────────────────────────────────────────────────
function Heart({ state = 'filled' }) {
  // state: filled, lost, crit
  return (
    <span className={`kn-heart ${state}`}>
      <svg viewBox="0 0 18 16">
        <path d="M9 14.5 C2 10 0 6 2 3 C3.5 1 6.5 1 9 4 C11.5 1 14.5 1 16 3 C18 6 16 10 9 14.5z"
              strokeWidth="1.4" strokeLinejoin="round"/>
      </svg>
    </span>
  );
}

function Hearts({ have = 3, total = 3, crit = false }) {
  return (
    <span className="kn-hearts">
      {Array.from({ length: total }).map((_, i) => (
        <Heart key={i}
          state={i < have ? (crit && i === have - 1 ? 'crit' : 'filled') : 'lost'}/>
      ))}
    </span>
  );
}

// ─── 1. Host setup ────────────────────────────────────────────────
function KNHostSetup() {
  return (
    <SdScope theme="bio">
      <LaptopFrame url="hscscience.com.au/games/knockout/new">
        <AppBar crumbs={['Multiplayer', 'New Knockout']}/>

        <div className="kn-setup-hero">
          <div className="kn-setup-eyebrow">KNOCKOUT · LAST ONE STANDING</div>
          <h1 className="kn-setup-title">Survive the questions.</h1>
          <p className="kn-setup-sub">Everyone starts with hearts; wrong answers cost one. Eliminated students don't disappear — they become Spectators who can predict, vote, and (with enough coins) revive a teammate. Final three play sudden death.</p>
        </div>

        <div className="sd-setup-grid">
          <div className="sd-panel">
            <div className="sd-panel-h">
              <h3>Question pool</h3>
              <span className="sd-panel-h-meta">3 selected · 38 questions</span>
            </div>
            <div className="sd-tabs">
              <div className="sd-tab on">By lesson</div>
              <div className="sd-tab">By module</div>
              <div className="sd-tab">By dot point</div>
              <div className="sd-tab">Wrong-answer pool</div>
            </div>
            <div className="sd-search">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ color: 'var(--adv-muted)' }}>
                <circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/>
              </svg>
              <input placeholder="Search lessons, topics, or paste a dot-point code…" defaultValue="module 6" />
            </div>
            <div className="sd-lesson-list">
              {[
                { tag: 'bio',  name: 'Module 6 review pack',                qs: 18, sel: true },
                { tag: 'bio',  name: 'Mistakes pool · Module 6',            qs: 12, sel: true },
                { tag: 'bio',  name: 'Module 7 · Infectious disease intro', qs: 8,  sel: true },
                { tag: 'chem', name: 'Module 4 · Periodicity',              qs: 14, sel: false },
                { tag: 'phy',  name: 'Module 1 · Kinematics review',        qs: 11, sel: false },
              ].map((l, i) => (
                <div key={i} className={`sd-lrow ${l.sel ? 'on' : ''}`}>
                  <div className="sd-lrow-check">
                    <svg viewBox="0 0 24 24"><path d="M4 12l5 5L20 6"/></svg>
                  </div>
                  <span className={`sd-lrow-tag ${l.tag}`}>{l.tag}</span>
                  <span className="sd-lrow-name">{l.name}</span>
                  <span className="sd-lrow-qs">{l.qs} Qs</span>
                </div>
              ))}
            </div>
            <div className="sd-pool-summary" style={{ background: 'var(--adv-coral-soft)' }}>
              <div className="sd-pool-num" style={{ color: 'var(--adv-coral-deep)' }}>38</div>
              <div className="sd-pool-label">
                <strong style={{ color: 'var(--adv-coral-deep)' }}>questions in the pool — drawn at random.</strong><br/>
                The game ends when one player is left, regardless of how many Qs we've used.<br/>
                <span style={{ color: 'var(--adv-muted)', fontSize: 11.5 }}>Difficulty ramps up after every elimination.</span>
              </div>
            </div>
          </div>

          <div className="sd-panel">
            <div className="sd-panel-h">
              <h3>Survival rules</h3>
              <span className="sd-panel-h-meta">~11 min for 24 players</span>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Hearts each
                <small>Wrong answers cost one</small>
              </div>
              <div className="kn-hearts-pick">
                <button className="kn-hearts-pick-btn">2<Heart state="filled"/></button>
                <button className="kn-hearts-pick-btn on">3<Heart state="filled"/></button>
                <button className="kn-hearts-pick-btn">5<Heart state="filled"/></button>
              </div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Seconds per question
                <small>Faster Qs as the field thins</small>
              </div>
              <div className="sd-radio-bar" style={{ width: 200 }}>
                <button>10s</button>
                <button className="on">15s</button>
                <button>20s</button>
              </div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Sudden death at final 3
                <small>One wrong = elimination. No spectator revives.</small>
              </div>
              <div className="sd-toggle on"></div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Spectator mode
                <small>Eliminated players stay engaged</small>
              </div>
              <div className="sd-toggle on"></div>
            </div>

            <div className="kn-pup-row">
              <div className="kn-pup-card">
                <div className="kn-pup-card-icon"><Icon name="target"/></div>
                <div>
                  <div className="kn-pup-name">Predictions</div>
                  <div className="kn-pup-desc">Bet who'll miss next Q · earn coins on hit</div>
                </div>
              </div>
              <div className="kn-pup-card">
                <div className="kn-pup-card-icon revive"><Icon name="bulb"/></div>
                <div>
                  <div className="kn-pup-name">Revive</div>
                  <div className="kn-pup-desc">Pool 60 coins · bring a player back</div>
                </div>
              </div>
              <div className="kn-pup-card">
                <div className="kn-pup-card-icon shield"><Icon name="flag"/></div>
                <div>
                  <div className="kn-pup-name">Wildcard vote</div>
                  <div className="kn-pup-desc">Specs pick the next topic</div>
                </div>
              </div>
              <div className="kn-pup-card">
                <div className="kn-pup-card-icon"><Icon name="bulb"/></div>
                <div>
                  <div className="kn-pup-name">Shield (live)</div>
                  <div className="kn-pup-desc">Once per game · block one miss</div>
                </div>
              </div>
            </div>

            <div className="sd-set-row" style={{ marginTop: 8 }}>
              <div className="sd-set-label">
                Champion reward
                <small>Capped per day</small>
              </div>
              <div style={{
                background: 'var(--adv-gold-soft)', color: 'var(--adv-gold-deep)',
                padding: '6px 12px', borderRadius: 99,
                fontSize: 12, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <Icon name="crown"/> Knockout title + 50 coins
              </div>
            </div>
          </div>
        </div>

        <div className="sd-setup-footer" style={{ background: 'linear-gradient(90deg, #2d1416, #8a3f33)' }}>
          <div className="sd-setup-footer-left">
            <div className="sd-footer-stat"><small>POOL</small><span>38 Qs</span></div>
            <div className="sd-footer-stat"><small>HEARTS</small><span>3 each</span></div>
            <div className="sd-footer-stat"><small>TIMER</small><span>15s per Q</span></div>
            <div className="sd-footer-stat"><small>EST. RUNTIME</small><span>~11 minutes</span></div>
          </div>
          <button className="wc-cta wc-cta-gold" style={{ fontSize: 16 }}>
            Generate game code <Icon name="chevronR"/>
          </button>
        </div>
      </LaptopFrame>
    </SdScope>
  );
}

// ─── 2. Live arena (projector) ───────────────────────────────────
const KN_ROSTER = [
  { name: 'Maya K.',    char: 'helix',  hearts: 3, state: 'alive' },
  { name: 'Jordan T.',  char: 'beaker', hearts: 2, state: 'alive' },
  { name: 'Priya S.',   char: 'cell',   hearts: 3, state: 'alive' },
  { name: 'Felix W.',   char: 'bolt',   hearts: 1, state: 'crit', tag: 'last heart' },
  { name: 'Aisha R.',   char: 'leaf',   hearts: 2, state: 'alive' },
  { name: 'Nathan P.',  char: 'pi',     hearts: 2, state: 'alive' },
  { name: 'Yara M.',    char: 'mole',   hearts: 1, state: 'crit', tag: 'last heart' },
  { name: 'Theo C.',    char: 'ph',     hearts: 2, state: 'alive' },
  { name: 'Ava B.',     char: 'sigma',  hearts: 3, state: 'alive' },
  { name: 'Kai S.',     char: 'prism',  hearts: 2, state: 'alive' },
  { name: 'Lila J.',    char: 'cell',   hearts: 3, state: 'alive' },
  { name: 'Rhea K.',    char: 'helix',  hearts: 2, state: 'alive', tag: 'shield' },
  { name: 'Hugo M.',    char: 'leaf',   hearts: 3, state: 'alive' },
  { name: 'Eli T.',     char: 'wave',   hearts: 2, state: 'alive' },
  // eliminated
  { name: 'Ben L.',     char: 'atom',   hearts: 0, state: 'eliminated' },
  { name: 'Sienna H.',  char: 'wave',   hearts: 0, state: 'eliminated' },
  { name: 'Owen D.',    char: 'beaker', hearts: 0, state: 'eliminated' },
  { name: 'Maddie R.',  char: 'pi',     hearts: 0, state: 'eliminated' },
  { name: 'Cleo N.',    char: 'mole',   hearts: 0, state: 'eliminated' },
  { name: 'Ash V.',     char: 'atom',   hearts: 0, state: 'eliminated' },
  { name: 'Zara F.',    char: 'helix',  hearts: 0, state: 'eliminated' },
  { name: 'Sam Y.',     char: 'sigma',  hearts: 0, state: 'eliminated' },
];

function KNArena() {
  const alive = KN_ROSTER.filter(r => r.state !== 'eliminated');
  const dead  = KN_ROSTER.filter(r => r.state === 'eliminated');
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="LIVE · Q 9">
        <div className="kn-arena">
          <div className="kn-arena-top">
            <div className="kn-arena-head">
              <div className="kn-arena-head-eyebrow">KNOCKOUT · ROUND 9</div>
              <h1>Who's still in.</h1>
            </div>
            <div className="kn-arena-stat-row">
              <div className="kn-arena-stat">
                <strong>{alive.length}</strong>
                <small>STILL IN</small>
              </div>
              <div className="kn-arena-stat elim">
                <strong>{dead.length}</strong>
                <small>SPECTATING</small>
              </div>
              <div className="kn-arena-stat">
                <strong>2</strong>
                <small>ON LAST HEART</small>
              </div>
            </div>
          </div>

          <div className="kn-arena-body">
            <div>
              <div className="kn-arena-section-label">IN THE FIGHT</div>
              <div className="kn-arena-grid">
                {alive.map((p, i) => (
                  <div key={i} className={`kn-player ${p.state}`}>
                    {p.tag && <span className={`kn-player-tag ${p.tag === 'shield' ? 'gold' : ''}`}>{p.tag}</span>}
                    <CharGlyph kind={p.char} size={44}/>
                    <Hearts have={p.hearts} total={3} crit={p.state === 'crit'}/>
                    <div className="kn-player-name">{p.name}</div>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="kn-arena-section-label eliminated">SPECTATING — STILL EARNING COINS</div>
              <div className="kn-arena-grid">
                {dead.slice(0, 8).map((p, i) => (
                  <div key={i} className="kn-player eliminated">
                    <CharGlyph kind={p.char} size={40} className="kn-player-char"/>
                    <Hearts have={0} total={3}/>
                    <div className="kn-player-name">{p.name}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="kn-arena-bottom">
            <div className="kn-arena-q">
              <span className="kn-arena-q-eyebrow">Q9 · CELL MEMBRANE · MCQ</span>
              <div className="kn-arena-q-text">
                Facilitated diffusion of glucose across a membrane requires which of the following?
              </div>
            </div>
            <div className="kn-arena-timer">
              <div className="kn-arena-time-num">06</div>
              <div className="kn-arena-time-bar"><div style={{ width: '40%' }}></div></div>
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 3. Student question (phone) — still alive ────────────────────
function KNStudentQuestion() {
  return (
    <SdScope theme="bio">
      <PhoneFrame time="9:48">
        <div className="kn-sq">
          <div className="kn-sq-head">
            <div className="kn-sq-head-meta">
              <span>KNOCKOUT · <strong>Q9</strong></span>
              <span>14 STILL IN</span>
            </div>
            <div className="kn-sq-me-row">
              <CharGlyph kind="helix" size={42}/>
              <div className="kn-sq-me-name">Maya K.</div>
              <div className="kn-sq-me-hearts">
                <Hearts have={3} total={3}/>
              </div>
            </div>
          </div>

          <div className="kn-opp-ribbon">
            <div className="kn-opp-label">CLOSE TO ELIMINATION</div>
            <div className="kn-opp-list">
              <div className="kn-opp-pill crit">
                <CharGlyph kind="bolt" size={20}/>
                <span className="kn-opp-pill-name">Felix W.</span>
                <div className="kn-opp-pill-hearts"><Hearts have={1} total={3} crit/></div>
              </div>
              <div className="kn-opp-pill crit">
                <CharGlyph kind="mole" size={20}/>
                <span className="kn-opp-pill-name">Yara M.</span>
                <div className="kn-opp-pill-hearts"><Hearts have={1} total={3} crit/></div>
              </div>
              <div className="kn-opp-pill">
                <CharGlyph kind="beaker" size={20}/>
                <span className="kn-opp-pill-name">Jordan T.</span>
                <div className="kn-opp-pill-hearts"><Hearts have={2} total={3}/></div>
              </div>
              <div className="kn-opp-pill">
                <CharGlyph kind="leaf" size={20}/>
                <span className="kn-opp-pill-name">Aisha R.</span>
                <div className="kn-opp-pill-hearts"><Hearts have={2} total={3}/></div>
              </div>
            </div>
          </div>

          <div className="kn-sq-timer-row">
            <div className="kn-sq-time-num">06<small>SEC</small></div>
            <button style={{
              background: 'var(--adv-plum-soft)', color: 'var(--adv-plum-deep)',
              border: '1.5px solid var(--adv-plum)',
              fontFamily: 'var(--adv-display)', fontWeight: 800, fontSize: 11,
              padding: '7px 12px', borderRadius: 99, letterSpacing: '0.06em', textTransform: 'uppercase',
              display: 'inline-flex', alignItems: 'center', gap: 5,
            }}>
              <Icon name="flag"/> Use Shield
            </button>
          </div>

          <div className="kn-sq-body">
            <div className="kn-sq-q">
              <div className="kn-sq-q-eyebrow">CELL MEMBRANE · MCQ</div>
              <div className="kn-sq-q-text">
                Facilitated diffusion of glucose across a membrane requires which of the following?
              </div>
            </div>

            <div className="sd-sq-answers">
              <div className="sd-sq-answer a">
                <div className="sd-sq-answer-shape"><AnswerShape letter="A"/></div>
                <div className="sd-sq-answer-letter">A</div>
              </div>
              <div className="sd-sq-answer b">
                <div className="sd-sq-answer-shape"><AnswerShape letter="B"/></div>
                <div className="sd-sq-answer-letter">B</div>
              </div>
              <div className="sd-sq-answer c locked">
                <div className="sd-sq-answer-shape"><AnswerShape letter="C"/></div>
                <div className="sd-sq-answer-letter">C</div>
              </div>
              <div className="sd-sq-answer d">
                <div className="sd-sq-answer-shape"><AnswerShape letter="D"/></div>
                <div className="sd-sq-answer-letter">D</div>
              </div>
            </div>

            <div style={{
              marginTop: 12, padding: '10px 12px',
              background: 'var(--adv-bg-deeper)', borderRadius: 10,
              fontSize: 11.5, color: 'var(--adv-ink-soft)', textAlign: 'center',
            }}>
              Locked in <strong style={{ color: 'var(--adv-ink)' }}>C · A transport protein</strong>. Reveal when timer ends.
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 4. Spectator mode (phone) — the novel screen ─────────────────
function KNSpectator() {
  return (
    <SdScope theme="bio">
      <PhoneFrame time="9:49">
        <div className="kn-spec">
          <div className="kn-spec-head">
            <div className="kn-spec-eyebrow">YOU'RE OUT · BUT NOT DONE</div>
            <div className="kn-spec-title">Spectator mode.</div>
            <div className="kn-spec-sub">
              Predict who'll miss next, vote on wildcards, save up coins to revive a teammate. Stay in the game.
            </div>
            <div className="kn-spec-coins">
              <Icon name="coin"/> 40 / 60 to revive
            </div>
          </div>

          <div className="kn-spec-body">
            {/* Predict who misses */}
            <div className="kn-spec-card">
              <div className="kn-spec-card-h">
                <div>
                  <div className="kn-spec-card-eyebrow">Q9 · BET BEFORE TIMER ENDS</div>
                  <div className="kn-spec-card-title">Who'll miss this question?</div>
                </div>
                <span className="kn-spec-card-prize">
                  <Icon name="coin"/> +15
                </span>
              </div>
              <div className="kn-bet-opts">
                <div className="kn-bet-opt on">
                  <CharGlyph kind="bolt" size={28}/>
                  <div>
                    <div className="kn-bet-opt-name">Felix W.</div>
                    <div className="kn-bet-opt-meta">1 heart · 2 wrong recently</div>
                  </div>
                </div>
                <div className="kn-bet-opt">
                  <CharGlyph kind="mole" size={28}/>
                  <div>
                    <div className="kn-bet-opt-name">Yara M.</div>
                    <div className="kn-bet-opt-meta">1 heart · slow lock-ins</div>
                  </div>
                </div>
                <div className="kn-bet-opt">
                  <CharGlyph kind="beaker" size={28}/>
                  <div>
                    <div className="kn-bet-opt-name">Jordan T.</div>
                    <div className="kn-bet-opt-meta">2 hearts</div>
                  </div>
                </div>
                <div className="kn-bet-opt">
                  <CharGlyph kind="leaf" size={28}/>
                  <div>
                    <div className="kn-bet-opt-name">No one misses</div>
                    <div className="kn-bet-opt-meta">+25 if you're right</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Revive */}
            <div className="kn-spec-card kn-revive">
              <div className="kn-spec-card-h" style={{ marginBottom: 8 }}>
                <div className="kn-spec-card-title">Revive a teammate</div>
                <span className="kn-revive-cost">⚡ 60 COINS</span>
              </div>
              <div className="kn-revive-body">
                <div className="kn-revive-icon"><Icon name="bulb"/></div>
                <div className="kn-revive-text">
                  Next revive at <strong>60</strong>. Game picks the spectator with most coins; that player picks who comes back.
                  <div className="kn-revive-name">Ben L. is queued</div>
                </div>
                <button className="kn-revive-btn locked">+ 20</button>
              </div>
            </div>

            {/* Live thumbnail */}
            <div className="kn-watch-live">
              <span className="kn-watch-pulse"></span>
              <div className="kn-watch-text">
                Watching <strong>Q9 · Cell membrane</strong> · <strong>14 still in</strong> · <strong>06s left</strong>
              </div>
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 5. Sudden death (projector) ──────────────────────────────────
function KNSuddenDeath() {
  const finalists = [
    { name: 'Maya K.',  char: 'helix',  hearts: 3, stat: '11 correct · 0 misses' },
    { name: 'Priya S.', char: 'cell',   hearts: 2, stat: '10 correct · 1 miss'   },
    { name: 'Ava B.',   char: 'sigma',  hearts: 3, stat: '11 correct · 0 misses' },
  ];
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="SUDDEN DEATH · FINAL 3">
        <div className="kn-sudden">
          <div className="kn-sudden-head">
            <div className="kn-sudden-eyebrow">SUDDEN DEATH</div>
            <div className="kn-sudden-title">Final three.</div>
            <div className="kn-sudden-sub">One wrong answer = out. No shields. No revives. Harder questions.</div>
          </div>

          <div className="kn-sudden-finalists">
            {finalists.map((f, i) => (
              <div key={i} className="kn-finalist">
                <div className="kn-finalist-char">
                  <CharGlyph kind={f.char} size={80}/>
                </div>
                <div className="kn-finalist-name">{f.name}</div>
                <div className="kn-finalist-stat">{f.stat}</div>
                <div className="kn-finalist-hearts">
                  <Hearts have={f.hearts} total={3}/>
                </div>
              </div>
            ))}
          </div>

          <div className="kn-sudden-rules">
            <span className="kn-sudden-rule"><Icon name="clock"/> 10s per Q</span>
            <span className="kn-sudden-rule"><Icon name="x"/> No shields</span>
            <span className="kn-sudden-rule"><Icon name="flag"/> 1 mistake = out</span>
            <span className="kn-sudden-rule"><Icon name="users"/> 19 spectators watching</span>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 6. Champion screen ───────────────────────────────────────────
function KNChampion() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="CHAMPION">
        <div className="kn-champ">
          <div className="kn-champ-head">
            <div className="kn-champ-eyebrow">KNOCKOUT · MODULE 6 · CHAMPION</div>
            <div className="kn-champ-title"><em>Last one standing.</em></div>
          </div>

          <div className="kn-champ-portrait">
            <div className="kn-champ-portrait-frame">
              <CharGlyph kind="helix" size={120}/>
            </div>
          </div>
          <div className="kn-champ-name">Maya K.</div>
          <div className="kn-champ-sub">14 correct · zero misses · 11m 41s</div>

          <div className="kn-champ-stats">
            <div className="kn-cstat">
              <div className="kn-cstat-label">RUNNER-UP</div>
              <div className="kn-cstat-val">Priya S.</div>
              <div className="kn-cstat-sub">Eliminated on Q14 (immune response).</div>
            </div>
            <div className="kn-cstat">
              <div className="kn-cstat-label">THIRD</div>
              <div className="kn-cstat-val">Ava B.</div>
              <div className="kn-cstat-sub">Eliminated on Q13 (transmission).</div>
            </div>
            <div className="kn-cstat">
              <div className="kn-cstat-label">SPECTATOR MVP</div>
              <div className="kn-cstat-val">Owen D.</div>
              <div className="kn-cstat-sub">94 predicted coins. Triggered 2 revives.</div>
            </div>
            <div className="kn-cstat">
              <div className="kn-cstat-label">HARDEST Q</div>
              <div className="kn-cstat-val">Q11</div>
              <div className="kn-cstat-sub">Took out 4 players in one round. Sent to revise.</div>
            </div>
          </div>

          <div className="kn-champ-footer">
            <div className="kn-revives-list">
              <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '1.4px', color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', marginRight: 8 }}>
                Spectators revived
              </span>
              <span className="kn-revive-pill">
                <CharGlyph kind="atom" size={14}/> Ben L.
              </span>
              <span className="kn-revive-pill">
                <CharGlyph kind="wave" size={14}/> Sienna H.
              </span>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <button className="wc-cta wc-cta-soft" style={{ fontSize: 13, color: '#fff', background: 'rgba(255,255,255,0.1)', borderColor: 'rgba(255,255,255,0.2)', boxShadow: 'none' }}>
                <Icon name="book"/> Send hard Qs to revise
              </button>
              <button className="wc-cta wc-cta-gold" style={{ fontSize: 13 }}>
                Play again <Icon name="chevronR"/>
              </button>
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── Overview ─────────────────────────────────────────────────────
function KNOverview() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#faf3e5',
      padding: 32,
      display: 'flex', flexDirection: 'column', gap: 18,
      fontFamily: 'DM Sans, system-ui, sans-serif',
      color: '#2d3142',
    }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '1.8px', color: '#8a3f33', textTransform: 'uppercase', marginBottom: 4 }}>
          HSCSCIENCE · MULTIPLAYER · GAME TYPE 3
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em' }}>Knockout</div>
          <div style={{ fontSize: 14, color: '#5b5d75', fontWeight: 500 }}>— elimination tournament with spectator engagement.</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 14 }}>
        <div style={{ background: 'linear-gradient(140deg, #2d1416, #8a3f33)', borderRadius: 14, padding: 22, color: '#fff' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 11, fontWeight: 800, letterSpacing: '1.6px', color: '#f4d8de', textTransform: 'uppercase', marginBottom: 4 }}>THE PITCH</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 22, fontWeight: 800, lineHeight: 1.15, marginBottom: 10 }}>
            Three hearts. One wrong answer hurts. Survive.
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)' }}>
            High-tension elimination. Most edtech versions lose 80% of students after they're out. We fix that with spectator mode: eliminated kids predict, vote, save up coins, and bring teammates back. No one disengages.
          </div>
        </div>
        <div style={{ background: '#fff', borderRadius: 14, padding: 18, border: '1.5px solid #e8d4ba' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 6 }}>NOVEL · 1</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Spectator mode (not "you're out, watch")</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Eliminated students get an active loop: predict who'll miss next, vote on the wildcard topic, earn coins, and chip into a revive pool. Re-entry from the dead changes the social dynamic completely.
          </div>
        </div>
        <div style={{ background: '#fff', borderRadius: 14, padding: 18, border: '1.5px solid #e8d4ba' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 6 }}>NOVEL · 2</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Heart visibility — drama you can see</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Everyone's heart count is public on the big screen. Students on their last heart pulse. Phone shows a "close to elimination" ribbon. Tension scales as the field thins.
          </div>
        </div>
        <div style={{ background: '#fff', borderRadius: 14, padding: 18, border: '1.5px solid #e8d4ba' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 6 }}>NOVEL · 3</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Sudden death at final three</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Once it's down to three, the screen takes over with a dedicated sudden-death mode: faster timer, no shields, one miss = out. Every spectator watches a single screen.
          </div>
        </div>
      </div>

      <div style={{
        background: '#fff', border: '1.5px solid #e8d4ba', borderRadius: 14,
        padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8,
      }}>
        {['Host setup', 'Live arena', 'Player phone', 'Spectator phone', 'Sudden death', 'Champion'].map((label, i) => (
          <div key={i} style={{
            background: '#f4d8de', borderRadius: 10, padding: '10px 12px',
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6, background: '#8a3f33', color: '#fff',
              fontFamily: 'Outfit, sans-serif', fontSize: 12, fontWeight: 800,
              display: 'grid', placeItems: 'center',
            }}>{i+1}</div>
            <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 13, fontWeight: 700 }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── App ─────────────────────────────────────────────────────────
function App() {
  return (
    <div className="wc-scope" style={{ background: '#f0eee9', padding: '32px', minHeight: '100vh', overflowY: 'auto' }}>
      <KNOverview/>
      <KNHostSetup/>
      <KNArena/>
      <KNStudentQuestion/>
      <KNSpectator/>
      <KNSuddenDeath/>
      <KNChampion/>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);