/* qstates.jsx — Frame compositions + shell states for Brief 02
   Each exported component renders ONE complete phone-frame (HUD + body).
   Plus the modal/dialog/overlay shell states.                              */

const { useState: useStateS } = React;

/* ─── Frame helper: HUD + body inside Phone, sized for canvas ─── */
function QFrame({ dark = false, children, label, sub, hud = {}, scale = 0.92 }) {
  return (
    <window.Phone dark={dark} label={label} sub={sub} scale={scale}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <window.QuizHUD dark={dark} {...hud} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
          {children}
        </div>
      </div>
    </window.Phone>
  );
}
window.QFrame = QFrame;

/* ═══════════════════════════════════════════════════════════════
   STATE A: Pre-quiz Start-screen (mobile)
═══════════════════════════════════════════════════════════════ */
function StartScreen({ dark = false, mode = 'quiz' }) {
  const modeMeta = {
    quiz:       { color: '#0096C7', label: 'Quiz · directe feedback', icon: 'play-circle' },
    oefentoets: { color: '#16A34A', label: 'Oefentoets · feedback na afloop', icon: 'graduation-cap' },
    examensim:  { color: '#023E8A', label: 'Examensimulatie · examenregels', icon: 'shield-check' },
  }[mode];
  return (
    <window.Phone dark={dark} label="Start-screen — pre-quiz" sub={`${mode} · settings + Start`} scale={0.92}>
      <div style={{ padding: '50px 18px 18px', height: '100%', display: 'flex', flexDirection: 'column', gap: 14, overflow: 'auto' }}>
        {/* Mode strip */}
        <div style={{
          padding: '10px 14px', borderRadius: 12,
          background: window.hexA(modeMeta.color, dark ? 0.16 : 0.08),
          border: `1px solid ${window.hexA(modeMeta.color, 0.30)}`,
          color: modeMeta.color, fontSize: 12, fontWeight: 800, letterSpacing: 0.4,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <window.LucideIcon name={modeMeta.icon} size={16} /> {modeMeta.label}
        </div>
        <div>
          <h1 style={{ margin: 0, fontFamily: "'Fredoka One', cursive", fontSize: 26, lineHeight: 1.15, color: dark ? '#F1F5F9' : '#0F172A' }}>
            Mitose & meiose — H4
          </h1>
          <div style={{ fontSize: 13, color: dark ? '#94A3B8' : '#64748B', marginTop: 4 }}>
            Biologie · havo 4 · 16 vragen · ~6 min
          </div>
        </div>

        {/* Highscore strip (only on start, never in-quiz HUD) */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '10px 14px', borderRadius: 12,
          background: dark ? '#111827' : '#F8FAFC',
          border: `1px solid ${dark ? '#1E293B' : '#E2E8F0'}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <window.LucideIcon name="trophy" size={16} color="#D97706" />
            <span style={{ fontSize: 13, fontWeight: 700, color: dark ? '#F1F5F9' : '#0F172A' }}>Persoonlijke highscore</span>
          </div>
          <span style={{ fontSize: 14, fontWeight: 900, color: '#D97706', fontVariantNumeric: 'tabular-nums' }}>1.840</span>
        </div>

        {/* Settings */}
        <div style={{
          padding: '4px 0', borderRadius: 12,
          background: dark ? '#111827' : '#FFF',
          border: `1px solid ${dark ? '#1E293B' : '#E2E8F0'}`,
        }}>
          {[
            { i: 'timer',    l: 'Timer',           s: 'Speel op tempo (3 min)', on: mode !== 'oefentoets' },
            { i: 'lightbulb', l: 'Hints',          s: 'Verlies 25% punten per hint', on: mode === 'quiz' },
            { i: 'shuffle',  l: 'Shuffle vragen',  s: 'Random volgorde', on: true },
            { i: 'arrow-left-right', l: 'Omdraaien (begrip ↔ definitie)', s: 'Alleen Begrippen', on: false, dim: true },
            { i: 'rotate-cw', l: 'Alleen foute vragen', s: 'Vereist eerdere poging', on: false, dim: true },
          ].map((s, i) => (
            <div key={s.i} style={{
              padding: '10px 14px',
              borderTop: i === 0 ? 'none' : `1px solid ${dark ? '#1E293B' : '#F1F5F9'}`,
              display: 'flex', alignItems: 'center', gap: 10,
              opacity: s.dim ? 0.5 : 1,
            }}>
              <window.LucideIcon name={s.i} size={16} color={dark ? '#94A3B8' : '#64748B'} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: dark ? '#F1F5F9' : '#0F172A' }}>{s.l}</div>
                <div style={{ fontSize: 11, color: dark ? '#94A3B8' : '#64748B' }}>{s.s}</div>
              </div>
              <div style={{
                width: 36, height: 22, borderRadius: 11,
                background: s.on ? '#16A34A' : (dark ? '#334155' : '#CBD5E1'),
                position: 'relative', flexShrink: 0,
              }}>
                <div style={{
                  position: 'absolute', top: 2, left: s.on ? 16 : 2,
                  width: 18, height: 18, borderRadius: 9, background: '#FFF',
                  transition: 'left .2s ease',
                }}></div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 'auto' }}>
          <window.CtaBar label={`Start ${modeMeta.label.split(' ·')[0].toLowerCase()}`} kind="primary" icon="play" />
          <div style={{ textAlign: 'center', marginTop: 8, fontSize: 11, color: dark ? '#94A3B8' : '#64748B' }}>
            Kost 1 credit · je hebt er nog 8
          </div>
        </div>
      </div>
    </window.Phone>
  );
}
window.StartScreen = StartScreen;

/* ═══════════════════════════════════════════════════════════════
   SHELL STATES — Pause, Exit-confirm, Time-up, Flag-modal,
                  Hint-revealed bottom-sheet, Quiz-finish
═══════════════════════════════════════════════════════════════ */

/* Pause overlay */
function PauseState({ dark = false }) {
  return (
    <window.QFrame dark={dark} label="Pause overlay" sub="Quiz-modus · stop tijd, niet voortgang" hud={{ current: 4, total: 12, points: 240, streak: 3, timerSec: 105 }}>
      {/* Dimmed body */}
      <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
        <div style={{ filter: 'blur(3px)', opacity: 0.5, pointerEvents: 'none' }}>
          <window.MCPlayer state="selected" dark={dark} />
        </div>
        <div style={{
          position: 'absolute', inset: 0, background: dark ? 'rgba(10,15,30,0.78)' : 'rgba(15,23,42,0.55)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14,
          padding: 24, textAlign: 'center',
        }}>
          <window.PulseFace size={64} mood="focused" />
          <div>
            <div style={{ fontFamily: "'Fredoka One', cursive", fontSize: 22, color: '#FFF', marginBottom: 4 }}>Even doorademen</div>
            <div style={{ fontSize: 12, color: '#CBD5E1' }}>Tijd staat stil — pak op waar je was.</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '85%' }}>
            <window.CtaBar label="Verder" kind="primary" icon="play" />
            <window.CtaBar label="Stoppen" kind="secondary" />
          </div>
        </div>
      </div>
    </window.QFrame>
  );
}
window.PauseState = PauseState;

/* Exit-confirm */
function ExitConfirmState({ dark = false }) {
  return (
    <window.QFrame dark={dark} label="Exit-confirm" sub="Voorkomt per ongeluk afsluiten" hud={{ current: 7, total: 12, points: 540, streak: 0, timerSec: 86 }}>
      <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
        <div style={{ filter: 'blur(3px)', opacity: 0.4, pointerEvents: 'none' }}>
          <window.FillPlayer state="empty" dark={dark} />
        </div>
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(15,23,42,0.55)',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 14,
        }}>
          <div style={{
            background: dark ? '#1A2235' : '#FFF', borderRadius: 18,
            padding: '18px 16px', width: '100%',
            boxShadow: '0 18px 48px rgba(0,0,0,0.30)',
            border: `1px solid ${dark ? '#1E293B' : '#E2E8F0'}`,
          }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 4 }}>
              <window.LucideIcon name="alert-triangle" size={20} color="#D97706" />
              <div style={{ fontSize: 16, fontWeight: 800, color: dark ? '#F1F5F9' : '#0F172A' }}>Stoppen met deze quiz?</div>
            </div>
            <div style={{ fontSize: 13, color: dark ? '#94A3B8' : '#64748B', marginBottom: 14, lineHeight: 1.5 }}>
              Voortgang is <b>niet</b> opgeslagen. Je hebt 7 van 12 vragen gehad — als je nu stopt telt het niet mee voor highscore of streak.
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{
                flex: 1, height: 44, borderRadius: 12, border: 'none',
                background: dark ? '#1E293B' : '#F1F5F9', color: dark ? '#F1F5F9' : '#0F172A',
                fontSize: 14, fontWeight: 800, cursor: 'pointer',
              }}>Stoppen</button>
              <button style={{
                flex: 1.4, height: 44, borderRadius: 12, border: 'none',
                background: '#0096C7', color: '#FFF',
                fontSize: 14, fontWeight: 800, cursor: 'pointer',
              }}>Doorgaan</button>
            </div>
          </div>
        </div>
      </div>
    </window.QFrame>
  );
}
window.ExitConfirmState = ExitConfirmState;

/* Time-up dialog (EXAM-mode) */
function TimeUpState({ dark = true }) {
  return (
    <window.QFrame dark={dark} label="Time-up dialog" sub="EXAM-mode · auto-submit countdown" hud={{ current: 9, total: 12, points: 720, streak: 0, timerSec: 0, timerMode: 'exam' }}>
      <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
        <div style={{ filter: 'blur(3px)', opacity: 0.4, pointerEvents: 'none' }}>
          <window.MCPlayer state="empty" dark={dark} />
        </div>
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(10,15,30,0.78)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 18,
        }}>
          <div style={{
            background: '#1A2235', borderRadius: 18,
            padding: 22, width: '100%',
            border: '2px solid rgba(220,38,38,0.30)',
            boxShadow: '0 18px 48px rgba(0,0,0,0.40)',
            textAlign: 'center',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 999, margin: '0 auto 12px',
              background: 'rgba(220,38,38,0.16)', color: '#DC2626',
              display: 'grid', placeItems: 'center',
            }}>
              <window.LucideIcon name="clock" size={28} strokeWidth={2.4} />
            </div>
            <div style={{ fontFamily: "'Fredoka One', cursive", fontSize: 22, color: '#F1F5F9', marginBottom: 4 }}>Tijd op!</div>
            <div style={{ fontSize: 13, color: '#94A3B8', marginBottom: 16, lineHeight: 1.5 }}>
              Inleveren wat je hebt — 8 van 12 vragen ingevuld. Onbeantwoord = 0 punten.
            </div>
            <window.CtaBar label="Inleveren (auto in 5s)" kind="primary" />
            <button style={{ background: 'none', border: 'none', color: '#94A3B8', fontSize: 12, marginTop: 10, fontWeight: 600, cursor: 'pointer' }}>
              Eindigt automatisch over 5 seconden
            </button>
          </div>
        </div>
      </div>
    </window.QFrame>
  );
}
window.TimeUpState = TimeUpState;

/* Flag-question modal */
function FlagModalState({ dark = false }) {
  return (
    <window.QFrame dark={dark} label="Flag-vraag modal" sub="Rapporteer fout in deze vraag" hud={{ current: 6, total: 16, points: 380, streak: 5, timerSec: null }}>
      <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
        <div style={{ filter: 'blur(3px)', opacity: 0.45, pointerEvents: 'none' }}>
          <window.MCPlayer state="empty" dark={dark} />
        </div>
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(15,23,42,0.55)',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
        }}>
          <div style={{
            background: dark ? '#1A2235' : '#FFF', width: '100%',
            borderRadius: '20px 20px 0 0', padding: '14px 16px 18px',
            border: `1px solid ${dark ? '#1E293B' : '#E2E8F0'}`,
            boxShadow: '0 -10px 32px rgba(0,0,0,0.20)',
          }}>
            <div style={{ width: 36, height: 4, background: dark ? '#475569' : '#CBD5E1', borderRadius: 2, margin: '0 auto 14px' }}></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <window.LucideIcon name="flag" size={18} color="#DC2626" />
              <div style={{ fontSize: 16, fontWeight: 800, color: dark ? '#F1F5F9' : '#0F172A' }}>Vraag rapporteren</div>
            </div>
            <div style={{ fontSize: 12, color: dark ? '#94A3B8' : '#64748B', marginBottom: 12 }}>
              Wat klopt er niet? Anoniem — Pulse leert ervan.
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { i: 'circle-x',     l: 'Antwoord is fout', sel: true },
                { i: 'help-circle',   l: 'Vraag is onduidelijk' },
                { i: 'image-off',     l: 'Afbeelding ontbreekt' },
                { i: 'spell-check',   l: 'Spelfout' },
                { i: 'more-horizontal', l: 'Iets anders' },
              ].map(o => (
                <div key={o.l} style={{
                  padding: '10px 12px', borderRadius: 10,
                  background: o.sel ? (dark ? 'rgba(0,180,216,0.12)' : '#EFF9FF') : 'transparent',
                  border: `1px solid ${o.sel ? '#0096C7' : (dark ? '#1E293B' : '#E2E8F0')}`,
                  display: 'flex', alignItems: 'center', gap: 10,
                  fontSize: 13, fontWeight: 600, color: dark ? '#F1F5F9' : '#0F172A',
                }}>
                  <window.LucideIcon name={o.i} size={14} color={o.sel ? '#0096C7' : (dark ? '#94A3B8' : '#64748B')} />
                  {o.l}
                  {o.sel && <window.LucideIcon name="check" size={14} color="#0096C7" style={{ marginLeft: 'auto' }} />}
                </div>
              ))}
            </div>
            <div style={{ marginTop: 12 }}>
              <window.CtaBar label="Verstuur" kind="primary" />
            </div>
          </div>
        </div>
      </div>
    </window.QFrame>
  );
}
window.FlagModalState = FlagModalState;

/* Hint bottom-sheet (3-tier reveal) */
function HintSheetState({ dark = false }) {
  return (
    <window.QFrame dark={dark} label="Hint bottom-sheet" sub="3-tier reveal · −25% punten per niveau" hud={{ current: 3, total: 12, points: 80, streak: 0, timerSec: 145 }}>
      <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
        <div style={{ filter: 'blur(2px)', opacity: 0.5, pointerEvents: 'none' }}>
          <window.MCPlayer state="empty" dark={dark} />
        </div>
        <div style={{
          position: 'absolute', inset: 0, background: 'rgba(15,23,42,0.50)',
          display: 'flex', alignItems: 'flex-end',
        }}>
          <div style={{
            background: dark ? '#1A2235' : '#FFF', width: '100%',
            borderRadius: '20px 20px 0 0', padding: '14px 16px 18px',
            border: `1px solid ${dark ? '#1E293B' : '#E2E8F0'}`,
          }}>
            <div style={{ width: 36, height: 4, background: dark ? '#475569' : '#CBD5E1', borderRadius: 2, margin: '0 auto 12px' }}></div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <window.LucideIcon name="lightbulb" size={20} color="#D97706" />
              <div style={{ fontSize: 16, fontWeight: 800, color: dark ? '#F1F5F9' : '#0F172A' }}>Hints</div>
            </div>
            {[
              { n: 1, label: 'Een nudge', cost: '−25%', body: 'Denk aan algebra: doe hetzelfde aan beide kanten.', revealed: true },
              { n: 2, label: 'Categorie',  cost: '−50%', body: 'Het antwoord is een geheel getal.', revealed: true },
              { n: 3, label: 'Eerste letter / cijfer', cost: '−75%', body: 'Het begint met "x = 4…"', revealed: false },
            ].map(t => (
              <div key={t.n} style={{
                padding: 12, borderRadius: 12, marginBottom: 8,
                background: t.revealed ? (dark ? 'rgba(245,158,11,0.10)' : '#FEF3C7') : (dark ? '#111827' : '#F8FAFC'),
                border: `1px solid ${t.revealed ? (dark ? 'rgba(245,158,11,0.25)' : '#FDE68A') : (dark ? '#1E293B' : '#E2E8F0')}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: t.revealed ? 6 : 0 }}>
                  <span style={{ fontSize: 12, fontWeight: 800, color: dark ? '#F1F5F9' : '#0F172A' }}>
                    Niveau {t.n} · {t.label}
                  </span>
                  <span style={{ fontSize: 11, fontWeight: 700, color: '#D97706' }}>{t.cost}</span>
                </div>
                {t.revealed
                  ? <div style={{ fontSize: 13, color: dark ? '#FCD34D' : '#92400E' }}>{t.body}</div>
                  : <button style={{
                      marginTop: 6, height: 32, padding: '0 12px', borderRadius: 8, border: 'none',
                      background: '#D97706', color: '#FFF', fontSize: 12, fontWeight: 800, cursor: 'pointer',
                    }}>Toon (−75%)</button>
                }
              </div>
            ))}
            <div style={{ fontSize: 11, color: dark ? '#94A3B8' : '#64748B', textAlign: 'center', marginTop: 6 }}>
              Tip: probeer de vraag eerst zelf — hints kosten punten.
            </div>
          </div>
        </div>
      </div>
    </window.QFrame>
  );
}
window.HintSheetState = HintSheetState;

