// Brief 06 — Achievements / Trophy Case (web)
// 4 sleutel-states: default-mixed, all-locked (eerste bezoek), achieved-only, unlock-modal.
// V1-Light: 12 hardcoded badges (binnen 10-15 range).

const BADGES = [
  // Quiz-mastery (5)
  { id: 'first-quiz',        cat: 'quiz',     name: 'Eerste quiz',       desc: 'Speel je eerste quiz',         icon: 'flag',          progress: 1, target: 1,   xp: 25,   snaps: 50,  unlocked: '21 jan' },
  { id: 'perfect-score',     cat: 'quiz',     name: 'Scherpe schutter',  desc: 'Haal 100% op een quiz',         icon: 'crosshair',     progress: 1, target: 1,   xp: 50,   snaps: 100, unlocked: '8 feb' },
  { id: 'quiz-streak-100',   cat: 'quiz',     name: '100 op een rij',    desc: '100 vragen achter elkaar goed', icon: 'zap',           progress: 67, target: 100, xp: 150,  snaps: 300, locked: true },
  { id: 'hundred-quizzes',   cat: 'quiz',     name: 'Centenair',         desc: 'Speel 100 quizzes',             icon: 'trophy',        progress: 87, target: 100, xp: 200,  snaps: 400, locked: true },
  { id: 'master-tier',       cat: 'quiz',     name: 'Master-tier',       desc: 'Bereik mastery in 1 vak',       icon: 'graduation-cap',progress: 0,  target: 4,   xp: 500,  snaps: 1000, locked: true },
  // Streak (3)
  { id: 'streak-7',          cat: 'streak',   name: '7-dagen streak',    desc: '7 dagen op rij actief',         icon: 'flame',         progress: 7,  target: 7,   xp: 75,   snaps: 150, unlocked: '15 mrt' },
  { id: 'streak-30',         cat: 'streak',   name: '30-dagen streak',   desc: '30 dagen op rij actief',        icon: 'flame',         progress: 12, target: 30,  xp: 200,  snaps: 500, locked: true },
  { id: 'streak-100',        cat: 'streak',   name: 'Honderd dagen',     desc: '100 dagen op rij',              icon: 'flame',         progress: 12, target: 100, xp: 500,  snaps: 1500, locked: true },
  // Snaps (2)
  { id: 'first-100-snaps',   cat: 'snaps',    name: 'Eerste honderd',    desc: 'Verzamel 100 Snaps',            icon: 'coins',         progress: 1240, target: 100, xp: 25, snaps: 50,  unlocked: '23 jan' },
  { id: 'first-1000-snaps',  cat: 'snaps',    name: 'Snap-meester',      desc: '1.000 Snaps verdiend',          icon: 'coins',         progress: 1240, target: 1000,xp: 100,  snaps: 200, unlocked: '12 apr' },
  // Cross-pijler (2) — speciaal!
  { id: 'three-pillar-day',  cat: 'cross',    name: 'Drie pijlers één dag', desc: '1 actie in Leren+Oefenen+Plannen op zelfde dag', icon: 'sparkles', progress: 1, target: 1, xp: 100, snaps: 200, unlocked: '3 apr', special: true },
  { id: 'cross-7d',          cat: 'cross',    name: '7-dagen cross-pijler', desc: '7 dagen cross-pijler op rij',  icon: 'sparkles',      progress: 4,  target: 7,   xp: 250,  snaps: 500, locked: true, special: true },
  // Special (3)
  { id: 'examensim-survivor',cat: 'special',  name: 'Examensim-survivor',desc: 'Voltooi je eerste examensim',   icon: 'shield-check',  progress: 0,  target: 1,   xp: 150,  snaps: 300, locked: true },
  { id: 'ai-creator-10',     cat: 'special',  name: 'Quiz-maker',        desc: 'Maak 10 quizzes met Pulse',     icon: 'wand-2',        progress: 6,  target: 10,  xp: 200,  snaps: 400, locked: true },
  { id: 'leaderboard-top100',cat: 'special',  name: 'Top-100',           desc: 'Sta in de daily top 100',       icon: 'medal',         progress: 1,  target: 1,   xp: 100,  snaps: 200, unlocked: '24 apr' },
];

