// Brief 06 — Leaderboard states
// 5 sleutel-states + supporting subcomponents.
// Reuses window.{LucideIcon, theme, SlimSidebar, Btn, Card, PulseLottie}.

const lbT = window.theme;

/* ───────────────────────── Topbar (shared) ───────────────────────── */
function LB_Topbar({ t, streakCount = 12, streakActive = true }) {
  return (
    <div style={{
      height: 56, background: t.topbar, borderBottom: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', padding: '0 20px', gap: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
        <div style={{
          background: t.dark ? '#1E293B' : '#F1F5F9',
          borderRadius: 10, padding: '7px 12px',
          display: 'flex', alignItems: 'center', gap: 6,
          color: t.textSub, fontSize: 12, fontWeight: 600,
        }}>
          <window.LucideIcon name="search" size={13} />
          Zoek in vakken, hoofdstukken
        </div>
      </div>
      {/* Inline streak-chip */}
      <window.StreakChipInline t={t} count={streakCount} active={streakActive} />
      <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>
  );
}

/* ───────────────────────── Reset countdown chip ───────────────────────── */
function ResetCountdown({ t, label = 'Daily reset', time = '4u 23m' }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 9999,
      background: t.dark ? 'rgba(0,180,216,0.10)' : 'rgba(0,150,199,0.08)',
      color: t.primary,
      fontSize: 11, fontWeight: 700, letterSpacing: 0.3,
    }}>
      <window.LucideIcon name="timer" size={11} />
      {label} · {time}
    </div>
  );
}

/* ───────────────────────── Leaderboard row ───────────────────────── */
function LB_Row({ t, rank, name, level, xp, isMe, top3, dim }) {
  // top3: 'gold' | 'silver' | 'bronze' | undefined
  const top3Color = {
    gold:   { bg: t.dark ? 'rgba(255,208,0,0.10)' : 'rgba(217,119,6,0.07)',
              ring: t.dark ? '#FFD000' : '#D97706',
              chip: t.dark ? '#FFD000' : '#D97706' },
    silver: { bg: t.dark ? 'rgba(203,213,225,0.06)' : 'rgba(100,116,139,0.06)',
              ring: t.dark ? '#CBD5E1' : '#64748B',
              chip: t.dark ? '#CBD5E1' : '#475569' },
    bronze: { bg: t.dark ? 'rgba(217,119,6,0.07)' : 'rgba(180,83,9,0.05)',
              ring: t.dark ? '#D97706' : '#B45309',
              chip: t.dark ? '#FB923C' : '#B45309' },
  }[top3];

  // background priority: me > top3 > default
  const bg = isMe
    ? (t.dark ? 'rgba(0,180,216,0.10)' : 'rgba(0,150,199,0.06)')
    : (top3Color ? top3Color.bg : 'transparent');

  const borderLeft = isMe
    ? `3px solid ${t.primary}`
    : (top3Color ? `3px solid ${top3Color.ring}` : '3px solid transparent');

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '32px 32px 1fr auto',
      alignItems: 'center', gap: 10,
      padding: '8px 12px 8px 9px',
      borderLeft,
      background: bg,
      borderRadius: 8,
      opacity: dim ? 0.45 : 1,
    }}>
      {/* Rank */}
      <div style={{
        fontFamily: 'Fredoka One',
        fontSize: top3 ? 16 : 13,
        color: top3Color ? top3Color.chip : t.textSub,
        textAlign: 'center',
      }}>
        {top3 === 'gold' ? '1' : top3 === 'silver' ? '2' : top3 === 'bronze' ? '3' : rank}
      </div>
      {/* Avatar */}
      <div style={{
        width: 28, height: 28, borderRadius: 9999,
        background: isMe ? t.primaryDim : (t.dark ? '#1E293B' : '#F1F5F9'),
        color: isMe ? t.primary : t.textSub,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontWeight: 800, fontSize: 11,
        border: top3 ? `1.5px solid ${top3Color.ring}` : 'none',
      }}>{name.slice(0, 2).toUpperCase()}</div>
      {/* Name + level */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
        <span style={{
          fontWeight: isMe ? 800 : 700, fontSize: 13,
          color: t.text,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>
          {name}{isMe && <span style={{ marginLeft: 6, color: t.primary, fontSize: 10, fontWeight: 800, letterSpacing: 0.5 }}>· JIJ</span>}
        </span>
        <span style={{
          fontSize: 10, fontWeight: 800, letterSpacing: 0.4,
          color: t.textSub,
          padding: '2px 6px',
          background: t.dark ? '#1E293B' : '#F1F5F9',
          borderRadius: 6,
        }}>LVL {level}</span>
      </div>
      {/* XP */}
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
        color: isMe ? t.primary : t.text,
        display: 'flex', alignItems: 'center', gap: 4,
      }}>
        <window.LucideIcon name="zap" size={11} style={{ color: t.gold }} />
        {xp.toLocaleString('nl-NL')}
      </div>
    </div>
  );
}

