/* ───────────────────────── Oefenen Hub ─────────────────────────
   Pijler-home — drie modus-tiles, tier-locks, Pulse-welkomst,
   cross-pijler-handoffs, daily missions glimpse.
   5 sleutel-states. */

const hub_t_light = window.theme(false);
const hub_t_dark = window.theme(true);

/* Cross-pillar streak chip — placeholder reference (designed in Brief 06) */
function StreakChip({ t, days = 12, glow = false }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 10px 5px 7px', borderRadius: 9999,
      background: glow ? 'color-mix(in srgb, #F97316 14%, transparent)' : (t.dark ? '#0F172A' : '#F1F5F9'),
      border: `1px solid ${glow ? 'color-mix(in srgb, #F97316 32%, transparent)' : t.border}`,
      fontSize: 12, fontWeight: 800, color: glow ? (t.dark ? '#FB923C' : '#EA580C') : t.text,
    }}>
      <window.LucideIcon name="flame" size={12} fill={glow ? '#F97316' : 'none'} style={{ color: '#F97316' }} />
      {days}
      <span style={{ fontWeight: 700, fontSize: 10, color: t.textDim, marginLeft: 2 }}>L·O·P</span>
    </div>
  );
}

/* Sidebar (full 280px from DS — Hub is the canonical full-shell) */
function FullSidebar({ t, level = 47, tier = 'Strike', xp = 73, xpMax = 272, snaps = 1240, streakDays = 12 }) {
  const navItems = [
    { id: 'dashboard', icon: 'layout-grid', label: 'Dashboard' },
    { id: 'leren',     icon: 'graduation-cap', label: 'Leren', color: '#00B4D8' },
    { id: 'oefenen',   icon: 'target', label: 'Oefenen', color: '#16A34A', active: true },
    { id: 'plannen',   icon: 'calendar', label: 'Plannen', color: '#7C3AED' },
    { id: 'maker',     icon: 'wand-2', label: 'Quiz maken' },
    { id: 'ranglijst', icon: 'trophy', label: 'Ranglijst' },
    { id: 'winkel',    icon: 'store', label: 'Winkel' },
  ];
  return (
    <aside style={{
      width: 252, flexShrink: 0, background: t.sidebar,
      borderRight: `1px solid ${t.border}`,
      display: 'flex', flexDirection: 'column', padding: '20px 16px 16px',
    }}>
      {/* Logo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 4px 16px' }}>
        <div style={{
          width: 30, height: 30, borderRadius: 8, background: t.primaryDim, color: t.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Fredoka One', fontSize: 16,
        }}>S</div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.text }}>SnapSnel</div>
      </div>

      {/* User-card */}
      <div style={{
        padding: 14, borderRadius: 12, background: t.card, border: `1px solid ${t.border}`, marginBottom: 16,
      }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 8 }}>
          <window.PulseLottie size={48} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <span style={{ fontSize: 13, fontWeight: 800, color: t.text }}>sam_bakker</span>
          <span style={{
            fontSize: 10, fontWeight: 800, padding: '2px 7px', borderRadius: 9999,
            background: t.primaryDim, color: t.primary,
          }}>Lvl {level}</span>
        </div>
        <div style={{
          height: 4, borderRadius: 9999, background: t.dark ? '#0F172A' : '#E2E8F0', marginBottom: 4, overflow: 'hidden',
        }}>
          <div style={{ width: `${(xp/xpMax)*100}%`, height: '100%', background: '#16A34A' }} />
        </div>
        <div style={{ fontSize: 9.5, color: t.textDim, fontWeight: 700, letterSpacing: 0.3, marginBottom: 8 }}>
          {tier} · {xp} / {xpMax} XP
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <span style={{
            flex: 1, padding: '4px 6px', borderRadius: 8, fontSize: 11, fontWeight: 800,
            background: 'color-mix(in srgb, #F97316 12%, transparent)',
            color: t.dark ? '#FB923C' : '#EA580C',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 4,
          }}>🔥 {streakDays}</span>
          <span style={{
            flex: 1, padding: '4px 6px', borderRadius: 8, fontSize: 11, fontWeight: 800,
            background: 'color-mix(in srgb, #FFD000 14%, transparent)',
            color: t.dark ? '#FFD000' : '#B45309',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 4,
          }}>⚡ {snaps.toLocaleString('nl')}</span>
        </div>
      </div>

      {/* Nav */}
      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {navItems.map(it => {
          const isActive = it.active;
          const c = it.color || t.primary;
          return (
            <div key={it.id} style={{
              padding: '9px 10px', borderRadius: 9, display: 'flex', alignItems: 'center', gap: 11,
              background: isActive ? `color-mix(in srgb, ${c} ${t.dark ? 14 : 10}%, transparent)` : 'transparent',
              color: isActive ? c : t.textSub,
              fontSize: 13, fontWeight: 700,
            }}>
              <window.LucideIcon name={it.icon} size={16} />
              <span style={{ flex: 1 }}>{it.label}</span>
              {isActive && <span style={{ width: 6, height: 6, borderRadius: 9999, background: '#22C55E' }} />}
            </div>
          );
        })}
      </nav>

      <div style={{ flex: 1 }} />

      {/* Bottom utilities */}
      <div style={{ borderTop: `1px solid ${t.border}`, paddingTop: 8, display: 'flex', flexDirection: 'column', gap: 1 }}>
        {[
          { icon: 'bell', label: 'Notificaties', badge: 3 },
          { icon: 'settings', label: 'Instellingen' },
          { icon: 'log-out', label: 'Uitloggen' },
        ].map(it => (
          <div key={it.label} style={{
            padding: '7px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 11,
            color: t.textSub, fontSize: 12.5, fontWeight: 700,
          }}>
            <window.LucideIcon name={it.icon} size={14} />
            <span style={{ flex: 1 }}>{it.label}</span>
            {it.badge && (
              <span style={{
                padding: '1px 6px', borderRadius: 9999, fontSize: 10, fontWeight: 800,
                background: '#DC2626', color: 'white',
              }}>{it.badge}</span>
            )}
          </div>
        ))}
      </div>
    </aside>
  );
}