const CATS = [
  { id: 'all',     label: 'Alle',          icon: 'grid-3x3' },
  { id: 'quiz',    label: 'Quiz-mastery',  icon: 'target' },
  { id: 'streak',  label: 'Streak',        icon: 'flame' },
  { id: 'snaps',   label: 'Snaps',         icon: 'coins' },
  { id: 'cross',   label: 'Cross-pijler',  icon: 'sparkles' },
  { id: 'special', label: 'Speciaal',      icon: 'star' },
];

/* ───────────────────────── Badge card ───────────────────────── */
function BadgeCard({ t, b, large = false }) {
  const isUnlocked = !!b.unlocked && !b.locked;
  const progressPct = isUnlocked ? 100 : Math.min(100, Math.round((b.progress / b.target) * 100));
  const almost = !isUnlocked && progressPct >= 50;

  // Cross-pijler special: gradient ring
  const specialBorder = b.special
    ? (t.dark
        ? 'linear-gradient(135deg, #00B4D8 0%, #22C55E 50%, #9D4EDD 100%)'
        : 'linear-gradient(135deg, #0096C7 0%, #16A34A 50%, #7C3AED 100%)')
    : null;

  const iconColor = isUnlocked
    ? (b.special ? (t.dark ? '#00B4D8' : '#0096C7') : t.gold)
    : t.textDim;
  const iconBg = isUnlocked
    ? (b.special ? (t.dark ? 'rgba(0,180,216,0.16)' : 'rgba(0,150,199,0.10)') : t.goldDim)
    : (t.dark ? '#1E293B' : '#F1F5F9');

  return (
    <div style={{
      position: 'relative',
      background: t.card,
      borderRadius: 12,
      padding: specialBorder ? 0 : 0,
      ...(specialBorder
        ? { backgroundImage: specialBorder, padding: 1.5 }
        : { border: `1px solid ${t.border}` }),
      opacity: isUnlocked ? 1 : 0.92,
    }}>
      <div style={{
        background: t.card, borderRadius: 11, padding: 14,
        height: '100%', display: 'flex', flexDirection: 'column', gap: 8,
        ...(isUnlocked ? {} : { backgroundImage: t.dark
          ? 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 8px, transparent 8px 16px)'
          : 'repeating-linear-gradient(135deg, rgba(15,23,42,0.015) 0 8px, transparent 8px 16px)' }),
      }}>
        {/* Header row */}
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10,
            background: iconBg, color: iconColor,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative', flexShrink: 0,
          }}>
            <window.LucideIcon name={b.icon} size={20} fill={isUnlocked && b.icon === 'flame' ? 'currentColor' : 'none'} />
            {!isUnlocked && (
              <div style={{
                position: 'absolute', bottom: -3, right: -3,
                width: 16, height: 16, borderRadius: 9999,
                background: t.dark ? '#0A0F1E' : '#fff',
                border: `1.5px solid ${t.border}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: t.textSub,
              }}>
                <window.LucideIcon name="lock" size={9} />
              </div>
            )}
            {isUnlocked && (
              <div style={{
                position: 'absolute', bottom: -3, right: -3,
                width: 16, height: 16, borderRadius: 9999,
                background: '#16A34A', border: `1.5px solid ${t.card}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
              }}>
                <window.LucideIcon name="check" size={9} strokeWidth={3} />
              </div>
            )}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 13, fontWeight: 800, color: isUnlocked ? t.text : t.textSub,
              lineHeight: 1.2, marginBottom: 2,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              {b.name}
              {b.special && <window.LucideIcon name="sparkles" size={11} style={{ color: t.dark ? '#9D4EDD' : '#7C3AED' }} />}
            </div>
            <div style={{ fontSize: 11, color: t.textSub, lineHeight: 1.4 }}>
              {b.desc}
            </div>
          </div>
        </div>

        {/* Progress / unlocked-date */}
        {isUnlocked ? (
          <div style={{
            marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 6,
            padding: '4px 8px', borderRadius: 6, alignSelf: 'flex-start',
            background: t.dark ? 'rgba(34,197,94,0.10)' : 'rgba(22,163,74,0.08)',
            color: t.dark ? '#4ADE80' : '#16A34A',
            fontSize: 10, fontWeight: 800, letterSpacing: 0.4,
          }}>
            <window.LucideIcon name="check-circle-2" size={10} />
            BEHAALD · {b.unlocked}
          </div>
        ) : (
          <div style={{ marginTop: 'auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, fontWeight: 700, color: t.textSub, marginBottom: 4 }}>
              <span>{b.progress.toLocaleString('nl-NL')} / {b.target.toLocaleString('nl-NL')}</span>
              <span style={{ color: almost ? (t.dark ? '#FBBF24' : '#D97706') : t.textSub }}>
                {progressPct}%{almost && ' · bijna'}
              </span>
            </div>
            <div style={{ height: 4, background: t.dark ? '#0F1525' : '#F1F5F9', borderRadius: 9999, overflow: 'hidden' }}>
              <div style={{
                width: `${progressPct}%`, height: '100%',
                background: almost ? (t.dark ? '#FBBF24' : '#D97706') : t.primary,
                borderRadius: 9999,
              }} />
            </div>
          </div>
        )}

        {/* Reward chips */}
        <div style={{ display: 'flex', gap: 4, marginTop: 2 }}>
          <span style={{
            fontSize: 9, fontWeight: 800, padding: '2px 6px', borderRadius: 4, letterSpacing: 0.4,
            background: t.goldDim, color: t.gold,
          }}>+{b.xp} XP</span>
          <span style={{
            fontSize: 9, fontWeight: 800, padding: '2px 6px', borderRadius: 4, letterSpacing: 0.4,
            background: t.dark ? '#1E293B' : '#F1F5F9', color: t.textSub,
          }}>+{b.snaps} Snaps</span>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── Topbar (reuses streak-chip via window) ───────────────────────── */
function ACH_Topbar({ t }) {
  return (
    <div style={{
      height: 56, background: t.topbar, borderBottom: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', padding: '0 20px', gap: 12,
    }}>
      <div style={{ flex: 1, color: t.textSub, fontSize: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
        <window.LucideIcon name="search" size={13} />
        <span>Zoek in trofeeën …</span>
      </div>
      <window.StreakChipInline t={t} count={12} active={false} />
      <div style={{
        background: t.dark ? 'rgba(255,208,0,0.14)' : 'rgba(217,119,6,0.10)',
        color: t.gold, borderRadius: 9999, padding: '6px 12px',
        display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 800,
      }}>
        <window.LucideIcon name="zap" size={12} />1.240
      </div>
      <div style={{
        width: 32, height: 32, borderRadius: 9999,
        background: t.dark ? '#1E293B' : '#F1F5F9', color: t.text,
        fontWeight: 800, fontSize: 13,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>SB</div>
    </div>
  );
}

/* ───────────────────────── Header stats + filters (shared) ───────────────────────── */
function ACH_Header({ t, achieved, total, activeCat = 'all', activeFilter = 'mixed' }) {
  const pct = Math.round((achieved / total) * 100);
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, marginBottom: 14 }}>
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
          }}>Trofeeën</div>
          <h1 style={{ fontFamily: 'Fredoka One', fontSize: 28, lineHeight: 1.1, margin: '4px 0 0' }}>
            Behaald én bijna behaald — naast elkaar.
          </h1>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <window.Btn t={t} kind="ghost" size="sm" icon="arrow-up-down">Sort: recent</window.Btn>
          <window.Btn t={t} kind="ghost" size="sm" icon="filter">Filter</window.Btn>
        </div>
      </div>

      {/* Stat strip */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr 1.6fr', gap: 10, marginBottom: 14,
      }}>
        <div style={{
          background: t.card, border: `1px solid ${t.border}`, borderRadius: 10, padding: '12px 14px',
        }}>
          <div style={{ fontSize: 10, color: t.textSub, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase' }}>Behaald</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
            <span style={{ fontFamily: 'Fredoka One', fontSize: 24, color: '#16A34A' }}>{achieved}</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: t.textSub }}>/ {total}</span>
          </div>
        </div>
        <div style={{
          background: t.card, border: `1px solid ${t.border}`, borderRadius: 10, padding: '12px 14px',
        }}>
          <div style={{ fontSize: 10, color: t.textSub, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase' }}>Voortgang</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
            <span style={{ fontFamily: 'Fredoka One', fontSize: 24, color: t.primary }}>{pct}%</span>
          </div>
          <div style={{ height: 4, background: t.dark ? '#0F1525' : '#F1F5F9', borderRadius: 9999, overflow: 'hidden', marginTop: 6 }}>
            <div style={{ width: `${pct}%`, height: '100%', background: t.primary }} />
          </div>
        </div>
        <div style={{
          background: t.card, border: `1px solid ${t.border}`, borderRadius: 10, padding: '10px 14px',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <window.PulseLottie size={32} animate={false} />
          <div style={{ flex: 1, fontSize: 12, color: t.textSub, lineHeight: 1.45 }}>
            <b style={{ color: t.text }}>3 staan op 50%+</b> — nog één goede week en je hebt ze.
          </div>
        </div>
      </div>

      {/* Category tabs */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
        {CATS.map(c => {
          const a = c.id === activeCat;
          return (
            <div key={c.id} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '6px 12px', borderRadius: 9999,
              background: a ? t.primary : (t.dark ? '#1E293B' : '#fff'),
              color: a ? '#fff' : t.textSub,
              border: a ? 'none' : `1px solid ${t.border}`,
              fontSize: 12, fontWeight: 800, cursor: 'pointer',
            }}>
              <window.LucideIcon name={c.icon} size={12} />
              {c.label}
            </div>
          );
        })}
      </div>

      {/* Filter pills (achieved/locked/all) */}
      <div style={{ display: 'flex', gap: 4, padding: 3, borderRadius: 9999, background: t.dark ? '#1E293B' : '#F1F5F9', alignSelf: 'flex-start', width: 'fit-content' }}>
        {[
          { id: 'mixed', label: 'Alle' },
          { id: 'achieved', label: 'Behaald' },
          { id: 'locked', label: 'Nog te behalen' },
        ].map(f => {
          const a = f.id === activeFilter;
          return (
            <div key={f.id} style={{
              padding: '4px 12px', borderRadius: 9999,
              background: a ? t.card : 'transparent',
              color: a ? t.text : t.textSub,
              fontSize: 11, fontWeight: 800,
              boxShadow: a ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
              cursor: 'pointer',
            }}>{f.label}</div>
          );
        })}
      </div>
    </div>
  );
}

/* ───────────────────────── State 1 — Default mixed (with "Bijna behaald" hero strip) ───────────────────────── */
function ACH_DefaultMixed() {
  const t = window.theme(false);
  const achieved = BADGES.filter(b => !b.locked);
  const almostThere = BADGES
    .filter(b => b.locked && (b.progress / b.target) >= 0.5)
    .sort((a, b) => (b.progress / b.target) - (a.progress / a.target));
  const stillLocked = BADGES.filter(b => b.locked && (b.progress / b.target) < 0.5);

  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, color: t.text }}>
      <window.SlimSidebar t={t} active="ranglijst" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <ACH_Topbar t={t} />
        <div style={{ flex: 1, padding: '20px 24px', overflow: 'auto' }}>
          <ACH_Header t={t} achieved={achieved.length} total={BADGES.length} />

          {/* Recent unlocks strip — always at top */}
          <SectionLabel t={t} icon="sparkles" iconColor={t.primary}>
            Recent behaald
            <span style={{ fontWeight: 600, color: t.textSub, marginLeft: 8 }}>laatste 3</span>
          </SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 18 }}>
            {achieved.slice(-3).reverse().map(b => <BadgeCard key={b.id} t={t} b={b} />)}
            <div style={{
              border: `1px dashed ${t.border}`, borderRadius: 12, padding: 14,
              display: 'flex', flexDirection: 'column', gap: 6, justifyContent: 'center',
              fontSize: 12, color: t.textSub, lineHeight: 1.5,
            }}>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.text }}>+{achieved.length - 3} eerder</div>
              Bekijk je volledige geschiedenis in <span style={{ color: t.primary, fontWeight: 800 }}>Sort: recent</span>.
            </div>
          </div>

          {/* Bijna behaald — addressing challenge-question 2 */}
          <SectionLabel t={t} icon="flame" iconColor={t.dark ? '#FBBF24' : '#D97706'}>
            Bijna behaald
            <span style={{ fontWeight: 600, color: t.textSub, marginLeft: 8 }}>≥ 50% voortgang · {almostThere.length}</span>
            <span style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 800, color: t.dark ? '#FBBF24' : '#D97706', letterSpacing: 0.5, padding: '2px 6px', borderRadius: 4, background: t.dark ? 'rgba(251,191,36,0.10)' : 'rgba(217,119,6,0.08)' }}>
              MOMENTUM
            </span>
          </SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 18 }}>
            {almostThere.map(b => <BadgeCard key={b.id} t={t} b={b} />)}
          </div>

          {/* Still locked — quieter */}
          <SectionLabel t={t} icon="lock" iconColor={t.textSub}>
            Nog op te bouwen
            <span style={{ fontWeight: 600, color: t.textSub, marginLeft: 8 }}>{stillLocked.length}</span>
          </SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {stillLocked.map(b => <BadgeCard key={b.id} t={t} b={b} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

function SectionLabel({ t, icon, iconColor, children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10,
      fontSize: 13, fontWeight: 800, color: t.text,
    }}>
      <window.LucideIcon name={icon} size={14} style={{ color: iconColor }} />
      {children}
    </div>
  );
}