/* Streak-celebration (subtle inline — points-pill morph) */
function StreakSubtleState({ dark = false }) {
  return (
    <window.QFrame dark={dark} label="Streak 5× · subtiel" sub="Anchor: AnimatedFeedback + flame intensify" hud={{ current: 6, total: 12, points: 420, streak: 5, timerSec: 95, pointsBumped: true, delta: '+50' }}>
      <window.PlayBody qtype="MULTIPLE_CHOICE" dark={dark}>
        <window.TypeBadge type="MULTIPLE_CHOICE" />
        <h2 style={{ margin: 0, fontSize: 19, fontWeight: 800, color: dark ? '#F1F5F9' : '#0F172A', lineHeight: 1.3 }}>
          Wat is de uitkomst van 7 × 8?
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {['48', '54', '56', '64'].map((o, i) => {
            const correct = i === 2;
            return (
              <div key={o} style={{
                padding: '14px', borderRadius: 12,
                background: correct ? (dark ? 'rgba(34,197,94,0.12)' : '#F0FDF4') : (dark ? '#111827' : '#FFF'),
                border: `2px solid ${correct ? '#16A34A' : (dark ? '#1E293B' : '#E2E8F0')}`,
                opacity: !correct ? 0.4 : 1,
                display: 'flex', alignItems: 'center', gap: 12,
                fontSize: 15, fontWeight: 700, color: dark ? '#F1F5F9' : '#0F172A',
              }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: correct ? '#16A34A' : (dark ? '#1E293B' : '#F1F5F9'),
                  color: correct ? '#FFF' : (dark ? '#94A3B8' : '#64748B'),
                  display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: 12,
                }}>{['A','B','C','D'][i]}</span>
                <span style={{ flex: 1 }}>{o}</span>
                {correct && <window.LucideIcon name="check" size={16} color="#16A34A" />}
              </div>
            );
          })}
        </div>
        <window.AnimatedFeedback dark={dark} kind="correct"
          text="5 op rij — go!"
          sub="+50 punten · streak-bonus actief (×1.25 op volgende correct)"
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 800, color: '#7C2D12' }}>
            <span style={{ animation: 'flameGrow 1.2s infinite' }}>
              <window.LucideIcon name="flame" size={14} color="#EA580C" />
            </span>
            5× combo — flame intensifies in points-pill
          </div>
        </window.AnimatedFeedback>
        <div style={{ marginTop: 'auto' }}><window.CtaBar label="Volgende →" kind="success" /></div>
      </window.PlayBody>
    </window.QFrame>
  );
}
window.StreakSubtleState = StreakSubtleState;

