// ============================================================
// MIRAGE — social-deduction classroom quiz
// Behavioral spine: paranoia · hidden identity · accusation drama
// ============================================================

// ─── Mask SVG — main visual motif ────────────────────────────────
function MaskSVG({ size = 80, kind = 'mirage', glow = true }) {
  // 'mirage' = full mask with cracks; 'seeker' = open mask; 'mystery' = silhouette
  const colors = {
    mirage:  { fill: '#8a1f2b', edge: '#3a0810', accent: '#d6a85f' },
    seeker:  { fill: '#3a285a', edge: '#160a2a', accent: '#9b7eb8' },
    mystery: { fill: '#2a1a3a', edge: '#0a0510', accent: '#6b5a7a' },
  }[kind];
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <defs>
        <radialGradient id={`mask-${kind}-bg`} cx="50%" cy="40%">
          <stop offset="0%" stopColor={colors.fill}/>
          <stop offset="100%" stopColor={colors.edge}/>
        </radialGradient>
        {glow && (
          <filter id={`mask-glow-${kind}`} x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
            <feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        )}
      </defs>
      {/* Venetian mask outline */}
      <path d="M 14 38 Q 16 22 30 18 Q 50 14 70 18 Q 84 22 86 38 Q 86 56 78 62 Q 64 72 50 72 Q 36 72 22 62 Q 14 56 14 38 Z"
        fill={`url(#mask-${kind}-bg)`} stroke={colors.edge} strokeWidth="2"/>
      {/* eyeholes — empty + ominous */}
      <ellipse cx="34" cy="42" rx="10" ry="7" fill="#0a0510" stroke={colors.accent} strokeWidth="1.5"/>
      <ellipse cx="66" cy="42" rx="10" ry="7" fill="#0a0510" stroke={colors.accent} strokeWidth="1.5"/>
      {kind === 'mirage' && (
        <>
          {/* glowing pupil */}
          <ellipse cx="34" cy="42" rx="3.5" ry="3" fill={colors.accent} filter={glow ? `url(#mask-glow-${kind})` : undefined}/>
          <ellipse cx="66" cy="42" rx="3.5" ry="3" fill={colors.accent} filter={glow ? `url(#mask-glow-${kind})` : undefined}/>
          {/* gold filigree */}
          <path d="M 24 30 Q 30 26 36 28 M 64 28 Q 70 26 76 30" stroke={colors.accent} strokeWidth="1.2" fill="none"/>
          <path d="M 50 30 L 50 36 M 46 33 L 54 33" stroke={colors.accent} strokeWidth="1.2"/>
          {/* crack down face */}
          <path d="M 50 18 L 48 32 L 52 48 L 50 60 L 52 72" stroke={colors.accent} strokeWidth="0.8" fill="none" strokeDasharray="2 1.5" opacity="0.7"/>
          {/* horns */}
          <path d="M 22 22 Q 18 10 26 8 Q 24 16 22 22 Z" fill={colors.fill} stroke={colors.edge} strokeWidth="1.2"/>
          <path d="M 78 22 Q 82 10 74 8 Q 76 16 78 22 Z" fill={colors.fill} stroke={colors.edge} strokeWidth="1.2"/>
        </>
      )}
      {kind === 'seeker' && (
        <>
          {/* peace mark forehead */}
          <circle cx="50" cy="28" r="3" fill={colors.accent}/>
          <path d="M 30 60 Q 50 64 70 60" stroke={colors.accent} strokeWidth="1.5" fill="none"/>
        </>
      )}
      {kind === 'mystery' && (
        <>
          <text x="50" y="50" textAnchor="middle" fontSize="32" fontWeight="800" fill={colors.accent} fontFamily="Outfit">?</text>
        </>
      )}
    </svg>
  );
}