/* ───────────────────────── Period card (daily OR weekly) ───────────────────────── */
const DAILY_DATA = [
  { rank: 1, name: 'kwantum_kat',  level: 14, xp: 1820, top3: 'gold' },
  { rank: 2, name: 'mees_42',      level: 12, xp: 1540, top3: 'silver' },
  { rank: 3, name: 'flink_b',      level: 11, xp: 1390, top3: 'bronze' },
  { rank: 4, name: 'sara_h',       level: 10, xp: 1180 },
  { rank: 5, name: 'tom_van_d',    level: 9,  xp: 1050 },
  { rank: 6, name: 'sam_bakker',   level: 7,  xp: 980, isMe: true },
  { rank: 7, name: 'lieke_3',      level: 8,  xp: 920 },
];
const WEEKLY_DATA = [
  { rank: 1, name: 'flink_b',      level: 11, xp: 9320, top3: 'gold' },
  { rank: 2, name: 'kwantum_kat',  level: 14, xp: 8740, top3: 'silver' },
  { rank: 3, name: 'sam_bakker',   level: 7,  xp: 8120, top3: 'bronze', isMe: true },
  { rank: 4, name: 'mees_42',      level: 12, xp: 7980 },
  { rank: 5, name: 'lieke_3',      level: 8,  xp: 7400 },
  { rank: 6, name: 'sara_h',       level: 10, xp: 7180 },
  { rank: 7, name: 'tom_van_d',    level: 9,  xp: 6950 },
];

