// Quiz Free Result — celebrating but honest. 6 states.
// Deviation note: huidige Snapsnelds heeft compact horizontal hero + FilterPills.
// Wij behouden compact hero (correct voor 5-min loop) maar:
// - Verschuiven Snaps/XP-counter naar prominent inflow-animation (daar lands de gamification)
// - Vervangen FilterPills door "Alleen fout"-default-toggle (voor 12-18 is "wat ging fout"
//   de eerste vraag — we openen met focus daar, niet met chronologische dump)
// - Voegen anti-farming als first-class state toe (bestaat niet in huidige UI)

const qr_t_light = window.theme(false);
const qr_t_dark = window.theme(true);

/* ───────────────────────── Confetti pulse ─────────────────────────
   Subtiel — 8 stukjes die langzaam zakken. Geen Vegas. */
function Confetti({ count = 14, intense = false }) {
  const colors = ['#00B4D8', '#FFD000', '#22C55E', '#F472B6', '#A855F7'];
  const pieces = Array.from({ length: count }, (_, i) => {
    const left = (i / count) * 100 + (Math.random() * 6 - 3);
    const delay = Math.random() * 1.5;
    const duration = 2.4 + Math.random() * 1.5;
    const color = colors[i % colors.length];
    const rot = Math.random() * 360;
    return (
      <span key={i} style={{
        position: 'absolute', top: -10, left: `${left}%`,
        width: 6, height: intense ? 12 : 8, borderRadius: 1,
        background: color, transform: `rotate(${rot}deg)`,
        animation: `confettiFall ${duration}s linear ${delay}s infinite`,
        opacity: intense ? 0.9 : 0.7,
      }} />
    );
  });
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      <style>{`
        @keyframes confettiFall {
          0%   { transform: translateY(0) rotate(0); opacity: 0; }
          10%  { opacity: 1; }
          100% { transform: translateY(380px) rotate(540deg); opacity: 0; }
        }
        @keyframes counterPop {
          0%   { transform: scale(0.6); opacity: 0; }
          60%  { transform: scale(1.15); opacity: 1; }
          100% { transform: scale(1); opacity: 1; }
        }
      `}</style>
      {pieces}
    </div>
  );
}

