/* polish/leren-bibliotheek-frames.jsx
   Bibliotheek-view — vind een hoofdstuk om mee te beginnen, of upload eigen materiaal.
   In deze basis-run één frame: Alles-tab actief met gemixte rij van methodes +
   eigen materiaal + gecertificeerd. Filter-actief / upload / empty komen later.

   Mock: Sam's bibliotheek (Bio 3 / Wis 4 / Engels 5 / Gesch 3 / Frans-eigen 2 hoofdstukken).
*/

const BIB_TABS = [
  { id: 'alles',          label: 'Alles',           icon: 'layers',  count: 17 },
  { id: 'eigen',          label: 'Eigen materiaal', icon: 'upload',  count: 2 },
  { id: 'methodes',       label: 'Methodes',        icon: 'book',    count: 12 },
  { id: 'gecertificeerd', label: 'Gecertificeerd',  icon: 'badge-check', count: 12 },
];

const BIB_ITEMS = [
  {
    subject: 'biologie', method: 'Biologie voor jou', level: 'havo-3', chapterNo: 'H3',
    title: 'Cellen en celdeling',
    masteryLevel: 2, progress: 35, state: 'NU BEZIG',
    deadline: 'TOETS VRIJDAG', certified: true,
    lastTouched: 'vandaag · 12:14',
  },
  {
    subject: 'wiskunde', method: 'Getal & Ruimte', level: 'havo-3', chapterNo: 'H4',
    title: 'Lineaire vergelijkingen oplossen',
    masteryLevel: 3, progress: 82, state: 'BIJNA KLAAR', certified: true,
    lastTouched: 'gisteren · 19:32',
  },
  {
    subject: 'engels', method: 'Stepping Up', level: 'havo-3', chapterNo: 'U5',
    title: 'Past tenses & onregelmatige werkwoorden',
    masteryLevel: 2, progress: 60, state: 'NU BEZIG', certified: true,
    lastTouched: '2 dagen geleden',
  },
  {
    subject: 'frans', method: 'Eigen samenvatting', level: 'havo-3', chapterNo: 'U2',
    title: 'Le passé composé — uploaded.pdf',
    masteryLevel: 1, progress: 12, state: 'EIGEN MATERIAAL', certified: false,
    lastTouched: '4 dagen geleden',
  },
  {
    subject: 'biologie', method: 'Biologie voor jou', level: 'havo-3', chapterNo: 'H4',
    title: 'DNA en erfelijkheid',
    masteryLevel: 0, progress: 0, state: 'NIEUW', certified: true,
    lastTouched: 'nog niet begonnen',
  },
  {
    subject: 'geschiedenis', method: 'Feniks', level: 'havo-3', chapterNo: 'H7',
    title: 'De Industriële Revolutie',
    masteryLevel: 1, progress: 18, state: 'GESTART', certified: true,
    lastTouched: 'vorige week',
  },
  {
    subject: 'biologie', method: 'Biologie voor jou', level: 'havo-3', chapterNo: 'H2',
    title: 'Stofwisseling',
    masteryLevel: 4, progress: 100, state: 'AFGEROND', certified: true,
    lastTouched: '2 weken geleden',
  },
  {
    subject: 'engels', method: 'Eigen flashcards-set', level: 'havo-3', chapterNo: '–',
    title: 'Idioms & phrasal verbs',
    masteryLevel: 2, progress: 48, state: 'EIGEN MATERIAAL', certified: false,
    lastTouched: 'vorige week',
  },
];