/* Streak-celebration (CURRENT pattern — for compare) */
function StreakOldOverlayState({ dark = true }) {
  return (
    <window.QFrame dark={dark} label="Huidig: fullscreen overlay" sub="Robin's voorkeur: subtieler" hud={{ current: 6, total: 12, points: 420, streak: 5 }}>
      <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
        <div style={{ opacity: 0.3, pointerEvents: 'none' }}>
          <window.MCPlayer state="correct" dark={dark} />
        </div>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(circle at center, rgba(234,88,12,0.95) 0%, rgba(124,45,18,0.92) 100%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12,
        }}>
          <div style={{ fontSize: 96, animation: 'flameGrow 0.8s infinite' }}>🔥</div>
          <div style={{ fontFamily: "'Fredoka One', cursive", fontSize: 44, color: '#FFF' }}>5 op rij!</div>
          <div style={{ fontSize: 14, color: '#FFF', opacity: 0.9 }}>Bonus +50 punten</div>
        </div>
      </div>
    </window.QFrame>
  );
}
window.StreakOldOverlayState = StreakOldOverlayState;

/* Quiz-finish transition (last-question → result) */
function FinishTransitionState({ dark = false }) {
  return (
    <window.QFrame dark={dark} label="Finish-transitie" sub="Laatste vraag → result-page" hud={{ current: 12, total: 12, points: 880, streak: 4, timerSec: 23 }}>
      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 14, padding: 24,
      }}>
        <div style={{ animation: 'scaleIn .35s ease' }}>
          <window.PulseFace size={84} mood="excited" />
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: "'Fredoka One', cursive", fontSize: 24, color: dark ? '#F1F5F9' : '#0F172A' }}>Klaar!</div>
          <div style={{ fontSize: 13, color: dark ? '#94A3B8' : '#64748B', marginTop: 4 }}>
            Je antwoorden worden nagekeken…
          </div>
        </div>
        <div style={{ width: '70%', height: 3, borderRadius: 2, background: dark ? '#1E293B' : '#E2E8F0', overflow: 'hidden' }}>
          <div style={{ height: '100%', width: '60%', background: '#0096C7', animation: 'floatUp 1.6s linear infinite reverse', transformOrigin: 'left' }}></div>
        </div>
        <div style={{ fontSize: 11, color: dark ? '#475569' : '#94A3B8', textAlign: 'center' }}>
          Result-page komt in Brief 04 →
        </div>
      </div>
    </window.QFrame>
  );
}
window.FinishTransitionState = FinishTransitionState;