// ─── 1. ROLE REVEAL · YOU ARE THE MIRAGE (mobile) ───────────────
function MgRoleReveal() {
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="2:14">
        <div className="mg-role">
          <div className="mg-bg-smoke"></div>
          <div className="mg-role-head">
            <div className="mg-role-eyebrow">ROUND 1 OF 5 · ROLES DEALT</div>
            <div className="mg-role-stage">
              <div className="mg-role-mask">
                <MaskSVG size={180} kind="mirage"/>
              </div>
              <div className="mg-role-burn"></div>
            </div>
            <div className="mg-role-title-tag">
              <span className="mg-role-title-tag-dot"></span> SECRET ROLE
            </div>
            <div className="mg-role-title">You are<br/>the <em>Mirage</em>.</div>
            <div className="mg-role-sub">
              You will see every correct answer before the question opens. Pick <strong>wrong</strong> to score — but never obviously enough to be voted out.
            </div>
          </div>

          <div className="mg-rules">
            <div className="mg-rules-row">
              <div className="mg-rules-icon">◐</div>
              <div className="mg-rules-text">
                <strong>+ 200 per wrong answer</strong>
                <small>… that the class accepts as a normal mistake</small>
              </div>
            </div>
            <div className="mg-rules-row">
              <div className="mg-rules-icon">⊗</div>
              <div className="mg-rules-text">
                <strong>Caught? — 1 strike</strong>
                <small>Majority vote = out. 3 strikes and you lose the round.</small>
              </div>
            </div>
            <div className="mg-rules-row">
              <div className="mg-rules-icon">▲</div>
              <div className="mg-rules-text">
                <strong>Hide behind hard questions</strong>
                <small>Mistakes look natural when the class average is below 60%.</small>
              </div>
            </div>
          </div>

          <div className="mg-room">
            <div className="mg-room-label">YOUR CLASS · 7 SEEKERS, 1 YOU</div>
            <div className="mg-room-tiles">
              {['F', 'P', 'J', 'A', 'S', 'B', 'N'].map(c => (
                <div key={c} className="mg-room-tile"><MaskSVG size={28} kind="seeker" glow={false}/><small>{c}</small></div>
              ))}
              <div className="mg-room-tile me">
                <MaskSVG size={28} kind="mirage" glow={false}/>
                <small>YOU</small>
              </div>
            </div>
            <div className="mg-room-foot">
              They don't know it's you. <strong>Don't show your hand on Q1.</strong>
            </div>
          </div>

          <button className="mg-role-cta">
            ENTER THE ROOM
            <small>The round opens in 12s · don't get caught</small>
          </button>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 2. LIVE ROUND · BIG SCREEN ──────────────────────────────────
function MgRound() {
  return (
    <SdScope theme="mixed">
      <ProjectorFrame tag="MIRAGE · ROUND 3 OF 5 · CHEMISTRY · MOD 4">
        <div className="mg-round">
          <div className="mg-round-smoke"></div>

          <div className="mg-round-head">
            <div className="mg-round-eyebrow">QUESTION 3 · ALL ANSWERS LOCKED · REVEALING</div>
            <div className="mg-round-q">
              Which of these molecules can form <strong>hydrogen bonds</strong> with water?
            </div>
            <div className="mg-round-answers">
              {[
                { letter: 'A', text: 'CH₄', count: 2 },
                { letter: 'B', text: 'NH₃', count: 4, isCorrect: true },
                { letter: 'C', text: 'CO₂', count: 1 },
                { letter: 'D', text: 'C₂H₆', count: 1 },
              ].map(a => (
                <div key={a.letter} className={`mg-round-ans ${a.letter.toLowerCase()}`}>
                  <div className="mg-round-ans-letter">{a.letter}</div>
                  <div className="mg-round-ans-text">{a.text}</div>
                  <div className="mg-round-ans-count">{a.count}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="mg-round-board">
            <div className="mg-round-board-head">
              <div className="mg-round-board-title">THE ROOM · 8 PLAYERS · WHO PICKED WHAT</div>
              <div className="mg-round-board-timer">
                <span className="mg-round-board-timer-dot"></span>
                ACCUSE IN <strong>18s</strong>
              </div>
            </div>
            <div className="mg-round-players">
              {[
                { name: 'Felix',   pick: 'B', acc: 0, char: 'helix',  status: 'normal' },
                { name: 'Priya',   pick: 'B', acc: 0, char: 'cell',   status: 'normal' },
                { name: 'Jordan',  pick: 'A', acc: 2, char: 'bolt',   status: 'sus' },
                { name: 'Anika',   pick: 'B', acc: 0, char: 'leaf',   status: 'normal' },
                { name: 'Sai',     pick: 'B', acc: 0, char: 'beaker', status: 'normal' },
                { name: 'Ben',     pick: 'D', acc: 1, char: 'atom',   status: 'sus' },
                { name: 'Nia',     pick: 'C', acc: 4, char: 'wave',   status: 'mirage' },
                { name: 'You',     pick: 'A', acc: 1, char: 'helix',  status: 'me' },
              ].map((p, i) => (
                <div key={i} className={`mg-round-player ${p.status}`}>
                  <div className="mg-round-player-portrait">
                    <CharGlyph kind={p.char} size={26}/>
                  </div>
                  <div className="mg-round-player-name">{p.name}</div>
                  <div className={`mg-round-player-pick pick-${p.pick.toLowerCase()}`}>{p.pick}</div>
                  {p.acc > 0 && <div className="mg-round-player-acc">{p.acc} ▲</div>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 3. ACCUSATION PHASE (mobile, seeker view) ──────────────────
function MgAccuse() {
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="2:18">
        <div className="mg-accuse">
          <div className="mg-bg-smoke"></div>

          <div className="mg-accuse-head">
            <div className="mg-accuse-eyebrow">ACCUSATION · 18 SECONDS</div>
            <div className="mg-accuse-title">Who's the <em>Mirage</em>?</div>
            <div className="mg-accuse-sub">
              Tap one player. Q3 was easy — <strong>4 picked NH₃</strong>. Someone picked CO₂.
            </div>
          </div>

          <div className="mg-accuse-grid">
            {[
              { name: 'Felix W.',  hint: 'right 3/3',     char: 'helix',  state: 'safe',  acc: 0 },
              { name: 'Priya S.',  hint: 'right 3/3',     char: 'cell',   state: 'safe',  acc: 0 },
              { name: 'Jordan T.', hint: 'wrong twice',   char: 'bolt',   state: 'sus',   acc: 2 },
              { name: 'Anika R.',  hint: 'right 3/3',     char: 'leaf',   state: 'safe',  acc: 0 },
              { name: 'Sai L.',    hint: 'right 3/3',     char: 'beaker', state: 'safe',  acc: 0 },
              { name: 'Ben K.',    hint: 'wrong once',    char: 'atom',   state: 'mild',  acc: 1 },
              { name: 'Nia H.',    hint: 'wrong twice',   char: 'wave',   state: 'voted', acc: 4 },
            ].map((p, i) => (
              <div key={i} className={`mg-accuse-card ${p.state}`}>
                <div className="mg-accuse-card-portrait">
                  <CharGlyph kind={p.char} size={32}/>
                  {p.acc > 0 && <span className={`mg-accuse-card-acc ${p.state}`}>{p.acc}</span>}
                </div>
                <div className="mg-accuse-card-name">{p.name}</div>
                <div className="mg-accuse-card-hint">{p.hint}</div>
                {p.state === 'voted' && (
                  <div className="mg-accuse-card-voted">YOU VOTED ●</div>
                )}
              </div>
            ))}
          </div>

          <div className="mg-accuse-strip">
            <div className="mg-accuse-strip-row">
              <strong>4 / 7 voted Nia</strong>
              <small>Threshold to remove: 5</small>
            </div>
            <div className="mg-accuse-strip-bar">
              <div className="mg-accuse-strip-bar-fill" style={{ width: '57%' }}></div>
              <div className="mg-accuse-strip-bar-mark"></div>
            </div>
            <div className="mg-accuse-strip-foot">
              <span>Wrong vote? <strong>—50 pts</strong></span>
              <span>Correct vote? <strong>+150 pts</strong></span>
            </div>
          </div>

          <button className="mg-accuse-cta">
            LOCK VOTE · NIA H.
            <small>or tap another player above</small>
          </button>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 4. THE REVEAL · projector ──────────────────────────────────
function MgReveal() {
  return (
    <SdScope theme="mixed">
      <ProjectorFrame tag="MIRAGE · ROUND 3 · VERDICT">
        <div className="mg-reveal">
          <div className="mg-reveal-smoke"></div>

          <div className="mg-reveal-stage">
            <div className="mg-reveal-eyebrow">THE MIRAGE WAS…</div>
            <div className="mg-reveal-mask-row">
              {/* Background — accused players, faded */}
              <div className="mg-reveal-mini">
                <MaskSVG size={68} kind="mystery"/>
                <small>Jordan</small>
              </div>
              <div className="mg-reveal-mini">
                <MaskSVG size={68} kind="mystery"/>
                <small>Ben</small>
              </div>
              <div className="mg-reveal-mask-main">
                <div className="mg-reveal-mask-burst">
                  <svg viewBox="0 0 200 200" width="280" height="280">
                    {Array.from({ length: 24 }).map((_, i) => {
                      const a = (i / 24) * Math.PI * 2;
                      const x1 = 100 + Math.cos(a) * 60;
                      const y1 = 100 + Math.sin(a) * 60;
                      const x2 = 100 + Math.cos(a) * 100;
                      const y2 = 100 + Math.sin(a) * 100;
                      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(214,168,95,0.5)" strokeWidth="2"/>;
                    })}
                  </svg>
                </div>
                <MaskSVG size={180} kind="mirage"/>
                <div className="mg-reveal-mask-name">NIA H.</div>
              </div>
              <div className="mg-reveal-mini">
                <MaskSVG size={68} kind="mystery"/>
                <small>Anika</small>
              </div>
              <div className="mg-reveal-mini">
                <MaskSVG size={68} kind="mystery"/>
                <small>Sai</small>
              </div>
            </div>
            <div className="mg-reveal-verdict">
              <span className="mg-reveal-verdict-tag good">VOTED OUT · 5 / 7</span>
              <span className="mg-reveal-verdict-tag mid">3 ROUNDS LIVE · 2 STRIKES</span>
            </div>
          </div>

          <div className="mg-reveal-board">
            <div className="mg-reveal-board-col">
              <div className="mg-reveal-board-col-head">SEEKERS · +200 EACH</div>
              <div className="mg-reveal-board-list">
                {[
                  { n: 'Felix W.', v: 'voted Nia ✓', pts: '+150', char: 'helix' },
                  { n: 'Priya S.', v: 'voted Nia ✓', pts: '+150', char: 'cell' },
                  { n: 'Anika R.', v: 'voted Nia ✓', pts: '+150', char: 'leaf' },
                  { n: 'Sai L.',   v: 'voted Nia ✓', pts: '+150', char: 'beaker' },
                  { n: 'You',      v: 'voted Nia ✓', pts: '+150', char: 'atom' },
                  { n: 'Jordan T.', v: 'voted Ben ✗', pts: '−50',  char: 'bolt' },
                  { n: 'Ben K.',    v: 'voted Jordan ✗', pts: '−50', char: 'wave' },
                ].map((r, i) => (
                  <div key={i} className="mg-reveal-board-row">
                    <CharGlyph kind={r.char} size={22}/>
                    <span className="mg-reveal-board-name">{r.n}</span>
                    <span className="mg-reveal-board-action">{r.v}</span>
                    <span className={`mg-reveal-board-pts ${r.pts.startsWith('+') ? 'pos' : 'neg'}`}>{r.pts}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="mg-reveal-board-col mirage">
              <div className="mg-reveal-board-col-head">MIRAGE · NIA H.</div>
              <div className="mg-reveal-mirage-card">
                <div className="mg-reveal-mirage-row">
                  <div className="mg-reveal-mirage-row-label">R1</div>
                  <div className="mg-reveal-mirage-row-mid"><strong>Wrong</strong> · class avg 38% · <em>blended in</em></div>
                  <div className="mg-reveal-mirage-row-pts pos">+200</div>
                </div>
                <div className="mg-reveal-mirage-row">
                  <div className="mg-reveal-mirage-row-label">R2</div>
                  <div className="mg-reveal-mirage-row-mid"><strong>Right</strong> · played safe · <em>1 strike</em></div>
                  <div className="mg-reveal-mirage-row-pts">+0</div>
                </div>
                <div className="mg-reveal-mirage-row caught">
                  <div className="mg-reveal-mirage-row-label">R3</div>
                  <div className="mg-reveal-mirage-row-mid"><strong>Wrong · CAUGHT</strong> · class avg 87% · obvious</div>
                  <div className="mg-reveal-mirage-row-pts neg">OUT</div>
                </div>
                <div className="mg-reveal-mirage-foot">
                  Final · <strong>200 pts</strong> · The Mirage <strong>lost this round.</strong> Seekers win.
                </div>
              </div>
              <div className="mg-reveal-next">
                <strong>Next round in 20s.</strong>
                <small>A new Mirage is being chosen…</small>
              </div>
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── OVERVIEW ────────────────────────────────────────────────────
function MgOverview() {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'radial-gradient(ellipse at 50% 0%, #2a0e1a 0%, #1a0e1f 50%, #0d0816 100%)',
      padding: 32,
      display: 'flex', flexDirection: 'column', gap: 18,
      fontFamily: 'DM Sans, system-ui, sans-serif',
      color: '#f4d8de',
      overflow: 'hidden',
    }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '1.8px', color: '#d6a85f', textTransform: 'uppercase', marginBottom: 4 }}>
          HSCSCIENCE · MULTIPLAYER · GAME TYPE 8 · SOCIAL DEDUCTION
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: '#fff' }}>Mirage</div>
          <div style={{ fontSize: 14, color: 'rgba(244,216,222,0.6)', fontWeight: 500 }}>— one classmate is secretly trying to mislead you. Find them before the round ends.</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 14 }}>
        <div style={{ background: 'linear-gradient(140deg, #0d0816 0%, #4a1228 50%, #d6a85f 110%)', borderRadius: 14, padding: 22, color: '#fff', border: '1.5px solid #6a1f33' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 11, fontWeight: 800, letterSpacing: '1.6px', color: '#f4d8de', textTransform: 'uppercase', marginBottom: 4 }}>THE BEHAVIORAL HOOK</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 22, fontWeight: 800, lineHeight: 1.15, marginBottom: 10 }}>
            Hidden identity + accusation drama + "clear my name."
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)' }}>
            Among Us shipped this template to half a billion humans. Social deduction generates the strongest <strong>narrative engagement</strong> of any game format — every round is a story your students retell at lunch. Layer on real-content quizzing: <em>to fool the class, the Mirage has to know the answer.</em> Misdirection requires mastery — the cheating becomes the studying.
          </div>
        </div>
        <div style={{ background: '#1f1228', borderRadius: 14, padding: 18, border: '1.5px solid #5a2438' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#d6a85f', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 1</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>One-more-round chemistry</div>
          <div style={{ fontSize: 12.5, color: 'rgba(244,216,222,0.7)', lineHeight: 1.5 }}>
            Caught in a wrong vote? You need another round to clear your name. Got fooled? You need another round for revenge. The loss creates the pull.
          </div>
        </div>
        <div style={{ background: '#1f1228', borderRadius: 14, padding: 18, border: '1.5px solid #5a2438' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#d6a85f', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 2</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>Asymmetric roles</div>
          <div style={{ fontSize: 12.5, color: 'rgba(244,216,222,0.7)', lineHeight: 1.5 }}>
            Two games in one — Seeker (deduce + answer) and Mirage (deceive + survive). 1-in-8 chance of being chosen each round = random reinforcement.
          </div>
        </div>
        <div style={{ background: '#1f1228', borderRadius: 14, padding: 18, border: '1.5px solid #5a2438' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#d6a85f', textTransform: 'uppercase', marginBottom: 6 }}>RETENTION · 3</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4, color: '#fff' }}>Social stakes</div>
          <div style={{ fontSize: 12.5, color: 'rgba(244,216,222,0.7)', lineHeight: 1.5 }}>
            Roles are revealed publicly at the end. Reputation accumulates: "best Mirage" leaderboards turn into in-class identity.
          </div>
        </div>
      </div>

      <div style={{
        background: '#1f1228', border: '1.5px solid #5a2438', borderRadius: 14,
        padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
      }}>
        {['Role reveal · "You are…"', 'Big screen · the room', 'Phone · accusation', 'Reveal · verdict'].map((label, i) => (
          <div key={i} style={{
            background: 'rgba(214,168,95,0.1)', borderRadius: 10, padding: '10px 12px',
            display: 'flex', flexDirection: 'column', gap: 4, border: '1px solid rgba(214,168,95,0.2)',
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6, background: '#d6a85f', color: '#1a0e1f',
              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, color: '#fff' }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── App ─────────────────────────────────────────────────────────
function App() {
  return (
    <div className="wc-scope" style={{ background: '#f0eee9', padding: '32px', minHeight: '100vh', overflowY: 'auto' }}>
      <MgOverview/>
      <MgRoleReveal/>
      <MgRound/>
      <MgAccuse/>
      <MgReveal/>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);