/* TOPBAR — global. Streak-chip from Brief 06, search, snaps. */
function Topbar({ t, title = 'Oefenen' }) {
  return (
    <div style={{
      padding: '14px 32px', borderBottom: `1px solid ${t.border}`, background: t.card,
      display: 'flex', alignItems: 'center', gap: 16,
    }}>
      <div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.text, lineHeight: 1 }}>{title}</div>
      </div>
      <div style={{ flex: 1 }} />
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px',
        borderRadius: 9999, border: `1px solid ${t.border}`, background: t.dark ? '#0B1322' : '#F8FAFC',
        width: 280, fontSize: 12.5, color: t.textDim,
      }}>
        <window.LucideIcon name="search" size={13} />
        <span>Zoek quizzen, vakken, hoofdstukken…</span>
      </div>
      <StreakChip t={t} days={12} glow />
      <div style={{
        padding: '5px 10px 5px 8px', borderRadius: 9999,
        background: 'color-mix(in srgb, #FFD000 12%, transparent)',
        color: t.dark ? '#FFD000' : '#B45309',
        fontSize: 12, fontWeight: 800,
        display: 'inline-flex', alignItems: 'center', gap: 4,
      }}>⚡ 1.240</div>
      <button style={{
        width: 32, height: 32, borderRadius: 9999, border: `1px solid ${t.border}`,
        background: 'transparent', color: t.textSub,
        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
      }}>
        <window.LucideIcon name="bell" size={14} />
      </button>
    </div>
  );
}