/* ═══════════════════════════════════════════════════════════════
   GREENFIELD: Examensim focus-mode chrome
═══════════════════════════════════════════════════════════════ */
function ExamensimFocusState() {
  return (
    <window.QFrame
      dark={true}
      label="Examensim · focus-mode"
      sub="Sober · gamification verborgen · countdown prominent"
      hud={{
        current: 18, total: 60, points: 0, streak: 0,
        timerSec: 4830, timerMode: 'examensim',
        modeBadge: { label: 'EXAMENSIMULATIE · 80 min', bg: '#023E8A', fg: '#E0F2FE' },
      }}
    >
      <window.PlayBody qtype="MULTIPLE_CHOICE" dark={true} accent={false}>
        <div style={{ fontSize: 11, fontWeight: 800, color: '#7DD3FC', letterSpacing: 1 }}>VRAAG 18 · WISKUNDE B · HAVO 5</div>
        <h2 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: '#F1F5F9', lineHeight: 1.4 }}>
          Bereken de afgeleide van f(x) = 3x² − 5x + 2.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { l: 'A', t: 'f\'(x) = 6x − 5', sel: false },
            { l: 'B', t: 'f\'(x) = 3x − 5',  sel: false },
            { l: 'C', t: 'f\'(x) = 6x + 2',  sel: true },
            { l: 'D', t: 'f\'(x) = 3x² − 5', sel: false },
          ].map(o => (
            <div key={o.l} style={{
              padding: '14px', borderRadius: 10,
              background: o.sel ? 'rgba(0,180,216,0.10)' : '#0F1628',
              border: `1.5px solid ${o.sel ? '#0096C7' : '#1E293B'}`,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <span style={{
                width: 24, height: 24, borderRadius: 6,
                background: o.sel ? '#0096C7' : 'transparent',
                color: o.sel ? '#FFF' : '#94A3B8',
                border: `1px solid ${o.sel ? '#0096C7' : '#475569'}`,
                display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12,
              }}>{o.l}</span>
              <span style={{ fontSize: 14, fontWeight: 600, color: '#F1F5F9' }}>{o.t}</span>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 'auto', display: 'flex', gap: 8, alignItems: 'center',
          padding: '10px 12px', borderRadius: 10,
          background: '#0F1628', border: '1px solid #1E293B',
        }}>
          <button style={{
            height: 36, padding: '0 12px', borderRadius: 8, border: '1px solid #1E293B',
            background: 'transparent', color: '#94A3B8', fontSize: 12, fontWeight: 700, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 4,
          }}>
            <window.LucideIcon name="bookmark" size={12} /> Markeer
          </button>
          <button style={{
            height: 36, padding: '0 12px', borderRadius: 8, border: '1px solid #1E293B',
            background: 'transparent', color: '#94A3B8', fontSize: 12, fontWeight: 700, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 4,
          }}>
            <window.LucideIcon name="arrow-left" size={12} /> Vorige
          </button>
          <button style={{
            flex: 1, height: 36, borderRadius: 8, border: 'none',
            background: '#0096C7', color: '#FFF', fontSize: 13, fontWeight: 800, cursor: 'pointer',
          }}>Volgende →</button>
        </div>
      </window.PlayBody>
    </window.QFrame>
  );
}
window.ExamensimFocusState = ExamensimFocusState;