function PeriodCard({ t, period, data, myRank, myXP, totalPlayers, resetTime, badge }) {
  // Footer copy schaalt mee met user-rank:
  // - in top 7 (zichtbaar in lijst): "+ N spelers · bekijk top 100"
  // - 8..100 (in top 100 maar niet getoond): "JIJ — rank #X in top 100 · bekijk lijst"
  // - >100 (outside top 100): "JIJ — rank #X · bekijk jouw positie" (route → around-me-view)
  const visibleMaxRank = data.length > 0 ? Math.max(...data.map(r => r.rank)) : 7;
  const inVisible = myRank <= visibleMaxRank;
  const inTop100 = myRank <= 100;
  let footer;
  if (inVisible) {
    footer = <>+ {(totalPlayers - data.length).toLocaleString('nl-NL')} spelers · <span style={{ color: t.primary, cursor: 'pointer' }}>bekijk top 100</span></>;
  } else if (inTop100) {
    footer = <><b style={{ color: t.primary }}>JIJ — rank #{myRank}</b> in top 100 · <span style={{ color: t.primary, cursor: 'pointer' }}>bekijk lijst</span></>;
  } else {
    footer = <><b style={{ color: t.primary }}>JIJ — rank #{myRank.toLocaleString('nl-NL')}</b> · <span style={{ color: t.primary, cursor: 'pointer' }}>bekijk jouw positie</span></>;
  }
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
      display: 'flex', flexDirection: 'column', minHeight: 0,
    }}>
      {/* Header */}
      <div style={{
        padding: '14px 16px', borderBottom: `1px solid ${t.borderSoft}`,
        display: 'flex', alignItems: 'flex-start', gap: 12,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
            <span style={{
              fontFamily: 'Fredoka One', fontSize: 18, color: t.text, lineHeight: 1,
            }}>{period === 'daily' ? 'Vandaag' : 'Deze week'}</span>
            {badge && <span style={{
              fontSize: 10, fontWeight: 800, letterSpacing: 0.5,
              padding: '2px 7px', borderRadius: 9999,
              background: t.primaryDim, color: t.primary,
            }}>{badge}</span>}
          </div>
          <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600 }}>
            {period === 'daily' ? '27 apr · top 100' : 'wk 17 · 21–27 apr'} · {totalPlayers.toLocaleString('nl-NL')} spelers
          </div>
        </div>
        <ResetCountdown t={t} label={period === 'daily' ? 'Reset' : 'Reset zo'} time={resetTime} />
      </div>

      {/* My quick-stat strip */}
      <div style={{
        margin: '10px 12px 6px', padding: '8px 12px',
        background: t.dark ? 'rgba(0,180,216,0.07)' : 'rgba(0,150,199,0.05)',
        border: `1px dashed ${t.primary}`, borderRadius: 8,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: t.primaryDim, color: t.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 800, fontSize: 11,
        }}>JIJ</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.text }}>
            Plek <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.primary, marginLeft: 2 }}>#{myRank}</span>
            <span style={{ color: t.textSub, marginLeft: 8, fontWeight: 600 }}>{myXP.toLocaleString('nl-NL')} XP</span>
          </div>
          <div style={{ fontSize: 11, color: t.textSub, marginTop: 1 }}>
            {period === 'daily' ? 'Elke quiz tilt je op.' : 'Stabiel beeld over 7 dagen.'}
          </div>
        </div>
      </div>

      {/* List */}
      <div style={{ padding: '6px 8px 12px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        {data.map((row, i) => (
          <LB_Row key={i} t={t} {...row} />
        ))}
        <div style={{
          textAlign: 'center', fontSize: 11, color: t.textSub, fontWeight: 700,
          padding: '8px 0 2px',
        }}>
          {footer}
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── State 1 — Default mixed (daily + weekly) ───────────────────────── */
function LB_DefaultMixed() {
  const t = lbT(false);
  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 }}>
        <LB_Topbar t={t} />
        <div style={{ flex: 1, padding: '20px 24px', overflow: 'hidden' }}>
          {/* Page header */}
          <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',
                marginBottom: 4,
              }}>Ranglijst</div>
              <h1 style={{
                fontFamily: 'Fredoka One', fontSize: 28, lineHeight: 1.1, margin: 0, color: t.text,
              }}>Daily + Weekly verplicht. Monthly kan aan.</h1>
              <p style={{ fontSize: 13, color: t.textSub, margin: '4px 0 0', maxWidth: 620 }}>
                Daily geeft return-trigger, weekly stabiel beeld — beide altijd zichtbaar (Robin's beslissing). Monthly is opt-in derde kolom; matcht school-cijferperiodes. Geen all-time in V1: veteranen zouden domineren, dat strijdt met "geen schaamte".
              </p>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <window.Btn t={t} kind="ghost" size="sm" icon="users">Around me</window.Btn>
              <window.Btn t={t} kind="ghost" size="sm" icon="archive">Archief</window.Btn>
            </div>
          </div>

          {/* Period tabs — Daily/Weekly verplicht (altijd 'aan'), Monthly optioneel */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12,
            padding: '8px 12px', background: t.dark ? '#1E293B' : '#F1F5F9',
            borderRadius: 10, border: `1px solid ${t.borderSoft}`,
          }}>
            <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: t.textSub, marginRight: 4 }}>Periode</span>
            <span style={{
              fontSize: 12, fontWeight: 800, padding: '6px 12px', borderRadius: 6,
              background: t.primary, color: '#FFF',
            }}>Daily <span style={{ opacity: 0.7, fontWeight: 600, marginLeft: 4 }}>verplicht</span></span>
            <span style={{
              fontSize: 12, fontWeight: 800, padding: '6px 12px', borderRadius: 6,
              background: t.primary, color: '#FFF',
            }}>Weekly <span style={{ opacity: 0.7, fontWeight: 600, marginLeft: 4 }}>verplicht</span></span>
            <span style={{
              fontSize: 12, fontWeight: 700, padding: '6px 12px', borderRadius: 6,
              background: t.dark ? '#0F172A' : '#FFF', color: t.text, border: `1px dashed ${t.border}`,
            }}>Monthly <span style={{ opacity: 0.5, fontWeight: 600, marginLeft: 4 }}>optioneel · uit</span></span>
            <span style={{ flex: 1 }} />
            <span style={{ fontSize: 11, color: t.textSub, fontWeight: 600 }}>↓ rationale in caption</span>
          </div>

          {/* Two-column grid: daily | weekly */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
            alignItems: 'start',
          }}>
            <PeriodCard t={t} period="daily" data={DAILY_DATA}
              myRank={6} myXP={980} totalPlayers={2147} resetTime="4u 23m" badge="Robin's pick" />
            <PeriodCard t={t} period="weekly" data={WEEKLY_DATA}
              myRank={3} myXP={8120} totalPlayers={4892} resetTime="2d 4u" />
          </div>

          {/* Reward info */}
          <div style={{
            marginTop: 14, padding: '10px 14px', borderRadius: 10,
            background: t.dark ? '#1E293B' : '#F1F5F9',
            display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: t.textSub,
          }}>
            <window.LucideIcon name="info" size={14} style={{ color: t.primary }} />
            <span><b style={{ color: t.text }}>Hoe rank ik?</b> &nbsp;XP per attempt telt — ook foute pogingen leveren XP. Cijfer telt niet voor ranking.</span>
            <span style={{ flex: 1 }} />
            <span style={{ color: t.textSub, fontWeight: 700 }}>GDPR · alleen nicknames</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── State 2 — Around me view ───────────────────────── */