/* MODE TILE — three card variants for Quiz / Oefentoets / Examensim */
function ModeTile({ t, mode, locked, primary }) {
  const cfg = {
    quiz: {
      label: 'Quiz', tier: 'Free', tagline: '~5 min · 15 vragen · direct feedback',
      icon: 'zap', accent: '#16A34A', accentDark: '#22C55E',
      pulseHint: 'Snel reps · dagelijks',
    },
    oefentoets: {
      label: 'Oefentoets', tier: 'Premium', tagline: '15-25 min · 30 vragen · cijfer + advies',
      icon: 'clipboard-check', accent: '#0096C7', accentDark: '#00B4D8',
      pulseHint: '1-2 dagen voor toets',
    },
    examensim: {
      label: 'Examensimulatie', tier: 'Pro', tagline: '45-180 min · 80 vragen · examenrealisme',
      icon: 'shield-check', accent: '#475569', accentDark: '#64748B',
      pulseHint: 'Vlak voor het examen',
    },
  }[mode];
  const accent = t.dark ? cfg.accentDark : cfg.accent;

  return (
    <div style={{
      position: 'relative', padding: '20px 22px 22px', borderRadius: 14,
      background: primary
        ? `linear-gradient(155deg, color-mix(in srgb, ${accent} 14%, ${t.card}) 0%, ${t.card} 70%)`
        : t.card,
      border: `1px solid ${primary ? `color-mix(in srgb, ${accent} 32%, ${t.border})` : t.border}`,
      display: 'flex', flexDirection: 'column',
      cursor: 'pointer', overflow: 'hidden', minHeight: 240,
    }}>
      {/* Header: icon + tier-badge */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: `color-mix(in srgb, ${accent} ${t.dark ? 18 : 14}%, transparent)`,
          color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <window.LucideIcon name={cfg.icon} size={22} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{
            fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
            padding: '3px 8px', borderRadius: 9999,
            background: locked
              ? `color-mix(in srgb, ${accent} 16%, transparent)`
              : `color-mix(in srgb, ${accent} ${t.dark ? 18 : 12}%, transparent)`,
            color: accent,
            border: locked ? `1px dashed color-mix(in srgb, ${accent} 50%, transparent)` : `1px solid color-mix(in srgb, ${accent} 30%, transparent)`,
          }}>{cfg.tier}</span>
          {locked && (
            <window.LucideIcon name="lock" size={13} style={{ color: t.textDim }} />
          )}
        </div>
      </div>

      <div style={{ fontFamily: 'Fredoka One', fontSize: 21, color: t.text, lineHeight: 1.05, marginBottom: 4 }}>
        {cfg.label}
      </div>
      <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600, marginBottom: 6 }}>
        {cfg.tagline}
      </div>
      <div style={{ fontSize: 11, color: t.textDim, fontWeight: 700, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 14 }}>
        {cfg.pulseHint}
      </div>

      <div style={{ flex: 1 }} />

      {locked ? (
        <button style={{
          padding: '10px 14px', borderRadius: 9999,
          background: 'transparent', color: accent,
          border: `1.5px dashed color-mix(in srgb, ${accent} 50%, transparent)`,
          fontSize: 12, fontWeight: 800, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          <window.LucideIcon name="sparkles" size={13} />
          Bekijk {cfg.tier}
          <window.LucideIcon name="arrow-right" size={13} />
        </button>
      ) : (
        <button style={{
          padding: '11px 14px', borderRadius: 10,
          background: primary ? accent : 'transparent',
          color: primary ? 'white' : accent,
          border: primary ? 'none' : `1px solid color-mix(in srgb, ${accent} 36%, transparent)`,
          fontSize: 13, fontWeight: 800, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          <window.LucideIcon name="play" size={13} fill={primary ? 'white' : 'none'} />
          {primary ? 'Speel nu' : 'Start een sessie'}
        </button>
      )}
    </div>
  );
}

/* ───────────────────────── 1 · Returning user (default) ───────────────────────── */
function Hub_Default() {
  const t = hub_t_dark;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <FullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <Topbar t={t} title="Oefenen" />

        {/* Hero — Pulse welcome + cross-pijler-handoffs */}
        <div style={{ padding: '24px 32px 0' }}>
          <window.Card t={t} padding={22} style={{
            background: `linear-gradient(135deg, color-mix(in srgb, #16A34A 8%, ${t.card}) 0%, ${t.card} 60%)`,
            borderColor: 'color-mix(in srgb, #22C55E 22%, ' + t.border + ')',
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18 }}>
              <window.PulseLottie size={56} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: '#22C55E', marginBottom: 4 }}>
                  Pulse · vandaag
                </div>
                <div style={{ fontSize: 17, fontWeight: 700, color: t.text, lineHeight: 1.4, marginBottom: 4 }}>
                  Lekker, 12 dagen op rij. Wat doen we — quickie of een echte test?
                </div>
                <div style={{ fontSize: 13, color: t.textSub, fontWeight: 600 }}>
                  Bio H4 staat op je weekplan voor donderdag. Tot die tijd ben je vrij.
                </div>
              </div>
              <button style={{
                padding: '9px 14px', borderRadius: 9999, border: `1px solid ${t.border}`,
                background: 'transparent', color: t.textSub, fontSize: 12, fontWeight: 700, cursor: 'pointer',
              }}>Verberg</button>
            </div>
          </window.Card>
        </div>

        {/* Three modus tiles */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <h2 style={{ margin: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 14, color: t.text, textTransform: 'uppercase', letterSpacing: 0.6 }}>
              Kies een vorm
            </h2>
            <span style={{ fontSize: 12, color: t.textDim, fontWeight: 600 }}>· hoeveel ruimte heb je?</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <ModeTile t={t} mode="quiz" primary />
            <ModeTile t={t} mode="oefentoets" />
            <ModeTile t={t} mode="examensim" locked />
          </div>
        </div>

        {/* Cross-pillar handoffs row */}
        <div style={{ padding: '24px 32px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <window.HandoffCard
              pillar="plannen" direction="from"
              title="Bio-toets H4 · donderdag"
              subtitle="Plannen heeft 25 min vrijgehouden voor een Oefentoets"
              dark
            />
            <window.HandoffCard
              pillar="leren" direction="from"
              title="H3 §3.2 — Mitose · gisteren gelezen"
              subtitle="Klaar om te toetsen wat blijft hangen?"
              dark
            />
          </div>
        </div>

        {/* 2-col: missions + recent */}
        <div style={{ padding: '24px 32px 32px', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 14 }}>
          {/* Daily missions */}
          <window.Card t={t} padding={20}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <window.LucideIcon name="target" size={16} style={{ color: t.primary }} />
              <span style={{ fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, color: t.text }}>Dagelijkse missies</span>
              <span style={{ fontSize: 11, color: t.textDim, fontWeight: 700 }}>· reset om 23:59</span>
              <div style={{ flex: 1 }} />
              <span style={{
                fontSize: 10, fontWeight: 800, padding: '3px 8px', borderRadius: 9999,
                background: 'color-mix(in srgb, #FFD000 14%, transparent)',
                color: t.dark ? '#FFD000' : '#B45309',
              }}>+150 ⚡</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { ic: 'check-circle-2', label: 'Speel 1 quiz vandaag', done: true, val: '+30' },
                { ic: 'circle', label: 'Haal 80% of hoger', done: false, val: '+50', progress: '11/15' },
                { ic: 'circle', label: 'Maak een quiz met AI', done: false, val: '+70', locked: false },
              ].map((m,i) => (
                <div key={i} style={{
                  padding: '10px 12px', borderRadius: 9, background: t.borderSoft,
                  display: 'flex', alignItems: 'center', gap: 10,
                  opacity: m.done ? 0.55 : 1,
                }}>
                  <window.LucideIcon name={m.ic} size={16} style={{ color: m.done ? '#22C55E' : t.textDim }} />
                  <span style={{ flex: 1, fontSize: 13, color: t.text, fontWeight: 600, textDecoration: m.done ? 'line-through' : 'none' }}>{m.label}</span>
                  {m.progress && <span style={{ fontSize: 11, color: t.textSub, fontWeight: 700 }}>{m.progress}</span>}
                  <span style={{
                    fontSize: 10, fontWeight: 800, padding: '2px 6px', borderRadius: 9999,
                    background: 'color-mix(in srgb, #FFD000 12%, transparent)',
                    color: t.dark ? '#FFD000' : '#B45309',
                  }}>{m.val}</span>
                </div>
              ))}
            </div>
          </window.Card>

          {/* Recent activity */}
          <window.Card t={t} padding={20}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <window.LucideIcon name="clock" size={16} style={{ color: t.textSub }} />
              <span style={{ fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, color: t.text }}>Recent gespeeld</span>
              <div style={{ flex: 1 }} />
              <span style={{ fontSize: 11, color: t.primary, fontWeight: 800 }}>Alles →</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { vak: 'Biologie', titel: 'Cellen & celdeling', score: 11, total: 15, ago: 'gisteren' },
                { vak: 'Wiskunde', titel: 'Lineaire vergelijkingen', score: 13, total: 15, ago: '2 dgn' },
                { vak: 'Engels', titel: 'Past tenses', score: 9, total: 12, ago: '4 dgn' },
              ].map((q,i) => {
                const pct = (q.score/q.total)*100;
                const c = pct >= 80 ? '#22C55E' : pct >= 60 ? '#FFD000' : '#F97316';
                return (
                  <div key={i} style={{
                    padding: '8px 10px', borderRadius: 8,
                    display: 'flex', alignItems: 'center', gap: 10,
                  }}>
                    <div style={{
                      width: 28, height: 28, borderRadius: 7, flexShrink: 0,
                      background: 'color-mix(in srgb, ' + c + ' 14%, transparent)',
                      color: c, fontSize: 11, fontWeight: 800,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>{q.score}/{q.total}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 700, color: t.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{q.titel}</div>
                      <div style={{ fontSize: 10.5, color: t.textDim, fontWeight: 600 }}>{q.vak} · {q.ago}</div>
                    </div>
                    <window.LucideIcon name="rotate-cw" size={13} style={{ color: t.textDim }} />
                  </div>
                );
              })}
            </div>
          </window.Card>
        </div>
      </main>
    </div>
  );
}