/* ───────────────────────── Hero — score, awards, mascot ───────────────────────── */
function ScoreHero({ t, score, total, percentage, tier, showConfetti, badge, mascotMood = 'happy' }) {
  // tier-color drives the celebratory feel
  const tierC = {
    perfect:  '#22C55E',
    high:     '#22C55E',
    medium:   '#D97706',
    low:      '#94A3B8',
  }[tier] || t.primary;

  return (
    <div style={{
      position: 'relative', overflow: 'hidden',
      borderRadius: 14,
      background: t.dark
        ? `linear-gradient(135deg, color-mix(in srgb, ${tierC} 18%, ${t.card}) 0%, ${t.card} 70%)`
        : `linear-gradient(135deg, color-mix(in srgb, ${tierC} 10%, ${t.card}) 0%, ${t.card} 70%)`,
      border: `1px solid color-mix(in srgb, ${tierC} 28%, ${t.border})`,
      padding: '22px 26px',
    }}>
      {showConfetti && <Confetti intense={tier === 'perfect'} />}

      <div style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'flex-start', gap: 18 }}>
        {/* Left — % + raw score */}
        <div style={{ flex: '0 0 auto' }}>
          <div style={{
            fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
            color: t.textSub, marginBottom: 2,
          }}>Score</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{
              fontFamily: 'Fredoka One', fontSize: 64, lineHeight: 1, color: t.text,
            }}>{percentage}%</span>
          </div>
          <div style={{ fontSize: 13, color: t.textSub, fontWeight: 700, marginTop: 4 }}>
            {score} / {total} · {tier === 'perfect' ? 'Alles goed!' : tier === 'high' ? 'Goed gedaan' : tier === 'medium' ? 'Bijna' : 'Oefenen aanbevolen'}
          </div>
          {badge && (
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              marginTop: 10, padding: '4px 10px', borderRadius: 9999,
              background: 'color-mix(in srgb, #FFD000 22%, transparent)',
              border: '1px solid color-mix(in srgb, #FFD000 50%, transparent)',
              color: t.dark ? '#FFD000' : '#B45309',
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 11, letterSpacing: 0.5, textTransform: 'uppercase',
            }}>
              <window.LucideIcon name="award" size={12} fill="currentColor" />
              {badge}
            </div>
          )}
        </div>

        {/* Right — Pulse + Awards inflow */}
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 14 }}>
          {/* Pulse */}
          <div style={{ flexShrink: 0, position: 'relative' }}>
            <window.PulseLottie size={56} />
          </div>

          {/* Awards — animated stack */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 120 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 12px', borderRadius: 10,
              background: 'color-mix(in srgb, #FFD000 14%, transparent)',
              border: '1px solid color-mix(in srgb, #FFD000 36%, transparent)',
              animation: 'counterPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both',
            }}>
              <window.LucideIcon name="zap" size={16} fill={t.dark ? '#FFD000' : '#D97706'} style={{ color: t.dark ? '#FFD000' : '#D97706' }} />
              <div>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 18, lineHeight: 1, color: t.dark ? '#FFD000' : '#B45309' }}>
                  +{tier === 'perfect' ? 30 : tier === 'high' ? 20 : tier === 'medium' ? 10 : 5}
                </div>
                <div style={{ fontSize: 9, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: t.textSub, marginTop: 1 }}>
                  Snaps {tier === 'perfect' && '· perfect ×'}
                </div>
              </div>
            </div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 12px', borderRadius: 10,
              background: 'color-mix(in srgb, #22C55E 14%, transparent)',
              border: '1px solid color-mix(in srgb, #22C55E 36%, transparent)',
              animation: 'counterPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both',
            }}>
              <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: '#22C55E', lineHeight: 1, marginLeft: 2 }}>
                +{tier === 'perfect' ? 150 : tier === 'high' ? 90 : tier === 'medium' ? 50 : 25} XP
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── Per-vraag rij — compact, foutgedreven ───────────────────────── */
function QuestionRow({ t, n, q, status, your, correct, expanded }) {
  const colors = {
    correct: { c: '#22C55E', label: 'Goed', icon: 'check' },
    wrong:   { c: '#DC2626', label: 'Fout', icon: 'x' },
    flagged: { c: '#D97706', label: 'Gevlagd', icon: 'flag' },
  };
  const s = colors[status];
  return (
    <div style={{
      padding: expanded ? '14px 16px' : '10px 16px',
      borderBottom: `1px solid ${t.borderSoft}`,
      background: expanded ? `color-mix(in srgb, ${s.c} 5%, transparent)` : 'transparent',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 22, height: 22, borderRadius: 6, flexShrink: 0,
          background: `color-mix(in srgb, ${s.c} 16%, transparent)`,
          color: s.c, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <window.LucideIcon name={s.icon} size={12} strokeWidth={3} />
        </div>
        <span style={{ fontSize: 12, color: t.textSub, fontWeight: 700, minWidth: 24 }}>#{n}</span>
        <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: t.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: expanded ? 'normal' : 'nowrap' }}>
          {q}
        </span>
        {!expanded && (
          <window.LucideIcon name="chevron-down" size={14} style={{ color: t.textDim }} />
        )}
      </div>
      {expanded && (
        <div style={{ marginTop: 10, marginLeft: 34, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
            <span style={{ fontSize: 11, fontWeight: 800, color: t.textSub, minWidth: 56, textTransform: 'uppercase', letterSpacing: 0.4 }}>Jij</span>
            <span style={{ fontSize: 13, color: status === 'correct' ? '#22C55E' : '#DC2626', fontWeight: 600, textDecoration: status === 'wrong' ? 'line-through' : 'none' }}>{your}</span>
          </div>
          {status === 'wrong' && (
            <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
              <span style={{ fontSize: 11, fontWeight: 800, color: t.textSub, minWidth: 56, textTransform: 'uppercase', letterSpacing: 0.4 }}>Goed</span>
              <span style={{ fontSize: 13, color: '#22C55E', fontWeight: 700 }}>{correct}</span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/* ───────────────────────── Default state — 8/15 score ───────────────────────── */
function QR_Default() {
  const t = qr_t_light;
  const questions = [
    { n: 1, q: 'Wat is de functie van de mitochondriën?', status: 'correct', your: 'Energie opwekken', correct: 'Energie opwekken' },
    { n: 2, q: 'Welke fase volgt op de profase?', status: 'wrong', your: 'Anafase', correct: 'Metafase' },
    { n: 3, q: 'Wat zijn ribosomen?', status: 'correct', your: 'Eiwitfabriekjes', correct: 'Eiwitfabriekjes' },
    { n: 4, q: 'Noem de 4 fasen van mitose', status: 'wrong', your: 'Profase, anafase, metafase, telofase', correct: 'Profase, metafase, anafase, telofase', expanded: true },
    { n: 5, q: 'Wat is osmose?', status: 'correct', your: 'Diffusie van water', correct: 'Diffusie van water door semipermeabel membraan' },
  ];

  return (
    <div style={{ height: '100%', overflow: 'auto', background: t.bg, fontFamily: 'Nunito' }}>
      <div style={{
        padding: '14px 28px', borderBottom: `1px solid ${t.border}`, background: t.card,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <window.LucideIcon name="arrow-left" size={18} style={{ color: t.textSub }} />
        <window.ModeBadge mode="quiz" />
        <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
          <window.LucideIcon name="leaf" size={14} style={{ color: '#22C55E' }} /> Biologie · H3 Cellen
        </span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: t.textSub }}>15 vragen · 4:32</span>
      </div>

      <div style={{ padding: '20px 28px 0' }}>
        <ScoreHero t={t} score={11} total={15} percentage={73} tier="high" showConfetti />

        {/* Pulse-quote */}
        <div style={{
          marginTop: 14, padding: '12px 16px', borderRadius: 10,
          background: t.borderSoft,
          fontSize: 13, color: t.text, lineHeight: 1.5,
        }}>
          <b>Pulse:</b> "Lekker — 11/15. Vraag 4 over mitose-fases was tricky; lees de uitleg of speel alleen die ene opnieuw."
        </div>
      </div>

      {/* Replay CTAs */}
      <div style={{ padding: '14px 28px 0', display: 'flex', gap: 10 }}>
        <window.Btn t={t} kind="primary" size="md" icon="rotate-cw">Speel opnieuw</window.Btn>
        <window.Btn t={t} kind="secondary" size="md" icon="x-circle">Alleen foute (4)</window.Btn>
        <div style={{ flex: 1 }} />
        <window.Btn t={t} kind="ghost" size="md" iconRight="arrow-right">Volgende quiz</window.Btn>
      </div>

      {/* Per-vraag — DEVIATION: 'Alleen fout' is default-aan, niet een filter-pill */}
      <div style={{ padding: '20px 28px 28px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 14, color: t.text }}>Antwoordoverzicht</h3>
          <span style={{ fontSize: 11, color: t.textDim, fontWeight: 600 }}>· standaard alleen fout + gevlagd</span>
          <div style={{ flex: 1 }} />
          <button style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '5px 10px', borderRadius: 9999,
            background: 'transparent', border: `1px solid ${t.border}`,
            color: t.textSub, fontFamily: 'Nunito', fontWeight: 700, fontSize: 11, cursor: 'pointer',
          }}>
            <window.LucideIcon name="eye" size={11} /> Toon alle 15
          </button>
        </div>
        <window.Card t={t} padding={0}>
          {questions.map((q, i) => (
            <QuestionRow key={i} t={t} {...q} />
          ))}
        </window.Card>

        {/* Cross-pijler */}
        <div style={{ marginTop: 18 }}>
          <window.HandoffCard pillar="leren" direction="to"
            title="Lees uitleg — Mitose-fases (4 fouten daar)"
            subtitle="2 min in Leren · §3.2 Celdeling" />
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── Perfect score — 100% ───────────────────────── */
function QR_Perfect() {
  const t = qr_t_light;
  return (
    <div style={{ height: '100%', overflow: 'auto', background: t.bg, fontFamily: 'Nunito' }}>
      <div style={{
        padding: '14px 28px', borderBottom: `1px solid ${t.border}`, background: t.card,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <window.LucideIcon name="arrow-left" size={18} style={{ color: t.textSub }} />
        <window.ModeBadge mode="quiz" />
        <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
          <window.LucideIcon name="leaf" size={14} style={{ color: '#22C55E' }} /> Biologie · H3 Cellen
        </span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: t.textSub }}>15 vragen · 3:18</span>
      </div>

      <div style={{ padding: '20px 28px 0' }}>
        <ScoreHero t={t} score={15} total={15} percentage={100} tier="perfect" showConfetti badge="Perfect" />
        <div style={{
          marginTop: 14, padding: '12px 16px', borderRadius: 10,
          background: 'color-mix(in srgb, #22C55E 8%, transparent)',
          border: '1px solid color-mix(in srgb, #22C55E 24%, transparent)',
          fontSize: 13, color: t.text, lineHeight: 1.5,
        }}>
          <b>Pulse:</b> "Tof! Alles goed — en in 3:18. Klaar voor de Oefentoets?"
        </div>
      </div>

      <div style={{ padding: '14px 28px 0', display: 'flex', gap: 10 }}>
        <window.Btn t={t} kind="primary" size="md" icon="star">Doe als Oefentoets</window.Btn>
        <window.Btn t={t} kind="secondary" size="md" icon="rotate-cw">Speel opnieuw</window.Btn>
        <div style={{ flex: 1 }} />
        <window.Btn t={t} kind="ghost" size="md" iconRight="arrow-right">Volgende</window.Btn>
      </div>

      <div style={{ padding: '20px 28px 28px' }}>
        <div style={{
          padding: '14px 16px', borderRadius: 10,
          background: t.card, border: `1px dashed ${t.border}`,
          display: 'flex', alignItems: 'center', gap: 12, color: t.textSub, fontSize: 13,
        }}>
          <window.LucideIcon name="check-check" size={18} style={{ color: '#22C55E' }} />
          <span>Alle 15 vragen goed — geen foutenoverzicht nodig.</span>
          <div style={{ flex: 1 }} />
          <button style={{
            background: 'transparent', border: `1px solid ${t.border}`, borderRadius: 9999,
            padding: '5px 10px', color: t.textSub, fontFamily: 'Nunito', fontWeight: 700, fontSize: 11, cursor: 'pointer',
          }}>Toon toch</button>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── New highscore — 87% > vorige 73% ───────────────────────── */
function QR_NewHighscore() {
  const t = qr_t_dark;
  return (
    <div style={{ height: '100%', overflow: 'auto', background: t.bg, fontFamily: 'Nunito' }}>
      <div style={{
        padding: '14px 28px', borderBottom: `1px solid ${t.border}`, background: t.card,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <window.LucideIcon name="arrow-left" size={18} style={{ color: t.textSub }} />
        <window.ModeBadge mode="quiz" dark />
        <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600 }}>Wiskunde · H4 Functies</span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: t.textSub }}>15 vragen · 4:01</span>
      </div>

      <div style={{ padding: '20px 28px 0' }}>
        <ScoreHero t={t} score={13} total={15} percentage={87} tier="high" showConfetti badge="Nieuw record" />

        {/* Highscore comparison strip */}
        <div style={{
          marginTop: 14, padding: '12px 16px', borderRadius: 10,
          background: 'color-mix(in srgb, #FFD000 8%, transparent)',
          border: '1px solid color-mix(in srgb, #FFD000 24%, transparent)',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <window.LucideIcon name="trending-up" size={18} style={{ color: '#FFD000' }} />
          <div style={{ flex: 1, fontSize: 13, color: t.text, lineHeight: 1.5 }}>
            <b>Nieuw record voor deze quiz</b> — vorige was 73% (3 dagen terug).
            Pulse: "Lekker — die ene fout was gewoon snel afgedaan, geen drama."
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 28px 0', display: 'flex', gap: 10 }}>
        <window.Btn t={t} kind="primary" size="md" icon="rotate-cw">Speel opnieuw</window.Btn>
        <window.Btn t={t} kind="secondary" size="md" icon="x-circle">Alleen foute (2)</window.Btn>
        <div style={{ flex: 1 }} />
        <window.Btn t={t} kind="ghost" size="md" iconRight="arrow-right">Volgende</window.Btn>
      </div>

      <div style={{ padding: '20px 28px 28px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <h3 style={{ margin: 0, fontWeight: 800, fontSize: 14, color: t.text }}>Antwoordoverzicht</h3>
          <span style={{ fontSize: 11, color: t.textDim, fontWeight: 600 }}>· alleen 2 fouten</span>
        </div>
        <window.Card t={t} padding={0}>
          <QuestionRow t={t} n={6} q="Bereken f(3) als f(x) = 2x² − 5" status="wrong" your="13" correct="13 — wacht, dat klopt? Foutje opname" expanded />
          <QuestionRow t={t} n={11} q="Welk type functie is y = 3·2ˣ?" status="wrong" your="Lineair" correct="Exponentieel" />
        </window.Card>
      </div>
    </div>
  );
}

/* ───────────────────────── Anti-farming — 5e play, reward 0 ───────────────────────── */
function QR_AntiFarming() {
  const t = qr_t_light;
  return (
    <div style={{ height: '100%', overflow: 'auto', background: t.bg, fontFamily: 'Nunito' }}>
      <div style={{
        padding: '14px 28px', borderBottom: `1px solid ${t.border}`, background: t.card,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <window.LucideIcon name="arrow-left" size={18} style={{ color: t.textSub }} />
        <window.ModeBadge mode="quiz" />
        <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600 }}>Biologie · H3 Cellen</span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: t.textSub }}>5e poging vandaag</span>
      </div>

      <div style={{ padding: '20px 28px 0' }}>
        {/* Hero — score zichtbaar maar geen confetti, geen Snaps-glow */}
        <div style={{
          padding: '22px 26px', borderRadius: 14,
          background: t.card, border: `1px solid ${t.border}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18 }}>
            <div>
              <div style={{
                fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
                color: t.textSub, marginBottom: 2,
              }}>Score</div>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 64, lineHeight: 1, color: t.text }}>93%</div>
              <div style={{ fontSize: 13, color: t.textSub, fontWeight: 700, marginTop: 4 }}>
                14 / 15 · Je kent dit goed
              </div>
            </div>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 14 }}>
              <window.PulseLottie size={56} />
              <div style={{
                padding: '12px 14px', borderRadius: 10,
                background: t.borderSoft, border: `1px dashed ${t.border}`,
                minWidth: 140,
              }}>
                <div style={{
                  fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
                  color: t.textDim, marginBottom: 4,
                }}>Geen Snaps</div>
                <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600, lineHeight: 1.4 }}>
                  Je hebt deze quiz al goed in je hoofd.
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 14, padding: '14px 16px', borderRadius: 10,
          background: 'color-mix(in srgb, #00B4D8 6%, transparent)',
          border: '1px solid color-mix(in srgb, #00B4D8 22%, transparent)',
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <window.LucideIcon name="lightbulb" size={18} style={{ color: t.primary, marginTop: 1 }} />
          <div style={{ fontSize: 13, color: t.text, lineHeight: 1.55, flex: 1 }}>
            <b>Pulse:</b> "Vijfde keer — je kent 'm. Geen Snaps meer hier, maar je voortgang telt nog wel.
            Probeer een nieuw onderwerp uit dit hoofdstuk?"
          </div>
        </div>
      </div>

      <div style={{ padding: '20px 28px 0' }}>
        <h3 style={{ margin: '0 0 12px', fontWeight: 800, fontSize: 14, color: t.text }}>Verken iets nieuws</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <window.HandoffCard pillar="oefenen" direction="to"
            title="DNA & eiwitsynthese — Quiz"
            subtitle="Volgende paragraaf · 12 vragen · ~5 min" />
          <window.HandoffCard pillar="leren" direction="to"
            title="Lees verder — §3.4 Celcyclus"
            subtitle="Borduurt voort op wat je nu kent · 6 min" />
        </div>
      </div>

      <div style={{ padding: '20px 28px 28px', display: 'flex', gap: 10 }}>
        <window.Btn t={t} kind="ghost" size="md">Toch nog een keer</window.Btn>
        <div style={{ flex: 1 }} />
        <window.Btn t={t} kind="primary" size="md" iconRight="arrow-right">Probeer iets nieuws</window.Btn>
      </div>
    </div>
  );
}

/* ───────────────────────── Streak bonus + level-up combined ───────────────────────── */
function QR_StreakLevel() {
  const t = qr_t_dark;
  return (
    <div style={{ height: '100%', overflow: 'auto', background: t.bg, fontFamily: 'Nunito' }}>
      <div style={{
        padding: '14px 28px', borderBottom: `1px solid ${t.border}`, background: t.card,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <window.LucideIcon name="arrow-left" size={18} style={{ color: t.textSub }} />
        <window.ModeBadge mode="quiz" dark />
        <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600 }}>Engels · Past Perfect</span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: t.textSub }}>15 vragen · 5:12</span>
      </div>

      <div style={{ padding: '20px 28px 0' }}>
        <ScoreHero t={t} score={12} total={15} percentage={80} tier="high" showConfetti />

        {/* Stacked celebration cards: streak + level-up */}
        <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {/* Streak preserved */}
          <div style={{
            padding: '14px 16px', borderRadius: 10,
            background: 'linear-gradient(135deg, color-mix(in srgb, #F97316 14%, transparent) 0%, transparent 100%)',
            border: '1px solid color-mix(in srgb, #F97316 32%, transparent)',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10, flexShrink: 0,
              background: 'color-mix(in srgb, #F97316 18%, transparent)',
              color: '#F97316', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <window.LucideIcon name="flame" size={20} fill="#F97316" />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 16, color: '#FB923C', lineHeight: 1 }}>13 dagen streak</div>
              <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600, marginTop: 3 }}>+8 bonus Snaps · streak behouden</div>
            </div>
          </div>

          {/* Tier-transition: Level 50 (Strike) → 51 (Surge) — meer meaningful dan in-tier level-up */}
          <div style={{
            padding: '14px 16px', borderRadius: 10,
            background: 'linear-gradient(135deg, color-mix(in srgb, #00B4D8 18%, transparent) 0%, color-mix(in srgb, #FFD000 10%, transparent) 100%)',
            border: '1px solid color-mix(in srgb, #FFD000 38%, transparent)',
            display: 'flex', alignItems: 'center', gap: 12,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10, flexShrink: 0,
              background: 'color-mix(in srgb, #FFD000 22%, transparent)',
              color: t.dark ? '#FFD000' : '#B45309',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative',
            }}>
              <window.LucideIcon name="sparkles" size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: '#48CAE4', lineHeight: 1 }}>Strike</span>
                <span style={{ fontSize: 11, color: t.textDim, fontWeight: 700 }}>→</span>
                <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.dark ? '#FFD000' : '#B45309', lineHeight: 1 }}>Surge</span>
              </div>
              <div style={{ fontSize: 11, color: t.textSub, fontWeight: 700, marginTop: 4, textTransform: 'uppercase', letterSpacing: 0.4 }}>Nieuw tier · Level 50 → 51</div>
            </div>
          </div>
        </div>

        {/* Tier-XP progress bar — toont 10-tier-systeem context */}
        <div style={{
          marginTop: 12, padding: '12px 16px', borderRadius: 10,
          background: t.borderSoft,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 11, color: t.textSub, fontWeight: 700, marginBottom: 8 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontFamily: 'Fredoka One', fontSize: 13, color: t.dark ? '#FFD000' : '#B45309' }}>Surge</span>
              <span style={{ color: t.textDim }}>· Level 51 / 60</span>
            </span>
            <span>Tier 6 / 10</span>
          </div>
          {/* Tier-segments — 10 dots showing position in evolution */}
          <div style={{ display: 'flex', gap: 4, marginBottom: 10 }}>
            {['Spark','Glow','Flash','Beam','Strike','Surge','Thunder','Storm','Nova','Master'].map((tier, i) => (
              <div key={tier} title={tier} style={{
                flex: 1, height: 6, borderRadius: 9999,
                background: i < 5 ? '#48CAE4' : i === 5
                  ? (t.dark ? '#FFD000' : '#D97706')
                  : (t.dark ? '#0F172A' : '#E2E8F0'),
                opacity: i === 5 ? 1 : i < 5 ? 0.55 : 1,
                position: 'relative',
              }}>
                {i === 5 && (
                  <div style={{
                    position: 'absolute', top: -4, left: '50%', transform: 'translateX(-50%)',
                    width: 14, height: 14, borderRadius: 9999,
                    background: t.dark ? '#FFD000' : '#D97706',
                    border: `3px solid ${t.card}`,
                  }} />
                )}
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: t.textDim, fontWeight: 700, letterSpacing: 0.3 }}>
            <span>Strike</span>
            <span style={{ color: t.dark ? '#FFD000' : '#D97706' }}>● Surge — nu</span>
            <span>Master</span>
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 28px 0', display: 'flex', gap: 10 }}>
        <window.Btn t={t} kind="primary" size="md" icon="rotate-cw">Speel opnieuw</window.Btn>
        <window.Btn t={t} kind="secondary" size="md" icon="x-circle">Alleen foute (3)</window.Btn>
        <div style={{ flex: 1 }} />
        <window.Btn t={t} kind="ghost" size="md" iconRight="arrow-right">Volgende</window.Btn>
      </div>

      <div style={{ padding: '20px 28px 28px' }}>
        <div style={{
          padding: '12px 16px', borderRadius: 10,
          background: t.borderSoft,
          fontSize: 13, color: t.text, lineHeight: 1.5,
        }}>
          <b>Pulse:</b> "Lekker — 12/15 én een nieuw tier. Strike → Surge: ik krijg een nieuwe vorm. Die past perfect-vraag is gewoon lastig in het Engels; lees nog even de uitleg voor je verder gaat."
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── Low-score lift — 4/15 ───────────────────────── */
function QR_LowScore() {
  const t = qr_t_light;
  return (
    <div style={{ height: '100%', overflow: 'auto', background: t.bg, fontFamily: 'Nunito' }}>
      <div style={{
        padding: '14px 28px', borderBottom: `1px solid ${t.border}`, background: t.card,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <window.LucideIcon name="arrow-left" size={18} style={{ color: t.textSub }} />
        <window.ModeBadge mode="quiz" />
        <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600 }}>Scheikunde · H5 Reacties</span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: t.textSub }}>15 vragen · 6:48</span>
      </div>

      <div style={{ padding: '20px 28px 0' }}>
        {/* Custom hero — geen confetti, geen badge, focus op "wat nu" */}
        <div style={{
          padding: '22px 26px', borderRadius: 14,
          background: t.card, border: `1px solid ${t.border}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18 }}>
            <div>
              <div style={{
                fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
                color: t.textSub, marginBottom: 2,
              }}>Score</div>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 64, lineHeight: 1, color: t.text }}>27%</div>
              <div style={{ fontSize: 13, color: t.textSub, fontWeight: 700, marginTop: 4 }}>
                4 / 15 · Begin pas met deze stof
              </div>
            </div>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 14 }}>
              <window.PulseLottie size={56} />
              <div style={{
                padding: '10px 14px', borderRadius: 10,
                background: 'color-mix(in srgb, #FFD000 12%, transparent)',
                border: '1px solid color-mix(in srgb, #FFD000 30%, transparent)',
              }}>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 16, color: '#B45309', lineHeight: 1 }}>+5 Snaps</div>
                <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: t.textSub, marginTop: 3 }}>Voor de poging</div>
              </div>
            </div>
          </div>
        </div>

        {/* Reframe: "wat te doen", niet "wat fout was" */}
        <div style={{
          marginTop: 14, padding: '14px 16px', borderRadius: 10,
          background: 'color-mix(in srgb, #00B4D8 6%, transparent)',
          border: '1px solid color-mix(in srgb, #00B4D8 24%, transparent)',
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <window.LucideIcon name="compass" size={18} style={{ color: t.primary, marginTop: 1 }} />
          <div style={{ fontSize: 13, color: t.text, lineHeight: 1.55, flex: 1 }}>
            <b>Pulse:</b> "Geen ramp — nu weet je waar je staat. Je kent de basisbegrippen nog niet;
            lees eerst even de uitleg en kom dan terug. Geen schaamte, dit is letterlijk hoe leren werkt."
          </div>
        </div>
      </div>

      {/* Cross-pijler — bovenaan, niet onderaan */}
      <div style={{ padding: '20px 28px 0' }}>
        <h3 style={{ margin: '0 0 12px', fontWeight: 800, fontSize: 14, color: t.text }}>Begin hier</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <window.HandoffCard pillar="leren" direction="to"
            title="Lees uitleg — §5.1 Reactietypes"
            subtitle="8 min · Pulse vat samen na elke alinea" />
          <window.HandoffCard pillar="leren" direction="to"
            title="Bekijk Pulse-uitleg over Stoichiometrie"
            subtitle="3 min video · met voorbeeld-sommen" />
        </div>
      </div>

      <div style={{ padding: '20px 28px 28px', display: 'flex', gap: 10 }}>
        <window.Btn t={t} kind="ghost" size="md">Probeer toch opnieuw</window.Btn>
        <div style={{ flex: 1 }} />
        <window.Btn t={t} kind="primary" size="md" iconRight="arrow-right">Eerst lezen, dan terug</window.Btn>
      </div>
    </div>
  );
}

window.QR_Default = QR_Default;
window.QR_Perfect = QR_Perfect;
window.QR_NewHighscore = QR_NewHighscore;
window.QR_AntiFarming = QR_AntiFarming;
window.QR_StreakLevel = QR_StreakLevel;
window.QR_LowScore = QR_LowScore;