/* ─── FRAME 1 — Alles-tab ─────────────────────────────────── */
function FrameBibliotheekAlles({ t }) {
  return (
    <LerenPage t={t}
      title="Bibliotheek"
      subtitle="Vind een hoofdstuk om mee te beginnen, of upload eigen materiaal"
      url="snapsnel.nl/leren/bibliotheek"
      rightExtra={
        <BtnPrimary t={t} icon="upload">Eigen materiaal toevoegen</BtnPrimary>
      }
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 20, maxWidth: 1180 }}>
        {/* Main column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <BibFilters t={t} />

          <div style={{
            background: t.card, border: `1px solid ${t.border}`,
            borderRadius: 10, overflow: 'hidden',
          }}>
            <div style={{ padding: '0 22px' }}>
              <LerenTabs t={t} tabs={BIB_TABS} active="alles" />
            </div>
            <div style={{
              padding: '14px 22px',
              borderBottom: `1px solid ${t.border}`,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <span style={{
                fontSize: 10.5, color: t.fgMute, fontWeight: 800,
                letterSpacing: 0.4, textTransform: 'uppercase',
              }}>Sortering</span>
              <SortChip t={t} label="Recent gewerkt aan" active />
              <SortChip t={t} label="Deadline dichtstbij" />
              <SortChip t={t} label="Vak" />
              <span style={{ flex: 1 }} />
              <span style={{ fontSize: 11.5, color: t.fgMute, fontWeight: 700 }}>
                {BIB_ITEMS.length} hoofdstukken
              </span>
            </div>
            <div>
              {BIB_ITEMS.map((item, i) => (
                <BibItemRow key={i} t={t} item={item} first={i === 0} />
              ))}
            </div>
          </div>

          <BibPulseEntry t={t} />
        </div>

        {/* Right rail */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <BibStatsCard t={t} />
          <PlannenHintCard t={t} />
        </aside>
      </div>
    </LerenPage>
  );
}

/* ─── BibFilters — vak / niveau / methode ─────────────────── */
function BibFilters({ t }) {
  const dark = t.mode === 'dark';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap',
      padding: '12px 16px', background: t.card,
      border: `1px solid ${t.border}`, borderRadius: 10,
    }}>
      <span style={{
        fontSize: 10.5, color: t.fgMute, fontWeight: 800,
        letterSpacing: 0.4, textTransform: 'uppercase',
      }}>Filter</span>

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['biologie', 'wiskunde', 'engels', 'geschiedenis', 'frans'].map(s => (
          <FilterChip key={s} t={t} subject={s} />
        ))}
      </div>

      <span style={{
        width: 1, height: 22, background: t.border,
      }} />

      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 5,
        padding: '5px 11px', borderRadius: 999,
        background: t.cardSunken, color: t.fg,
        border: `1px solid ${t.borderStrong}`,
        fontSize: 11.5, fontWeight: 800,
        whiteSpace: 'nowrap',
      }}>
        <PI name="graduation-cap" size={12} color={t.fgDim} strokeWidth={2.4} />
        havo-3
      </span>

      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 5,
        padding: '5px 11px', borderRadius: 999,
        background: t.cardSunken, color: t.fgDim,
        border: `1px solid ${t.border}`,
        fontSize: 11.5, fontWeight: 700,
        whiteSpace: 'nowrap',
      }}>
        <PI name="book" size={12} color={t.fgMute} strokeWidth={2.2} />
        Alle methodes
      </span>

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

      <button style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '6px 10px', borderRadius: 8,
        background: 'transparent', border: 'none',
        color: t.fgMute, fontSize: 11, fontWeight: 700, cursor: 'pointer',
        whiteSpace: 'nowrap',
      }}>
        <PI name="x" size={11} />
        Filter wissen
      </button>
    </div>
  );
}

function FilterChip({ t, subject }) {
  const hex = SUBJECTS[subject] || '#64748B';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '5px 10px 5px 8px', borderRadius: 999,
      background: t.cardSunken, color: t.fgDim,
      border: `1px solid ${t.border}`,
      fontSize: 11, fontWeight: 700, cursor: 'pointer',
      textTransform: 'capitalize', whiteSpace: 'nowrap',
    }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: hex }} />
      {subject}
    </span>
  );
}

function SortChip({ t, label, active }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '4px 10px', borderRadius: 999,
      background: active ? t.primaryDim : 'transparent',
      color: active ? t.primary : t.fgMute,
      border: `1px solid ${active ? `color-mix(in srgb, ${t.primary} 28%, transparent)` : t.border}`,
      fontSize: 11, fontWeight: 800, cursor: 'pointer',
      whiteSpace: 'nowrap',
    }}>
      {active && <PI name="check" size={10} color={t.primary} strokeWidth={2.6} />}
      {label}
    </span>
  );
}