/* ───────────────────────── 2 · Eerste-bezoek (fresh) ───────────────────────── */
function Hub_FirstVisit() {
  const t = hub_t_light;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <FullSidebar t={t} level={1} tier="Spark" xp={0} xpMax={100} snaps={50} streakDays={0} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <Topbar t={t} title="Oefenen" />

        {/* Empty-state hero — Pulse Spark variant, welcoming */}
        <div style={{ padding: '24px 32px 0' }}>
          <window.Card t={t} padding={28} style={{
            background: `linear-gradient(135deg, color-mix(in srgb, #16A34A 6%, ${t.card}) 0%, ${t.card} 70%)`,
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 22 }}>
              <window.PulseLottie size={80} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: '#16A34A', marginBottom: 6 }}>
                  Welkom bij Oefenen
                </div>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 26, color: t.text, lineHeight: 1.1, marginBottom: 8 }}>
                  Kies een vorm en ga ervoor.
                </div>
                <div style={{ fontSize: 14, color: t.textSub, fontWeight: 600, lineHeight: 1.55, maxWidth: 540 }}>
                  Quizzen voor dagelijkse reps, oefentoetsen vóór een toets, examensim als het écht moet.
                  Geen account-overload — alleen de stof die jij gaat krijgen.
                </div>
              </div>
            </div>
          </window.Card>
        </div>

        {/* Three modus tiles */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <ModeTile t={t} mode="quiz" primary />
            <ModeTile t={t} mode="oefentoets" locked />
            <ModeTile t={t} mode="examensim" locked />
          </div>
        </div>

        {/* Onboarding next-step strip */}
        <div style={{ padding: '24px 32px 32px' }}>
          <window.Card t={t} padding={18} style={{
            background: t.borderSoft, border: `1px dashed ${t.border}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                background: 'color-mix(in srgb, #00B4D8 14%, transparent)',
                color: t.primary, display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <window.LucideIcon name="wand-2" size={18} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 800, color: t.text }}>Geen quiz die past?</div>
                <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600, marginTop: 2 }}>
                  Maak er eentje van je hoofdstuk-foto · 3 gratis per maand · &lt; 30 sec
                </div>
              </div>
              <window.Btn t={t} kind="primary" size="md" iconRight="arrow-right">Maak een quiz</window.Btn>
            </div>
          </window.Card>
        </div>
      </main>
    </div>
  );
}

/* ───────────────────────── 3 · Cross-pijler trigger (vanuit Plannen) ───────────────────────── */
function Hub_CrossPillar() {
  const t = hub_t_dark;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <FullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <Topbar t={t} title="Oefenen" />

        {/* Banner — context-aware: came from Plannen-deadline */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{
            padding: '14px 18px', borderRadius: 12,
            background: 'color-mix(in srgb, #7C3AED 8%, ' + t.card + ')',
            border: '1.5px dashed color-mix(in srgb, #9D4EDD 38%, transparent)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, flexShrink: 0,
              background: 'color-mix(in srgb, #9D4EDD 18%, transparent)',
              color: '#9D4EDD', display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <window.LucideIcon name="calendar-clock" size={17} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.8, textTransform: 'uppercase', color: '#9D4EDD', marginBottom: 2 }}>
                ← uit Plannen · Bio-toets H4 · donderdag (over 2 dagen)
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>
                Vandaag oefenen voor je Bio-toets
              </div>
            </div>
            <button style={{
              padding: '8px 12px', borderRadius: 9999, border: `1px solid ${t.border}`,
              background: 'transparent', color: t.textSub, fontSize: 11, fontWeight: 700, cursor: 'pointer',
            }}>Niet nu</button>
          </div>
        </div>

        {/* Hero — recommended path explained */}
        <div style={{ padding: '14px 32px 0' }}>
          <window.Card t={t} padding={22} style={{
            background: `linear-gradient(135deg, color-mix(in srgb, #16A34A 10%, ${t.card}) 0%, ${t.card} 60%)`,
            borderColor: 'color-mix(in srgb, #22C55E 28%, ' + t.border + ')',
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18 }}>
              <window.PulseLottie size={56} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: '#22C55E', marginBottom: 4 }}>
                  Pulse · plan voor vandaag
                </div>
                <div style={{ fontSize: 17, fontWeight: 700, color: t.text, lineHeight: 1.4, marginBottom: 6 }}>
                  Eerst een Quiz voor warm-up, dan een Oefentoets om te zien waar je staat.
                </div>
                <div style={{ fontSize: 13, color: t.textSub, fontWeight: 600 }}>
                  Samen ~30 min · stof: H4 Cellen & celdeling
                </div>
              </div>
            </div>
          </window.Card>
        </div>

        {/* Recommended sequence: highlighted Quiz tile + Oefentoets tile, examensim de-emphasized */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14, position: 'relative' }}>
            {/* Step 1 marker */}
            <div style={{ position: 'relative' }}>
              <span style={{
                position: 'absolute', top: -10, left: 14, zIndex: 2,
                padding: '3px 9px', borderRadius: 9999, background: '#22C55E', color: 'white',
                fontSize: 10, fontWeight: 800, letterSpacing: 0.5,
              }}>STAP 1 · NU</span>
              <ModeTile t={t} mode="quiz" primary />
            </div>
            <div style={{ position: 'relative' }}>
              <span style={{
                position: 'absolute', top: -10, left: 14, zIndex: 2,
                padding: '3px 9px', borderRadius: 9999,
                background: t.primaryDim, color: t.primary,
                border: `1px solid color-mix(in srgb, ${t.primary} 40%, transparent)`,
                fontSize: 10, fontWeight: 800, letterSpacing: 0.5,
              }}>STAP 2 · STRAKS</span>
              <ModeTile t={t} mode="oefentoets" />
            </div>
            <div style={{ opacity: 0.55 }}>
              <ModeTile t={t} mode="examensim" locked />
            </div>
          </div>
        </div>

        {/* Cross-pillar back-link */}
        <div style={{ padding: '24px 32px 32px' }}>
          <window.HandoffCard
            pillar="plannen" direction="from"
            title="Volg de planning · 2 sessies vandaag"
            subtitle="Pulse-coach houdt het bij voor je — kom terug naar Plannen na elke sessie"
            dark
          />
        </div>
      </main>
    </div>
  );
}

