// ============================================================
// Showdown — top-level design canvas
// ============================================================

function App() {
  return (
    <div className="wc-scope" style={{ background: '#f0eee9', padding: '32px', minHeight: '100vh', overflowY: 'auto' }}>
      <FlowOverview/>
      <div style={{ marginTop: 48 }}><HostSetup/></div>
      <div style={{ marginTop: 48 }}><StudentJoin/></div>
      <div style={{ marginTop: 48 }}><StudentLobby/></div>
      <div style={{ marginTop: 48 }}><HostLobby/></div>
      <div style={{ marginTop: 48 }}><HostQuestion/></div>
      <div style={{ marginTop: 48 }}><StudentQuestion/></div>
      <div style={{ marginTop: 48 }}><HostLeaderboard/></div>
      <div style={{ marginTop: 48 }}><StudentFeedback correct={true}/></div>
      <div style={{ marginTop: 48 }}><StudentFeedback correct={false}/></div>
      <div style={{ marginTop: 48 }}><HostPodium/></div>
    </div>
  );
}

// ─── Flow overview — a strip showing the 9 screens at a glance ─────
function FlowOverview() {
  const steps = [
    { n: 1, who: 'Teacher',  what: 'Picks lessons, tunes rules',     subj: 'bio' },
    { n: 2, who: 'Student',  what: 'Enters game code',               subj: 'mixed' },
    { n: 3, who: 'Student',  what: 'Lobby + picks power-up',         subj: 'bio' },
    { n: 4, who: 'Teacher',  what: 'Projects code + roster',         subj: 'bio' },
    { n: 5, who: 'Live',     what: 'Question on screen + phone',     subj: 'bio' },
    { n: 6, who: 'Student',  what: 'Feedback + rank delta',          subj: 'bio' },
    { n: 7, who: 'Teacher',  what: 'Leaderboard + class callouts',   subj: 'bio' },
    { n: 8, who: 'Repeat',   what: '… for each question',            subj: 'bio' },
    { n: 9, who: 'Teacher',  what: 'Podium + MVPs + send to revise', subj: 'bio' },
  ];
  const subjColor = {
    bio:   ['#4a7a5b', '#d8e9dc'],
    mixed: ['#6d5b8a', '#e3dbef'],
  };
  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: '#9c5c6e', textTransform: 'uppercase', marginBottom: 4 }}>
          HSCSCIENCE · MULTIPLAYER · FIRST GAME TYPE
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em' }}>Showdown</div>
          <div style={{ fontSize: 14, color: '#5b5d75', fontWeight: 500 }}>— a points race built on your existing lesson MCQs.</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(9, 1fr)', gap: 8 }}>
        {steps.map(s => {
          const [deep, soft] = subjColor[s.subj];
          return (
            <div key={s.n} style={{
              background: '#fff', borderRadius: 14, padding: '12px 12px 14px',
              border: '1.5px solid #e8d4ba', display: 'flex', flexDirection: 'column', gap: 8, position: 'relative',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: deep, color: '#fff',
                fontFamily: 'Outfit, sans-serif', fontWeight: 800, fontSize: 14,
                display: 'grid', placeItems: 'center',
              }}>{s.n}</div>
              <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 11, fontWeight: 800, letterSpacing: '1px', color: deep, textTransform: 'uppercase' }}>{s.who}</div>
              <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.35, color: '#2d3142' }}>{s.what}</div>
            </div>
          );
        })}
      </div>

      <div style={{
        marginTop: 6, padding: '14px 18px',
        background: '#fff', border: '1.5px solid #e8d4ba', borderRadius: 14,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24,
      }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 4 }}>NOVEL · 1</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Confidence wager</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Every answer carries a 1× / 2× / 3× multiplier you pick yourself. Right = bigger win, wrong = bigger sting. Forces metacognition; rewards students who actually know what they don't know.
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 4 }}>NOVEL · 2</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>One power-up per game</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Pick one strategic ability in the lobby: <strong>Insight</strong> (50:50), <strong>Slow-mo</strong> (+5s), or <strong>Steal</strong> (poach 50 pts from #1). One use the whole game. When do you spend it?
          </div>
        </div>
        <div>
          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '1.4px', color: '#8a8aa3', textTransform: 'uppercase', marginBottom: 4 }}>NOVEL · 3</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Live class pulse</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Host screen shows answer distribution growing in real-time as students lock in — without revealing the correct one. Teacher sees division; students feel the wave; suspense before reveal.
          </div>
        </div>
      </div>
    </div>
  );
}

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