/* ─── BibItemRow ──────────────────────────────────────────── */
function BibItemRow({ t, item, first }) {
  const dark = t.mode === 'dark';
  const stateColor = (() => {
    switch (item.state) {
      case 'NU BEZIG':         return t.primary;
      case 'BIJNA KLAAR':      return dark ? '#FBBF24' : '#B45309';
      case 'AFGEROND':         return dark ? '#22C55E' : '#15803D';
      case 'EIGEN MATERIAAL':  return dark ? '#9D4EDD' : '#7C3AED';
      default:                 return t.fgMute;
    }
  })();
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '36px 1fr auto auto',
      gap: 14, alignItems: 'center',
      padding: '14px 22px',
      borderTop: first ? 'none' : `1px solid ${t.border}`,
      cursor: 'pointer',
    }}>
      <SubjectChip t={t} subject={item.subject} size="lg" iconOnly />

      <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <span style={{
            fontSize: 10.5, color: t.fgMute, fontWeight: 800,
            letterSpacing: 0.3, textTransform: 'uppercase',
          }}>
            {item.method} · {item.level} · {item.chapterNo}
          </span>
          {item.certified && (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 3,
              fontSize: 9.5, color: dark ? '#22C55E' : '#15803D', fontWeight: 800,
              letterSpacing: 0.3, textTransform: 'uppercase',
            }}>
              <PI name="badge-check" size={10}
                color={dark ? '#22C55E' : '#15803D'} strokeWidth={2.6} />
              Gecert.
            </span>
          )}
        </div>
        <div style={{
          fontFamily: 'Nunito', fontSize: 14.5, color: t.fg, fontWeight: 800,
          letterSpacing: '-0.005em',
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{item.title}</div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 11, color: t.fgDim, fontWeight: 600,
        }}>
          <span style={{
            color: stateColor, fontWeight: 800,
            letterSpacing: 0.3, textTransform: 'uppercase',
            fontSize: 10,
          }}>{item.state}</span>
          <span style={{ color: t.fgMute }}>·</span>
          <span>{item.lastTouched}</span>
          {item.deadline && (
            <>
              <span style={{ color: t.fgMute }}>·</span>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                color: dark ? '#F472B6' : '#BE185D',
                fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase', fontSize: 10,
              }}>
                <PI name="alert-circle" size={10}
                  color={dark ? '#F472B6' : '#BE185D'} strokeWidth={2.6} />
                {item.deadline}
              </span>
            </>
          )}
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4 }}>
        <MasteryDots t={t} level={item.masteryLevel} size="sm" />
        <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 800 }}>
          {item.progress}% gelezen
        </span>
      </div>

      <PI name="chevron-right" size={16} color={t.fgMute} strokeWidth={2.4} />
    </div>
  );
}

/* ─── BibPulseEntry — onderaan, voor "ik zoek iets" ───────── */
function BibPulseEntry({ t }) {
  const dark = t.mode === 'dark';
  const purple = dark ? '#9D4EDD' : '#7C3AED';
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: '16px 18px',
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <PulseMascot size={36} mood="thinking" />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg, lineHeight: 1.25 }}>
          Niet zeker wat je zoekt?
        </div>
        <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, marginTop: 4 }}>
          Beschrijf het onderwerp — Pulse vindt het hoofdstuk in je bibliotheek.
        </div>
      </div>
      <button style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '9px 14px', borderRadius: 999,
        background: dark ? 'rgba(157,78,221,0.16)' : 'rgba(124,58,237,0.10)',
        color: purple, border: `1px solid ${dark ? 'rgba(157,78,221,0.30)' : 'rgba(124,58,237,0.28)'}`,
        fontSize: 12.5, fontWeight: 800, cursor: 'pointer',
        whiteSpace: 'nowrap',
      }}>
        <PI name="message-circle" size={13} color={purple} strokeWidth={2.4} />
        Vraag aan Pulse
      </button>
    </div>
  );
}

/* ─── BibStatsCard ────────────────────────────────────────── */
function BibStatsCard({ t }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: 16,
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <PI name="library" size={15} color={t.primary} strokeWidth={2.4} />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg }}>Jouw bibliotheek</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <BibStatRow t={t} label="Hoofdstukken" value="17" />
        <BibStatRow t={t} label="Mee bezig"    value="3" accent />
        <BibStatRow t={t} label="Afgerond"     value="6" />
        <BibStatRow t={t} label="Eigen materiaal" value="2" />
      </div>
    </div>
  );
}

function BibStatRow({ t, label, value, accent }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{ flex: 1, fontSize: 12, color: t.fgDim, fontWeight: 700 }}>{label}</span>
      <span style={{
        fontSize: 13, color: accent ? t.primary : t.fg,
        fontWeight: 800, fontFamily: 'Fredoka One', letterSpacing: 0.2,
      }}>{value}</span>
    </div>
  );
}