function LB_AroundMe() {
  const t = lbT(true); // dark for variety
  const myRow = { rank: 4523, name: 'sam_bakker', level: 7, xp: 142, isMe: true };
  const above = [
    { rank: 4521, name: 'pim_h',     level: 7, xp: 168 },
    { rank: 4522, name: 'noor_van',  level: 6, xp: 155 },
  ];
  const below = [
    { rank: 4524, name: 'jay_b',     level: 7, xp: 138 },
    { rank: 4525, name: 'isa_l',     level: 6, xp: 130 },
  ];
  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 }}>
        <LB_Topbar t={t} />
        <div style={{ flex: 1, padding: '20px 24px' }}>
          <div style={{ marginBottom: 14 }}>
            <div style={{
              fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
            }}>Ranglijst · Around me</div>
            <h1 style={{
              fontFamily: 'Fredoka One', fontSize: 26, lineHeight: 1.1, margin: '4px 0 0', color: t.text,
            }}>Plek #4523 vandaag — elke quiz tilt je op.</h1>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {/* Around me — daily */}
            <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 12, padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <window.LucideIcon name="users" size={14} style={{ color: t.primary }} />
                <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.text }}>Vandaag · 2 boven, 2 onder</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {above.map((r, i) => <LB_Row key={'a'+i} t={t} {...r} />)}
                <LB_Row t={t} {...myRow} />
                {below.map((r, i) => <LB_Row key={'b'+i} t={t} {...r} />)}
              </div>
              <div style={{
                marginTop: 12, padding: '10px 12px', borderRadius: 8,
                background: 'rgba(0,180,216,0.08)', display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <window.PulseLottie size={28} animate={false} />
                <span style={{ fontSize: 12, color: t.text, lineHeight: 1.4 }}>
                  <b>2 plekken te gaan</b> tot pim_h. <span style={{ color: t.textSub }}>Eén quiz van 100% genoeg.</span>
                </span>
              </div>
            </div>

            {/* Top of the world — peek */}
            <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 12, padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <window.LucideIcon name="crown" size={14} style={{ color: t.gold }} />
                <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.text }}>Top 3 vandaag</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {DAILY_DATA.slice(0, 3).map((r, i) => <LB_Row key={i} t={t} {...r} />)}
              </div>
              <div style={{ height: 1, background: t.borderSoft, margin: '10px 0' }} />
              <div style={{
                fontSize: 12, color: t.textSub, lineHeight: 1.5,
              }}>
                Top-3 onderscheidt zich met een 3px-accent en gold/silver/bronze rank-numerals.
                Geen Vegas-trofeeën — alleen kleur.
              </div>
            </div>
          </div>

          {/* Sticky-bar pattern preview */}
          <div style={{
            marginTop: 16,
            background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
            padding: '12px 16px',
          }}>
            <div style={{ fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8 }}>
              Sticky-bar bij scroll · sample
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: '32px 32px 1fr auto auto', alignItems: 'center', gap: 12,
              padding: '8px 12px', borderRadius: 10,
              background: 'rgba(0,180,216,0.10)', borderLeft: `3px solid ${t.primary}`,
            }}>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 13, color: t.primary }}>#4523</div>
              <div style={{
                width: 28, height: 28, borderRadius: 9999, background: t.primaryDim, color: t.primary,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 800,
              }}>SA</div>
              <div style={{ fontWeight: 800, fontSize: 13 }}>sam_bakker · JIJ <span style={{ marginLeft: 8, color: t.textSub, fontWeight: 600, fontSize: 12 }}>142 XP vandaag</span></div>
              <div style={{ fontSize: 11, color: t.textSub, fontWeight: 700 }}>↑ 2 plekken sinds gisteren</div>
              <window.Btn t={t} kind="primary" size="sm" icon="zap">Speel quiz</window.Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── State 3 — Empty period ───────────────────────── */