/* ───────────────────────── 4 · Streak verloren (recovery) ───────────────────────── */
function Hub_StreakLost() {
  const t = hub_t_dark;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <FullSidebar t={t} streakDays={0} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <Topbar t={t} title="Oefenen" />

        {/* Hero — soft recovery tone, no shame */}
        <div style={{ padding: '24px 32px 0' }}>
          <window.Card t={t} padding={22} style={{
            background: t.card, borderColor: t.border,
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18 }}>
              <window.PulseLottie size={56} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: t.textSub, marginBottom: 4 }}>
                  Pulse · streak weg
                </div>
                <div style={{ fontSize: 17, fontWeight: 700, color: t.text, lineHeight: 1.4, marginBottom: 6 }}>
                  Streak weg. Geen ramp — we starten gewoon opnieuw.
                </div>
                <div style={{ fontSize: 13, color: t.textSub, fontWeight: 600 }}>
                  Beste streak: <b style={{ color: t.text }}>23 dagen</b> · ga je 'm verbreken?
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                <span style={{
                  padding: '6px 12px', borderRadius: 9999,
                  background: t.borderSoft, color: t.textDim,
                  fontSize: 13, fontWeight: 800,
                  border: `1px dashed ${t.border}`,
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                  <window.LucideIcon name="flame" size={13} />
                  0 dagen
                </span>
                <span style={{ fontSize: 10, color: t.textDim, fontWeight: 700 }}>laatste sessie · 3 dgn geleden</span>
              </div>
            </div>
          </window.Card>
        </div>

        {/* Three tiles — Quiz extra primary as "easiest restart" */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <h2 style={{ margin: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 14, color: t.text, textTransform: 'uppercase', letterSpacing: 0.6 }}>
              Klein beginnen · 5 minuten
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <ModeTile t={t} mode="quiz" primary />
            <ModeTile t={t} mode="oefentoets" />
            <ModeTile t={t} mode="examensim" locked />
          </div>
        </div>

        {/* Recovery-tip strip */}
        <div style={{ padding: '24px 32px 32px' }}>
          <div style={{
            padding: '14px 18px', borderRadius: 12,
            background: t.borderSoft, border: `1px solid ${t.border}`,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <window.LucideIcon name="info" size={16} style={{ color: t.textSub, flexShrink: 0 }} />
            <span style={{ flex: 1, fontSize: 12.5, color: t.textSub, fontWeight: 600 }}>
              <b style={{ color: t.text }}>Streak-tip:</b> één actie in elke pijler (Leren · Oefenen · Plannen) telt als streak-dag — niet alleen Oefenen.
            </span>
          </div>
        </div>
      </main>
    </div>
  );
}

/* ───────────────────────── 5 · Free-tier — paywall context ───────────────────────── */
function Hub_FreeTier() {
  const t = hub_t_light;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <FullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <Topbar t={t} title="Oefenen" />

        {/* Standard hero */}
        <div style={{ padding: '24px 32px 0' }}>
          <window.Card t={t} padding={22}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18 }}>
              <window.PulseLottie size={56} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: '#16A34A', marginBottom: 4 }}>
                  Pulse · vandaag
                </div>
                <div style={{ fontSize: 17, fontWeight: 700, color: t.text, lineHeight: 1.4 }}>
                  Lekker bezig — 12 dagen op rij. Quizje?
                </div>
              </div>
            </div>
          </window.Card>
        </div>

        {/* Tiles — both Premium and Pro locked */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <ModeTile t={t} mode="quiz" primary />
            <ModeTile t={t} mode="oefentoets" locked />
            <ModeTile t={t} mode="examensim" locked />
          </div>
        </div>

        {/* Soft Premium upgrade-card — "voel wat je mist" niet "betaal nu" */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{
            padding: 20, borderRadius: 14,
            background: `linear-gradient(135deg, color-mix(in srgb, #00B4D8 8%, ${t.card}) 0%, color-mix(in srgb, #FFD000 6%, ${t.card}) 100%)`,
            border: `1px solid color-mix(in srgb, #00B4D8 24%, ${t.border})`,
            display: 'flex', gap: 18, alignItems: 'center',
          }}>
            <div style={{
              width: 48, height: 48, borderRadius: 12, flexShrink: 0,
              background: 'color-mix(in srgb, #00B4D8 14%, transparent)',
              color: t.primary, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <window.LucideIcon name="sparkles" size={22} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 800, color: t.text, marginBottom: 4 }}>
                Klaar voor échte toets-voorbereiding?
              </div>
              <div style={{ fontSize: 12.5, color: t.textSub, fontWeight: 600, lineHeight: 1.5 }}>
                Premium ontgrendelt Oefentoetsen — 30 vragen, cijfer 1-10, sterke/zwakke onderwerpen na afloop.
                <span style={{ color: t.text, fontWeight: 800 }}> 2 weken gratis</span> · daarna €4,99/mnd.
              </div>
            </div>
            <window.Btn t={t} kind="primary" size="md" iconRight="arrow-right">Probeer Premium</window.Btn>
          </div>
        </div>

        {/* Daily missions teaser — Premium-locked */}
        <div style={{ padding: '20px 32px 32px' }}>
          <div style={{
            padding: '16px 18px', borderRadius: 12, background: t.card,
            border: `1px solid ${t.border}`,
            display: 'flex', alignItems: 'center', gap: 14,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ flex: 1, opacity: 0.5 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <window.LucideIcon name="target" size={14} style={{ color: t.primary }} />
                <span style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, color: t.text }}>Dagelijkse missies</span>
              </div>
              <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600 }}>Speel 1 quiz · Haal 80%+ · Maak een AI-quiz · 3 missies dagelijks ververst</div>
            </div>
            <span style={{
              fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
              padding: '4px 10px', borderRadius: 9999,
              background: 'color-mix(in srgb, #00B4D8 14%, transparent)',
              color: t.primary,
              border: `1px dashed color-mix(in srgb, #00B4D8 50%, transparent)`,
              display: 'inline-flex', alignItems: 'center', gap: 5,
            }}>
              <window.LucideIcon name="lock" size={11} />
              Premium
            </span>
          </div>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, {
  Hub_Default, Hub_FirstVisit, Hub_CrossPillar, Hub_StreakLost, Hub_FreeTier,
  HubFullSidebar: FullSidebar, HubTopbar: Topbar, HubModeTile: ModeTile, HubStreakChip: StreakChip,
});