/* ─── PlannenHintCard ─────────────────────────────────────── */
function PlannenHintCard({ t }) {
  const dark = t.mode === 'dark';
  const purple = dark ? '#9D4EDD' : '#7C3AED';
  return (
    <div style={{
      background: dark ? 'rgba(157,78,221,0.08)' : 'rgba(124,58,237,0.05)',
      border: `1px solid ${dark ? 'rgba(157,78,221,0.22)' : 'rgba(124,58,237,0.20)'}`,
      borderRadius: 8, padding: 16,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <HandoffBadge t={t} pillar="plannen" direction="to" label="Naar Plannen" />
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 15, color: t.fg, lineHeight: 1.3,
      }}>Toetsen toevoegen?</div>
      <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.55 }}>
        Voeg je toetsen in Plannen toe — dan weet Snapsnel welke hoofdstukken voorrang krijgen en plant de leersessies vanzelf.
      </div>
      <button style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        padding: '8px 12px', borderRadius: 999,
        background: 'transparent', color: purple,
        border: `1px solid ${dark ? 'rgba(157,78,221,0.36)' : 'rgba(124,58,237,0.32)'}`,
        fontSize: 12, fontWeight: 800, cursor: 'pointer',
        whiteSpace: 'nowrap',
      }}>
        Open Plannen
        <PI name="arrow-right" size={12} color={purple} strokeWidth={2.4} />
      </button>
    </div>
  );
}

Object.assign(window, {
  FrameBibliotheekAlles, BibFilters, BibItemRow,
  BibPulseEntry, BibStatsCard, PlannenHintCard,
  FrameBibliotheekFilter, FrameBibliotheekUpload, FrameBibliotheekEmpty,
});

/* ─── FRAME 2 — Filter actief (Vak: Geschiedenis) ─────────── */
const BIB_GESCH_ITEMS = [
  {
    subject: 'geschiedenis', method: 'Feniks', level: 'havo-3', chapterNo: 'H7',
    title: 'De Industriële Revolutie',
    masteryLevel: 1, progress: 18, state: 'GESTART', certified: true,
    lastTouched: 'vorige week',
    handoff: { pillar: 'plannen', label: 'TOETS OVER 9 DAGEN' },
  },
  {
    subject: 'geschiedenis', method: 'Feniks', level: 'havo-3', chapterNo: 'H6',
    title: 'Verlichting en Franse Revolutie',
    masteryLevel: 3, progress: 78, state: 'BIJNA KLAAR', certified: true,
    lastTouched: '3 dagen geleden',
  },
  {
    subject: 'geschiedenis', method: 'Feniks', level: 'havo-3', chapterNo: 'H5',
    title: 'Absolutisme en de Republiek',
    masteryLevel: 4, progress: 100, state: 'AFGEROND', certified: true,
    lastTouched: '2 weken geleden',
  },
  {
    subject: 'geschiedenis', method: 'Feniks', level: 'havo-3', chapterNo: 'H8',
    title: 'Imperialisme en wereldoorlog',
    masteryLevel: 0, progress: 0, state: 'NIEUW', certified: true,
    lastTouched: 'nog niet begonnen',
  },
];