/* ═══════════════════════════════════════════════════════════════
   GREENFIELD: OEFENTOETS-mode (no per-q feedback) — 'volgende' only
═══════════════════════════════════════════════════════════════ */
function OefentoetsState() {
  return (
    <window.QFrame
      dark={false}
      label="Oefentoets-mode (greenfield)"
      sub="Geen feedback per vraag · alleen 'volgende'"
      hud={{
        current: 9, total: 20, points: 0, streak: 0,
        timerSec: 720, timerMode: 'oefentoets',
        modeBadge: { label: 'OEFENTOETS · 20 vragen · 15 min', bg: '#16A34A', fg: '#FFFFFF' },
      }}
    >
      <window.PlayBody qtype="FILL_IN_BLANK">
        <window.TypeBadge type="FILL_IN_BLANK" />
        <h2 style={{ margin: 0, fontSize: 17, fontWeight: 800, color: '#0F172A', lineHeight: 1.3 }}>
          Vul aan: tijdens elektrolyse wordt een ___ stof gesplitst door middel van ___ energie.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <input style={{
            height: 44, padding: '0 14px', borderRadius: 10,
            border: '2px solid #E2E8F0', background: '#FFF', fontSize: 14, fontWeight: 600,
            fontFamily: 'inherit', color: '#0F172A',
          }} placeholder="eerste woord…" defaultValue="samengestelde" />
          <input style={{
            height: 44, padding: '0 14px', borderRadius: 10,
            border: '2px solid #E2E8F0', background: '#FFF', fontSize: 14, fontWeight: 600,
            fontFamily: 'inherit', color: '#0F172A',
          }} placeholder="tweede woord…" />
        </div>
        <div style={{
          padding: '10px 12px', borderRadius: 10,
          background: '#F0FDF4', border: '1px solid #BBF7D0',
          fontSize: 12, color: '#15803D', display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <window.LucideIcon name="info" size={14} />
          Geen feedback tussendoor — eindrapport komt na vraag 20.
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', gap: 8 }}>
          <button style={{
            height: 52, padding: '0 16px', borderRadius: 14,
            background: '#F1F5F9', color: '#475569', fontSize: 13, fontWeight: 800,
            border: 'none', cursor: 'pointer',
          }}>
            <window.LucideIcon name="bookmark" size={14} /> Markeer
          </button>
          <button style={{
            flex: 1, height: 52, borderRadius: 14, border: 'none',
            background: '#16A34A', color: '#FFF', fontSize: 16, fontWeight: 800, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>Volgende vraag →</button>
        </div>
      </window.PlayBody>
    </window.QFrame>
  );
}
window.OefentoetsState = OefentoetsState;