function LB_Empty() {
  const t = lbT(false);
  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 }}>
        <LB_Topbar t={t} />
        <div style={{ flex: 1, padding: '20px 24px' }}>
          <h1 style={{
            fontFamily: 'Fredoka One', fontSize: 26, lineHeight: 1.1, margin: 0,
          }}>Week net begonnen.</h1>
          <p style={{ fontSize: 13, color: t.textSub, marginTop: 4, marginBottom: 14 }}>
            Eerste vragen worden gauw gespeeld — speel mee.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {/* Daily — populated */}
            <PeriodCard t={t} period="daily" data={DAILY_DATA}
              myRank={6} myXP={980} totalPlayers={847} resetTime="11u 02m" />

            {/* Weekly — empty */}
            <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 12, minHeight: 380, display: 'flex', flexDirection: 'column' }}>
              <div style={{ padding: '14px 16px', borderBottom: `1px solid ${t.borderSoft}`, display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Fredoka One', fontSize: 18 }}>Deze week</div>
                  <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600 }}>wk 18 · 28 apr–4 mei · zojuist gestart</div>
                </div>
                <ResetCountdown t={t} label="Reset over" time="6d 21u" />
              </div>

              <div style={{
                flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                padding: 20, textAlign: 'center',
              }}>
                {/* Stack-of-empty-rows illustration — DS primitives only */}
                <div style={{ width: 240, marginBottom: 18, opacity: 0.7 }}>
                  {[1, 2, 3, 4].map(i => (
                    <div key={i} style={{
                      display: 'grid', gridTemplateColumns: '20px 24px 1fr 36px', gap: 8,
                      padding: '6px 8px', borderRadius: 6,
                      background: i === 2 ? 'rgba(0,150,199,0.06)' : 'transparent',
                      borderLeft: i === 2 ? `2px solid ${t.primary}` : '2px solid transparent',
                      marginBottom: 3,
                    }}>
                      <div style={{ height: 8, background: t.borderSoft, borderRadius: 3 }} />
                      <div style={{ height: 8, background: t.borderSoft, borderRadius: 3 }} />
                      <div style={{ height: 8, background: t.borderSoft, borderRadius: 3 }} />
                      <div style={{ height: 8, background: t.borderSoft, borderRadius: 3 }} />
                    </div>
                  ))}
                </div>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.text, marginBottom: 4 }}>
                  Lege lijst — voorlopig.
                </div>
                <div style={{ fontSize: 12, color: t.textSub, maxWidth: 280, lineHeight: 1.5, marginBottom: 14 }}>
                  Ben jij de eerste die XP scoort deze week? Wie vroeg start, staat zichtbaar.
                </div>
                <window.Btn t={t} kind="primary" size="md" icon="zap">Speel een quiz</window.Btn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── State 4 — <16 no-consent ───────────────────────── */