function FrameBibliotheekFilter({ t }) {
  return (
    <LerenPage t={t}
      title="Bibliotheek"
      subtitle="Vind een hoofdstuk om mee te beginnen, of upload eigen materiaal"
      url="snapsnel.nl/leren/bibliotheek?vak=geschiedenis"
      rightExtra={
        <BtnPrimary t={t} icon="upload">Eigen materiaal toevoegen</BtnPrimary>
      }
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 20, maxWidth: 1180 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <BibFiltersActief t={t} />

          <div style={{
            background: t.card, border: `1px solid ${t.border}`,
            borderRadius: 10, overflow: 'hidden',
          }}>
            <div style={{ padding: '0 22px' }}>
              <LerenTabs t={t} tabs={BIB_TABS} active="alles" />
            </div>
            <div style={{
              padding: '14px 22px',
              borderBottom: `1px solid ${t.border}`,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <span style={{
                fontSize: 10.5, color: t.fgMute, fontWeight: 800,
                letterSpacing: 0.4, textTransform: 'uppercase',
              }}>
                {BIB_GESCH_ITEMS.length} hoofdstukken · Geschiedenis
              </span>
              <span style={{ flex: 1 }} />
              <SortChip t={t} label="Recent gewerkt aan" active />
              <SortChip t={t} label="Hoofdstuknr." />
            </div>
            <div>
              {BIB_GESCH_ITEMS.map((item, i) => (
                <BibItemRow key={i} t={t} item={item} first={i === 0} />
              ))}
            </div>
          </div>
        </div>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <BibFilterPulseHint t={t} />
          <BibStatsCard t={t} />
        </aside>
      </div>
    </LerenPage>
  );
}

/* Filter-rij met één actieve chip + secundaire chips. */
function BibFiltersActief({ t }) {
  const dark = t.mode === 'dark';
  const histHex = SUBJECTS['geschiedenis'] || '#475569';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
      padding: '12px 16px', background: t.card,
      border: `1px solid ${t.border}`, borderRadius: 10,
    }}>
      <span style={{
        fontSize: 10.5, color: t.fgMute, fontWeight: 800,
        letterSpacing: 0.4, textTransform: 'uppercase',
      }}>Filter</span>

      {/* Active chip — ink-1 background */}
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 7,
        padding: '6px 6px 6px 11px', borderRadius: 999,
        background: t.fg,
        color: t.bg,
        fontSize: 11.5, fontWeight: 800, whiteSpace: 'nowrap',
      }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: histHex }} />
        Vak: Geschiedenis
        <button style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 18, height: 18, borderRadius: 999,
          background: dark ? 'rgba(11,18,32,0.45)' : 'rgba(255,255,255,0.18)',
          border: 'none', color: t.bg, cursor: 'pointer', flexShrink: 0,
        }}>
          <PI name="x" size={10} strokeWidth={2.8} />
        </button>
      </span>

      <span style={{ width: 1, height: 22, background: t.border }} />

      <span style={{
        fontSize: 10.5, color: t.fgMute, fontWeight: 700,
        letterSpacing: 0.3, textTransform: 'uppercase',
      }}>Versmal verder</span>

      <SecondaryFilterChip t={t} icon="alert-circle" label="Alleen achterstand" />
      <SecondaryFilterChip t={t} icon="clock" label="Recent gezien" />
      <SecondaryFilterChip t={t} icon="badge-check" label="Alleen gecertificeerd" />

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

      <button style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '6px 10px', borderRadius: 8,
        background: 'transparent', border: 'none',
        color: t.fgMute, fontSize: 11, fontWeight: 700, cursor: 'pointer',
        whiteSpace: 'nowrap',
      }}>
        <PI name="x" size={11} />
        Filter wissen
      </button>
    </div>
  );
}

function SecondaryFilterChip({ t, icon, label }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '5px 11px', borderRadius: 999,
      background: t.cardSunken, color: t.fgDim,
      border: `1px solid ${t.border}`,
      fontSize: 11, fontWeight: 700, cursor: 'pointer',
      whiteSpace: 'nowrap',
    }}>
      <PI name={icon} size={11} color={t.fgMute} strokeWidth={2.4} />
      {label}
    </span>
  );
}

function BibFilterPulseHint({ t }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: '14px 16px',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <PulseMascot size={32} mood="curious" />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg, lineHeight: 1.25 }}>
          Verder versmallen?
        </span>
      </div>
      <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.55 }}>
        Wil je dit verder versmallen? Klik op een tweede filter — bijvoorbeeld 'Alleen achterstand' om te zien wat aandacht nodig heeft.
      </div>
    </div>
  );
}

/* ─── FRAME 3 — Eigen materiaal uploaden ─────────────────── */
const EERDER_GEUPLOAD = [
  {
    subject: 'frans', source: 'le-passe-compose.pdf',
    title: 'Le passé composé', masteryLevel: 1,
    pages: '4 pagina\'s · 18 kaarten',
    addedAgo: '4 dagen geleden',
  },
  {
    subject: 'engels', source: 'idioms-set.txt',
    title: 'Idioms & phrasal verbs', masteryLevel: 2,
    pages: '32 zinnen · 32 kaarten',
    addedAgo: 'vorige week',
  },
  {
    subject: 'aardrijkskunde', source: 'klimaat-fotos.jpg',
    title: 'Klimaatzones — schoolbord-foto',
    masteryLevel: 0,
    pages: '1 foto · 8 kaarten',
    addedAgo: '2 weken geleden',
  },
];