/* ───────────────────────── State 2 — All locked (eerste bezoek) ───────────────────────── */
function ACH_AllLocked() {
  const t = window.theme(false);
  // All badges with progress 0
  const empty = BADGES.map(b => ({ ...b, progress: 0, locked: true, unlocked: undefined }));
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, color: t.text }}>
      <window.SlimSidebar t={t} active="ranglijst" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <ACH_Topbar t={t} />
        <div style={{ flex: 1, padding: '20px 24px', overflow: 'auto' }}>
          <div style={{ marginBottom: 14 }}>
            <div style={{
              fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
            }}>Trofeeën · eerste bezoek</div>
            <h1 style={{ fontFamily: 'Fredoka One', fontSize: 26, lineHeight: 1.1, margin: '4px 0 0' }}>
              Niets behaald — yet.
            </h1>
            <p style={{ fontSize: 13, color: t.textSub, margin: '4px 0 0' }}>
              Speel je eerste quiz en je krijgt 'm meteen.
            </p>
          </div>

          {/* CTA hero */}
          <div style={{
            background: t.card, border: `1px dashed ${t.primary}`, borderRadius: 12,
            padding: 16, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <window.PulseLottie size={48} />
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.text }}>
                Eerste trofee = "Eerste quiz". Klaar.
              </div>
              <div style={{ fontSize: 12, color: t.textSub, marginTop: 2 }}>
                +25 XP, +50 Snaps, en je trofeekast staat niet meer leeg.
              </div>
            </div>
            <window.Btn t={t} kind="primary" size="md" icon="zap">Speel een quiz</window.Btn>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {empty.map(b => <BadgeCard key={b.id} t={t} b={b} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── State 3 — Filter: behaald only ───────────────────────── */
function ACH_AchievedOnly() {
  const t = window.theme(true); // dark variant
  const achieved = BADGES.filter(b => !b.locked);
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, color: t.text }}>
      <window.SlimSidebar t={t} active="ranglijst" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <ACH_Topbar t={t} />
        <div style={{ flex: 1, padding: '20px 24px', overflow: 'auto' }}>
          <ACH_Header t={t} achieved={achieved.length} total={BADGES.length} activeFilter="achieved" />
          <SectionLabel t={t} icon="check-circle-2" iconColor={t.dark ? '#4ADE80' : '#16A34A'}>
            Wat je hebt gewonnen
            <span style={{ fontWeight: 600, color: t.textSub, marginLeft: 8 }}>{achieved.length}</span>
          </SectionLabel>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {achieved.map(b => <BadgeCard key={b.id} t={t} b={b} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── State 4 — Unlock celebration modal ───────────────────────── */
function ACH_UnlockModal() {
  const t = window.theme(true); // post-quiz context, dark celebration

  // Background context — dimmed quiz-result-like view
  return (
    <div style={{ position: 'relative', height: '100%', background: t.bg, color: t.text, overflow: 'hidden' }}>
      {/* Faded backdrop showing context */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.35, filter: 'blur(2px)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ height: 56, background: t.topbar, borderBottom: `1px solid ${t.border}` }} />
        <div style={{ flex: 1, padding: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            background: t.card, border: `1px solid ${t.border}`, borderRadius: 12, padding: 32,
            width: 460, textAlign: 'center',
          }}>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 56, color: '#16A34A' }}>87%</div>
            <div style={{ fontSize: 13, color: t.textSub }}>Quiz voltooid · Biologie H3</div>
          </div>
        </div>
      </div>

      {/* Dim overlay */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)' }} />

      {/* Toast-modal — slides in from top, doesn't block */}
      <div style={{
        position: 'absolute', top: 80, left: '50%', transform: 'translateX(-50%)',
        width: 440, background: t.card,
        borderRadius: 14, overflow: 'hidden',
        boxShadow: '0 20px 60px rgba(0,0,0,0.50), 0 0 0 1px rgba(0,180,216,0.25)',
      }}>
        {/* Top accent gradient bar */}
        <div style={{
          height: 4,
          background: 'linear-gradient(90deg, #00B4D8 0%, #22C55E 50%, #9D4EDD 100%)',
        }} />

        <div style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 14 }}>
          {/* Big badge icon with subtle glow */}
          <div style={{
            width: 64, height: 64, borderRadius: 16, flexShrink: 0,
            background: 'linear-gradient(135deg, rgba(0,180,216,0.20) 0%, rgba(157,78,221,0.20) 100%)',
            color: '#00B4D8',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative',
            border: '1.5px solid rgba(0,180,216,0.40)',
          }}>
            <window.LucideIcon name="sparkles" size={30} />
            {/* Tiny check */}
            <div style={{
              position: 'absolute', bottom: -4, right: -4,
              width: 22, height: 22, borderRadius: 9999,
              background: '#16A34A', border: `2px solid ${t.card}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
            }}>
              <window.LucideIcon name="check" size={12} strokeWidth={3} />
            </div>
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 10, color: '#00B4D8', fontWeight: 800, letterSpacing: 0.8, textTransform: 'uppercase',
              marginBottom: 2,
            }}>
              Achievement · cross-pijler
            </div>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 20, color: t.text, lineHeight: 1.1 }}>
              Drie pijlers één dag — alles aangetikt.
            </div>
            <div style={{ fontSize: 12, color: t.textSub, marginTop: 4 }}>
              Tof! Leren, Oefenen én Plannen op één dag.
            </div>
          </div>

          <div style={{
            width: 24, height: 24, borderRadius: 8, color: t.textSub,
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          }}>
            <window.LucideIcon name="x" size={14} />
          </div>
        </div>

        {/* Reward strip */}
        <div style={{
          padding: '10px 18px', borderTop: `1px solid ${t.border}`,
          display: 'flex', alignItems: 'center', gap: 10,
          background: t.dark ? 'rgba(0,180,216,0.05)' : 'rgba(0,150,199,0.04)',
        }}>
          <span style={{
            fontSize: 11, fontWeight: 800, padding: '4px 10px', borderRadius: 9999,
            background: t.goldDim, color: t.gold,
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            <window.LucideIcon name="zap" size={11} />
            +100 XP
          </span>
          <span style={{
            fontSize: 11, fontWeight: 800, padding: '4px 10px', borderRadius: 9999,
            background: t.dark ? '#1E293B' : '#F1F5F9', color: t.textSub,
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            <window.LucideIcon name="coins" size={11} />
            +200 Snaps
          </span>
          <span style={{ flex: 1 }} />
          <window.Btn t={t} kind="ghost" size="sm">Bekijk trofeekast</window.Btn>
          <window.Btn t={t} kind="primary" size="sm" iconRight="arrow-right">Verder</window.Btn>
        </div>
      </div>

      {/* Caption */}
      <div style={{
        position: 'absolute', bottom: 24, left: '50%', transform: 'translateX(-50%)',
        background: 'rgba(15,23,42,0.85)', border: `1px solid ${t.border}`,
        padding: '8px 14px', borderRadius: 9999, color: t.textSub,
        fontSize: 11, fontWeight: 700,
      }}>
        Toast-pattern · auto-dismiss na 6s · niet-blokkerend boven flow
      </div>
    </div>
  );
}

Object.assign(window, {
  ACH_DefaultMixed, ACH_AllLocked, ACH_AchievedOnly, ACH_UnlockModal,
});