function LB_NoConsent() {
  const t = lbT(false);
  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 }}>
        <LB_Topbar t={t} />
        <div style={{ flex: 1, padding: '20px 24px' }}>
          <div style={{ marginBottom: 14 }}>
            <div style={{
              fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
            }}>Ranglijst · alleen voor jou</div>
            <h1 style={{ fontFamily: 'Fredoka One', fontSize: 26, lineHeight: 1.1, margin: '4px 0 0' }}>
              Je doet mee — alleen niet zichtbaar voor anderen.
            </h1>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 16, alignItems: 'start' }}>
            {/* Personal score card — daily + weekly stacked */}
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
              padding: 16,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
                <window.LucideIcon name="lock" size={14} style={{ color: t.textSub }} />
                <span style={{ fontFamily: 'Fredoka One', fontSize: 16 }}>Jouw score</span>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                {[
                  { label: 'Vandaag', xp: 980, sub: '5 quizzes · 2 perfect', reset: '4u 23m' },
                  { label: 'Deze week', xp: 8120, sub: '34 quizzes · 7-day streak', reset: '2d 4u' },
                ].map((s, i) => (
                  <div key={i} style={{
                    padding: 14, borderRadius: 10,
                    background: 'rgba(0,150,199,0.06)',
                    border: `1px dashed ${t.primary}`,
                  }}>
                    <div style={{ fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase' }}>{s.label}</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 4 }}>
                      <span style={{ fontFamily: 'Fredoka One', fontSize: 28, color: t.primary }}>{s.xp.toLocaleString('nl-NL')}</span>
                      <span style={{ fontSize: 13, color: t.textSub, fontWeight: 700 }}>XP</span>
                    </div>
                    <div style={{ fontSize: 12, color: t.textSub, marginTop: 4 }}>{s.sub}</div>
                    <div style={{ fontSize: 10, color: t.primary, fontWeight: 700, marginTop: 8 }}>↻ Reset {s.reset}</div>
                  </div>
                ))}
              </div>

              <div style={{
                marginTop: 14, padding: 12, borderRadius: 8,
                background: t.dark ? 'rgba(0,180,216,0.08)' : 'rgba(0,150,199,0.05)',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <window.PulseLottie size={28} animate={false} />
                <span style={{ fontSize: 12, color: t.text }}>
                  Je verzamelt gewoon XP — net als iedereen. Alleen je <b>nickname staat niet in een publieke lijst</b>.
                </span>
              </div>
            </div>

            {/* Why card */}
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
              padding: 16, fontSize: 13, color: t.textSub, lineHeight: 1.55,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <window.LucideIcon name="shield-check" size={14} style={{ color: t.primary }} />
                <span style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.text }}>Waarom alleen voor jou</span>
              </div>
              <p style={{ margin: '0 0 10px' }}>
                Je bent jonger dan 16 zonder ouder-toestemming. Onder GDPR betekent dat: <b style={{ color: t.text }}>geen publieke lijsten</b> waar anderen je nickname zien.
              </p>
              <div style={{
                padding: 10, borderRadius: 8,
                background: t.dark ? '#1E293B' : '#F1F5F9',
                fontSize: 12,
              }}>
                <b style={{ color: t.text }}>Wel zichtbaar maken?</b><br/>
                Vraag je ouder/verzorger om toestemming via Instellingen → Privacy. Dan word je deel van de lijst — met alleen je nickname, nooit echte naam.
              </div>
              <div style={{ marginTop: 12, display: 'flex', gap: 6 }}>
                <window.Btn t={t} kind="ghost" size="sm" icon="settings">Privacy-instellingen</window.Btn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───────────────────────── State 5 — Top-3 gold/silver/bronze closeup ───────────────────────── */
function LB_Top3() {
  const t = lbT(true); // dark — gold/silver/bronze pop more
  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 }}>
        <LB_Topbar t={t} />
        <div style={{ flex: 1, padding: '20px 24px' }}>
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontSize: 11, color: t.textSub, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase' }}>
              Ranglijst · top-3 special-states
            </div>
            <h1 style={{ fontFamily: 'Fredoka One', fontSize: 26, lineHeight: 1.1, margin: '4px 0 0' }}>
              Smaakvol top-3 — kleur-shift, geen Vegas.
            </h1>
            <p style={{ fontSize: 13, color: t.textSub, margin: '4px 0 0', maxWidth: 540 }}>
              Subtiele kleur-band, gold/silver/bronze rank-numerals in display-font, kleine ring rondom avatar. Niets blinkt, niets zoemt.
            </p>
          </div>

          {/* Hero podium */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 16 }}>
            {[
              { place: 'silver', name: 'mees_42',     level: 12, xp: 1540, height: 90 },
              { place: 'gold',   name: 'kwantum_kat', level: 14, xp: 1820, height: 110 },
              { place: 'bronze', name: 'flink_b',     level: 11, xp: 1390, height: 70 },
            ].map((p, i) => {
              const cfg = {
                gold:   { c: '#FFD000', label: '1' },
                silver: { c: '#CBD5E1', label: '2' },
                bronze: { c: '#FB923C', label: '3' },
              }[p.place];
              return (
                <div key={i} style={{
                  background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
                  padding: 16, position: 'relative', overflow: 'hidden',
                  borderTop: `3px solid ${cfg.c}`,
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: 9999,
                      background: `color-mix(in srgb, ${cfg.c} 20%, transparent)`,
                      color: cfg.c,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'Fredoka One', fontSize: 22,
                      border: `1.5px solid ${cfg.c}`,
                    }}>{cfg.label}</div>
                    <div>
                      <div style={{ fontWeight: 800, fontSize: 14 }}>{p.name}</div>
                      <div style={{ fontSize: 11, color: t.textSub, fontWeight: 700 }}>LVL {p.level}</div>
                    </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                    <span style={{ fontFamily: 'Fredoka One', fontSize: 26, color: cfg.c }}>{p.xp.toLocaleString('nl-NL')}</span>
                    <span style={{ fontSize: 12, color: t.textSub, fontWeight: 700 }}>XP vandaag</span>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Rank list with top-3 highlighted in context */}
          <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 12, padding: '12px 8px' }}>
            <div style={{ padding: '0 8px 8px', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.text }}>Vandaag · top 7</span>
              <ResetCountdown t={t} label="Reset" time="4u 23m" />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {DAILY_DATA.map((row, i) => <LB_Row key={i} t={t} {...row} />)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  LB_DefaultMixed, LB_AroundMe, LB_Empty, LB_NoConsent, LB_Top3,
});