function FrameBibliotheekUpload({ t }) {
  return (
    <LerenPage t={t}
      title="Bibliotheek"
      subtitle="Eigen materiaal toevoegen aan je bibliotheek"
      url="snapsnel.nl/leren/bibliotheek/upload"
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 20, maxWidth: 1180 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <UploadBreadcrumb t={t} />

          <UploadDropZone t={t} />

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <PI name="folder-open" size={14} color={t.fgDim} strokeWidth={2.4} />
              <span style={{
                fontFamily: 'Fredoka One', fontSize: 14, color: t.fg,
              }}>Eerder geüpload</span>
              <span style={{ flex: 1 }} />
              <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>
                {EERDER_GEUPLOAD.length} bestanden
              </span>
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
            }}>
              {EERDER_GEUPLOAD.map((item, i) => (
                <UploadTegel key={i} t={t} item={item} />
              ))}
            </div>
          </div>
        </div>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <UploadPulseHint t={t} />
          <UploadFormatsCard t={t} />
        </aside>
      </div>
    </LerenPage>
  );
}

function UploadBreadcrumb({ t }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 6,
      fontSize: 11.5, color: t.fgMute, fontWeight: 700,
    }}>
      <span style={{ cursor: 'pointer' }}>Bibliotheek</span>
      <PI name="chevron-right" size={12} color={t.fgMute} />
      <span style={{ color: t.fgDim }}>Eigen materiaal toevoegen</span>
    </div>
  );
}

function UploadDropZone({ t }) {
  const dark = t.mode === 'dark';
  return (
    <div style={{
      background: t.card,
      border: `2px dashed ${t.fgMute}`,
      borderRadius: 12, padding: '40px 24px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
      textAlign: 'center',
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 999,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: t.cardSunken, border: `1px solid ${t.border}`,
        color: t.primary,
      }}>
        <PI name="upload-cloud" size={26} strokeWidth={2.2} />
      </div>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 20, color: t.fg,
        lineHeight: 1.2, letterSpacing: '-0.01em',
      }}>Sleep een bestand hier of klik om te kiezen</div>
      <div style={{
        fontSize: 13, color: t.fgDim, fontWeight: 500, lineHeight: 1.55,
        maxWidth: 380,
      }}>
        PDF, foto of tekst. Pulse maakt er kaarten van.
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
        <FormatPill t={t} icon="file-text" label="PDF" />
        <FormatPill t={t} icon="image" label="Foto" />
        <FormatPill t={t} icon="type" label="Plak tekst" />
      </div>
    </div>
  );
}

function FormatPill({ t, icon, label }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '5px 10px', borderRadius: 999,
      background: t.cardSunken, color: t.fgDim,
      border: `1px solid ${t.border}`,
      fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap',
    }}>
      <PI name={icon} size={11} color={t.fgMute} strokeWidth={2.4} />
      {label}
    </span>
  );
}

function UploadTegel({ t, item }) {
  const dark = t.mode === 'dark';
  const fmtIcon = item.source.endsWith('.pdf') ? 'file-text'
                : item.source.endsWith('.jpg') || item.source.endsWith('.png') ? 'image'
                : 'type';
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: 14,
      display: 'flex', flexDirection: 'column', gap: 10,
      cursor: 'pointer',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <SubjectChip t={t} subject={item.subject} size="sm" iconOnly />
        <span style={{
          fontSize: 10, color: t.fgMute, fontWeight: 800,
          letterSpacing: 0.3, textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
          <PI name={fmtIcon} size={10} color={t.fgMute} strokeWidth={2.4} />
          {item.source}
        </span>
      </div>
      <div style={{
        fontFamily: 'Nunito', fontSize: 13.5, color: t.fg, fontWeight: 800,
        lineHeight: 1.3, minHeight: 36,
        overflow: 'hidden', display: '-webkit-box',
        WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
      }}>{item.title}</div>
      <MasteryDots t={t} level={item.masteryLevel} size="sm" />
      <div style={{
        paddingTop: 6, borderTop: `1px dashed ${t.border}`,
        fontSize: 10.5, color: t.fgMute, fontWeight: 700,
        display: 'flex', justifyContent: 'space-between',
      }}>
        <span>{item.pages}</span>
        <span>{item.addedAgo}</span>
      </div>
    </div>
  );
}

function UploadPulseHint({ t }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: '14px 16px',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <PulseMascot size={32} mood="encouraging" />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg, lineHeight: 1.25 }}>
          Goeie aanvulling.
        </span>
      </div>
      <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.55 }}>
        Hoe meer Pulse van jou ziet, hoe beter we kunnen plannen. Eigen samenvattingen, schoolbord-foto's, of een PDF van de docent — alles werkt.
      </div>
    </div>
  );
}

