// ============================================================
// DROP — daily live event at 7pm sharp
// Behavioral spine: streak commitment · scarcity · social proof
// ============================================================

// ─── 1. PRE-DROP COUNTDOWN ───────────────────────────────────────
function DrPreDrop() {
  // Countdown progress — 4m45s remaining of last 5 minutes shown
  const remaining = 285; // seconds
  const total = 300;
  const r = 92;
  const c = 2 * Math.PI * r;
  const pct = remaining / total;
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="6:55">
        <div className="dr-pre">
          <div className="dr-pre-top">
            <div className="dr-pre-brand">⏱ DROP <small>· 7PM daily</small></div>
            <div className="dr-streak-pill">
              <Icon name="flame"/> 23
            </div>
          </div>

          <div className="dr-pre-eyebrow">TODAY · BIOLOGY · MODULE 6</div>
          <div className="dr-pre-title">5 questions.<br/><em>5 minutes.</em></div>

          <div className="dr-countdown">
            <svg viewBox="0 0 200 200">
              <circle cx="100" cy="100" r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="8"/>
              <circle cx="100" cy="100" r={r} fill="none" stroke="#d6a85f" strokeWidth="8"
                strokeLinecap="round"
                strokeDasharray={`${c*pct} ${c}`}
              />
            </svg>
            <div className="dr-countdown-text">
              <div className="dr-countdown-time">4:45</div>
              <div className="dr-countdown-label">UNTIL DROP</div>
              <div className="dr-countdown-foot">Tap exactly at 7:00 PM</div>
            </div>
          </div>

          <div className="dr-pre-stats">
            <div className="dr-pre-stat">
              <div className="dr-pre-stat-label">PLAYING TONIGHT</div>
              <div className="dr-pre-stat-val">
                <span className="live-dot"></span>1 847
              </div>
              <div className="dr-pre-stat-sub">across NSW · checking in now</div>
            </div>
            <div className="dr-pre-stat">
              <div className="dr-pre-stat-label">YOUR FRIENDS</div>
              <div className="dr-pre-stat-val">
                <span className="live-dot"></span>14 / 18
              </div>
              <div className="dr-pre-stat-sub">already in the lobby</div>
            </div>
          </div>

          <div className="dr-streak-strip">
            <div className="dr-streak-icon">🔥</div>
            <div className="dr-streak-text">
              <strong>23-day streak.</strong> Play before 7:05 to keep it alive. Felix W. just hit <strong>day 24</strong>.
            </div>
          </div>

          <div className="dr-pre-cta">
            🔔 We'll buzz you at <strong>6:59 PM</strong> · feel free to lock your phone
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 2. LIVE DROP — STUDENT PHONE ────────────────────────────────
function DrLive() {
  return (
    <SdScope theme="bio">
      <PhoneFrame time="7:01">
        <div className="dr-live">
          <div className="dr-live-head">
            <div className="dr-live-top">
              <span>DROP · <strong>LIVE NOW</strong></span>
              <span>1 902 PLAYING</span>
            </div>
            <div className="dr-live-q-num">Question 3<small>/ 5</small></div>
            <div className="dr-mode-pill">
              <Icon name="bolt"/> SPEED ROUND · 12s
            </div>

            <div className="dr-live-ticker">
              <span className="dr-live-ticker-dot"></span>
              <span><strong>1 902</strong> in</span>
              <span>·</span>
              <span><strong>1 488</strong> got Q2 right</span>
              <span>·</span>
              <span><strong>78%</strong></span>
            </div>

            <div className="dr-timer">
              <div className="dr-timer-num">07</div>
              <div className="dr-timer-bar"><div style={{ width: '58%' }}></div></div>
            </div>
          </div>

          <div className="dr-live-body">
            <div className="dr-live-q">
              <div className="dr-live-q-eyebrow">CELL TRANSPORT · MCQ</div>
              <div className="dr-live-q-text">
                Sodium-potassium pumps move ions against their gradient. This requires which kind of transport?
              </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>

          <div className="dr-live-foot">
            <div className="dr-multi-strip">
              <div className="dr-multi-icon">2×</div>
              <div className="dr-multi-text">
                <strong>Power Hour bonus</strong> active until 8 PM. All correct answers worth <strong>2× points</strong>.
              </div>
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 3. HOST BIG-SCREEN REVEAL ───────────────────────────────────
function DrStage() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="DROP · LIVE NOW · 7:01 PM AEST">
        <div className="dr-stage">
          <div className="dr-stage-left">
            <div className="dr-stage-eyebrow">DROP · Q3 / 5 · REVEAL</div>
            <div className="dr-stage-title">The answer is <em>C · Active transport.</em></div>

            <div className="dr-q-card">
              <div className="dr-q-card-eyebrow">CELL TRANSPORT · MCQ</div>
              <div className="dr-q-card-text">
                Sodium-potassium pumps move ions against their gradient. This requires which kind of transport?
              </div>
            </div>

            <div className="dr-answers-projector">
              <div className="dr-answer-proj a dim">
                <div className="dr-answer-proj-shape"><AnswerShape letter="A"/></div>
                Facilitated diffusion
                <div className="dr-answer-proj-stats">
                  <div className="dr-answer-proj-pct">14%</div>
                  267
                </div>
              </div>
              <div className="dr-answer-proj b dim">
                <div className="dr-answer-proj-shape"><AnswerShape letter="B"/></div>
                Osmosis
                <div className="dr-answer-proj-stats">
                  <div className="dr-answer-proj-pct">5%</div>
                  95
                </div>
              </div>
              <div className="dr-answer-proj c correct">
                <div className="dr-answer-proj-shape"><AnswerShape letter="C"/></div>
                Active transport
                <div className="dr-answer-proj-stats">
                  <div className="dr-answer-proj-pct">76%</div>
                  1 447
                </div>
              </div>
              <div className="dr-answer-proj d dim">
                <div className="dr-answer-proj-shape"><AnswerShape letter="D"/></div>
                Simple diffusion
                <div className="dr-answer-proj-stats">
                  <div className="dr-answer-proj-pct">5%</div>
                  93
                </div>
              </div>
            </div>
          </div>

          <div className="dr-stage-right">
            <div className="dr-stage-right-head">
              <div className="dr-stage-right-h-row">
                <div className="dr-stage-right-title">Live across NSW</div>
                <div className="dr-stage-live-pill">LIVE</div>
              </div>
              <div className="dr-stage-counter">
                1 902
                <small>STUDENTS PLAYING RIGHT NOW</small>
              </div>
            </div>

            <div className="dr-feed">
              <div className="dr-feed-row first">
                <CharGlyph kind="bolt" size={22}/>
                <strong>Felix W.</strong> · 1.8s · first to lock
                <span className="place">FIRST</span>
              </div>
              <div className="dr-feed-row streak">
                <CharGlyph kind="helix" size={22}/>
                <strong>Maya K.</strong> · streak now <strong>day 24 🔥</strong>
                <span className="place">+50</span>
              </div>
              <div className="dr-feed-row locked">
                <CharGlyph kind="cell" size={22}/>
                <strong>Priya S.</strong> · 2.4s · correct
                <span className="place">+180</span>
              </div>
              <div className="dr-feed-row locked">
                <CharGlyph kind="beaker" size={22}/>
                <strong>Jordan T.</strong> · 2.8s · correct
                <span className="place">+160</span>
              </div>
              <div className="dr-feed-row streak">
                <CharGlyph kind="leaf" size={22}/>
                <strong>Aisha R.</strong> · streak <strong>day 11</strong>
                <span className="place">+40</span>
              </div>
              <div className="dr-feed-row locked">
                <CharGlyph kind="atom" size={22}/>
                <strong>Ben L.</strong> · 3.5s · correct
                <span className="place">+140</span>
              </div>
              <div className="dr-feed-row locked">
                <CharGlyph kind="pi" size={22}/>
                <strong>Nathan P.</strong> · 3.8s · correct
                <span className="place">+135</span>
              </div>
              <div className="dr-feed-row locked">
                <CharGlyph kind="wave" size={22}/>
                <strong>Sienna H.</strong> · 4.2s · correct
                <span className="place">+128</span>
              </div>
              <div className="dr-feed-row locked">
                <CharGlyph kind="sigma" size={22}/>
                <strong>Ava B.</strong> · 4.6s · correct
                <span className="place">+120</span>
              </div>
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 4. DAILY RESULTS + STREAK CALENDAR (phone) ──────────────────
function DrResults() {
  return (
    <SdScope theme="bio">
      <PhoneFrame time="7:06">
        <div className="dr-results">
          <div className="dr-results-head">
            <div className="dr-results-eyebrow">DROP · WED 19 MAY · COMPLETE</div>
            <div className="dr-results-score">4<small>/ 5</small></div>
            <div className="dr-results-sub">880 points · Top <strong style={{ color: '#fff' }}>14%</strong> nationally</div>
          </div>

          {/* Streak card with weekly calendar */}
          <div className="dr-streak-card">
            <div className="dr-streak-card-row">
              <div className="dr-streak-fire">🔥</div>
              <div>
                <div className="dr-streak-card-num">24 days<small>· longest yet</small></div>
              </div>
              <div className="dr-streak-card-sub">
                Top <strong>1.2%</strong> of streaks in NSW
              </div>
            </div>
            <div className="dr-streak-week">
              {[
                { l: 'M', state: 'done', n: '13' },
                { l: 'T', state: 'done', n: '14' },
                { l: 'W', state: 'done', n: '15' },
                { l: 'T', state: 'done', n: '16' },
                { l: 'F', state: 'done', n: '17' },
                { l: 'S', state: 'done', n: '18' },
                { l: 'S', state: 'today', n: '19' },
              ].map((d, i) => (
                <div key={i} className="dr-day">
                  <div className="dr-day-letter">{d.l}</div>
                  <div className={`dr-day-mark ${d.state}`}>
                    {d.state === 'today' ? '🔥' : '✓'}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Tonight's leaderboard preview */}
          <div className="dr-leader-preview">
            <div className="dr-leader-preview-h">
              <h3>Tonight's drop · top 5</h3>
              <small>1 902 played</small>
            </div>
            <div className="dr-leader-row">
              <div className="dr-leader-rank gold">1</div>
              <CharGlyph kind="bolt" size={28}/>
              <div className="dr-leader-name">Felix W.<small>5/5 · 14.2s total</small></div>
              <div className="dr-leader-score">1 240<small>pts</small></div>
            </div>
            <div className="dr-leader-row">
              <div className="dr-leader-rank">2</div>
              <CharGlyph kind="atom" size={28}/>
              <div className="dr-leader-name">Anonymous (Sydney)<small>5/5 · 16.1s total</small></div>
              <div className="dr-leader-score">1 180<small>pts</small></div>
            </div>
            <div className="dr-leader-row">
              <div className="dr-leader-rank">3</div>
              <CharGlyph kind="cell" size={28}/>
              <div className="dr-leader-name">Priya S.<small>5/5 · 18.4s total</small></div>
              <div className="dr-leader-score">1 105<small>pts</small></div>
            </div>
            <div className="dr-leader-row me">
              <div className="dr-leader-rank">258</div>
              <CharGlyph kind="helix" size={28}/>
              <div className="dr-leader-name">You · Maya K.<small>4/5 · 19.6s · top 14%</small></div>
              <div className="dr-leader-score">880<small>pts</small></div>
            </div>
          </div>

          {/* Shareable card */}
          <div className="dr-share-card">
            <div className="dr-share-card-img">
              <div className="dr-share-eyebrow">HSCSCIENCE · DROP · 19 MAY</div>
              <div className="dr-share-grid">
                <div className="dr-share-num">
                  4/5
                  <small>SCORE</small>
                </div>
                <div className="dr-share-divider"></div>
                <div className="dr-share-num">
                  24
                  <small>DAY STREAK</small>
                </div>
                <div className="dr-share-divider"></div>
                <div className="dr-share-num">
                  14%
                  <small>NSW RANK</small>
                </div>
              </div>
            </div>
            <div className="dr-share-actions">
              <div className="dr-share-actions-text">
                Share your drop
                <small>Wordle-style · no answers spoiled</small>
              </div>
              <button className="dr-share-btn">
                <Icon name="share" style={{ width: 12, height: 12, marginRight: 4 }}/>
                Share
              </button>
            </div>
          </div>

          {/* Next drop nudge */}
          <div className="dr-next-drop">
            <div className="dr-next-drop-icon"><Icon name="clock"/></div>
            <div className="dr-next-drop-text">
              <strong>Next drop · Thursday 7 PM</strong>
              Module 7 · Infectious disease · 5 Qs · 12 min countdown
            </div>
            <button className="dr-next-drop-cta">Remind me</button>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 5. STREAK ON THE LINE / BRINK ───────────────────────────────
function DrStreakBrink() {
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="6:58">
        <div className="dr-brink">
          <div style={{ position: 'relative' }}>
            <div className="dr-brink-flame">🔥</div>
          </div>

          <div className="dr-brink-eyebrow">YOUR STREAK IS ON THE LINE</div>
          <div className="dr-brink-title">23 days. <em>Don't break it.</em></div>
          <div className="dr-brink-sub">
            Drop locks in <strong style={{ color: '#fff' }}>2 minutes</strong>. Miss it and your streak resets to zero.
          </div>

          <div className="dr-brink-stat">
            <div className="dr-brink-stat-num">3</div>
            <div className="dr-brink-stat-label">
              <strong>Streak Freezes left this month.</strong><br/>
              Use one tonight if you can't play.
            </div>
          </div>

          <div style={{
            marginTop: 22,
            padding: '14px 18px',
            background: 'rgba(0,0,0,0.32)',
            border: '1.5px solid rgba(255,255,255,0.16)',
            borderRadius: 14,
            fontSize: 12,
            color: 'rgba(255,255,255,0.82)',
            lineHeight: 1.5,
            fontWeight: 600,
            textAlign: 'left',
          }}>
            <div style={{
              fontSize: 10, fontWeight: 800, letterSpacing: '1.4px',
              color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginBottom: 6,
            }}>
              IF YOU LOSE IT…
            </div>
            <div>· Streak resets to <strong style={{ color: '#fff' }}>0 days</strong></div>
            <div style={{ marginTop: 4 }}>· You drop from <strong style={{ color: '#fff' }}>top 1.2%</strong> tier</div>
            <div style={{ marginTop: 4 }}>· You'd need <strong style={{ color: '#fff' }}>23 more nights</strong> to climb back</div>
          </div>

          <div className="dr-brink-cta">
            <button className="dr-freeze">
              <Icon name="bolt"/> Use a Streak Freeze
              <small style={{ display: 'block', marginTop: 2 }}>Skip tonight · streak stays at 23</small>
            </button>
            <button style={{
              padding: 14,
              background: 'var(--adv-gold-soft)', color: 'var(--adv-gold-deep)',
              border: 'none',
              borderRadius: 'var(--adv-r-sm)',
              fontFamily: 'var(--adv-display)',
              fontWeight: 800, fontSize: 14, letterSpacing: '0.04em',
              boxShadow: '0 4px 0 var(--adv-gold-deep)',
            }}>
              I'll play · 2 minutes left
            </button>
            <div className="dr-skip">Let it break</div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── OVERVIEW ────────────────────────────────────────────────────
function DrOverview() {
  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: '#a87f3f', textTransform: 'uppercase', marginBottom: 4 }}>
          HSCSCIENCE · MULTIPLAYER · GAME TYPE 5 · DAILY RITUAL
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em' }}>Drop</div>
          <div style={{ fontSize: 14, color: '#5b5d75', fontWeight: 500 }}>— same time, every weeknight. The whole site plays together.</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 14 }}>
        <div style={{ background: 'linear-gradient(140deg, #2a1b40, #6d5b8a 50%, #d6a85f)', borderRadius: 14, padding: 22, color: '#fff' }}>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 11, fontWeight: 800, letterSpacing: '1.6px', color: '#f5e4c3', textTransform: 'uppercase', marginBottom: 4 }}>THE BEHAVIORAL HOOK</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 22, fontWeight: 800, lineHeight: 1.15, marginBottom: 10 }}>
            Streak commitment + appointment scarcity.
          </div>
          <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)' }}>
            Wordle's mechanic. Duolingo's streak. Spotify's daily mix. One drop a day at <strong>7 PM sharp</strong> — 5 questions, 5 minutes, then it's gone. Miss a day, streak resets. Scarcity makes it cheap to do (it's only 5 minutes!) but expensive to skip (you lose your streak).
          </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 }}>RETENTION · 1</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Live, all-at-once</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            "1,902 students playing right now" — social proof at scale. Felix locked in first; Maya hit day 24. You're part of something happening tonight.
          </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 }}>RETENTION · 2</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Streak Freezes (paid-feel feature, free)</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            3 free skips per month. Soft cushion that prevents quit-spiral after one missed day. Duolingo's single best retention lever.
          </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 }}>RETENTION · 3</div>
          <div style={{ fontFamily: 'Outfit, sans-serif', fontSize: 15, fontWeight: 800, marginBottom: 4 }}>Shareable Wordle-style card</div>
          <div style={{ fontSize: 12.5, color: '#5b5d75', lineHeight: 1.5 }}>
            Score + streak + rank, no answer spoilers. Goes in group chat, pulls non-users into the next drop. Cheapest possible user acquisition.
          </div>
        </div>
      </div>

      <div style={{
        background: '#fff', border: '1.5px solid #e8d4ba', borderRadius: 14,
        padding: '14px 18px', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8,
      }}>
        {['Countdown (6:55 PM)', 'Live drop · phone', 'Big screen · reveal', 'Results + share card', 'Streak on the line'].map((label, i) => (
          <div key={i} style={{
            background: '#f5e4c3', borderRadius: 10, padding: '10px 12px',
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6, background: '#a87f3f', 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' }}>
      <DrOverview/>
      <DrPreDrop/>
      <DrLive/>
      <DrStage/>
      <DrResults/>
      <DrStreakBrink/>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);