function UploadFormatsCard({ t }) {
  const items = [
    { icon: 'file-text', label: 'PDF', sub: 'Hoofdstuk-PDF, samenvatting' },
    { icon: 'image',     label: 'Foto', sub: 'Schoolbord, schrift, schermafbeelding' },
    { icon: 'type',      label: 'Tekst', sub: 'Plak tekst direct in' },
    { icon: 'mic',       label: 'Spraak (binnenkort)', sub: 'Lees voor — Pulse zet om' },
  ];
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: 16,
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <PI name="info" size={14} color={t.fgDim} strokeWidth={2.4} />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg }}>
          Wat kun je uploaden?
        </span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 10,
          }}>
            <PI name={it.icon} size={14} color={t.fgDim} strokeWidth={2.4}
              style={{ marginTop: 2, flexShrink: 0 }} />
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 12.5, color: t.fg, fontWeight: 800 }}>{it.label}</div>
              <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 600, lineHeight: 1.4 }}>
                {it.sub}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ─── FRAME 4 — Empty-state ──────────────────────────────── */
function FrameBibliotheekEmpty({ t }) {
  return (
    <LerenPage t={t}
      title="Bibliotheek"
      subtitle="Vind een hoofdstuk om mee te beginnen, of upload eigen materiaal"
      url="snapsnel.nl/leren/bibliotheek"
    >
      <div style={{
        display: 'flex', justifyContent: 'center',
        padding: '60px 20px',
      }}>
        <div style={{
          background: t.card, border: `1px solid ${t.border}`,
          borderRadius: 10, padding: '56px 48px',
          maxWidth: 560, width: '100%',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18,
          textAlign: 'center',
        }}>
          <PulseMascot size={140} mood="curious" />

          <h1 style={{
            margin: 0, fontFamily: 'Fredoka One', fontSize: 26,
            color: t.fg, lineHeight: 1.15, letterSpacing: '-0.01em',
          }}>Nog niets in je bibliotheek</h1>

          <p style={{
            margin: 0, fontSize: 14, color: t.fgDim,
            lineHeight: 1.6, fontWeight: 500, maxWidth: 420,
          }}>
            Voeg je eerste hoofdstuk toe of upload eigen materiaal — dan begint Pulse met plannen.
          </p>

          <div style={{
            display: 'flex', gap: 10, marginTop: 8, flexWrap: 'wrap',
            justifyContent: 'center',
          }}>
            <BtnPrimary t={t} icon="book-plus">Hoofdstuk toevoegen</BtnPrimary>
            <BtnGhost t={t} icon="upload">Materiaal uploaden</BtnGhost>
          </div>

          <div style={{
            paddingTop: 14, marginTop: 8, borderTop: `1px dashed ${t.border}`,
            width: '100%', display: 'flex', flexDirection: 'column', gap: 8,
            alignItems: 'center',
          }}>
            <span style={{
              fontSize: 10.5, color: t.fgMute, fontWeight: 800,
              letterSpacing: 0.4, textTransform: 'uppercase',
            }}>Hoe Pulse helpt</span>
            <div style={{
              display: 'flex', gap: 18, flexWrap: 'wrap', justifyContent: 'center',
              fontSize: 11.5, color: t.fgDim, fontWeight: 600,
            }}>
              <EmptyHelpItem t={t} icon="book"     label="Methodes uit jouw klas" />
              <EmptyHelpItem t={t} icon="upload"   label="Eigen PDF's en foto's" />
              <EmptyHelpItem t={t} icon="calendar" label="Plant op basis van toetsen" />
            </div>
          </div>
        </div>
      </div>
    </LerenPage>
  );
}

function EmptyHelpItem({ t, icon, label }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
    }}>
      <PI name={icon} size={13} color={t.fgMute} strokeWidth={2.4} />
      {label}
    </span>
  );
}