/* polish/leren-hoofdstuk-frames.jsx
   Hoofdstuk-detail view — focused werkomgeving voor één hoofdstuk.
   Drie tabs in deze basis-run: Samenvatting / Flashcards / Vraag aan Pulse.
   (Mindmap-tab + edge-states komen later.)

   Mock: Bio H3 Cellen en celdeling. Sam, level 7, beheersing 2/4 BEZIG,
         8 te herhalen kaarten, ~22 min werk resterend.
*/

const HOOFDSTUK_BREADCRUMB = ['Bibliotheek', 'Biologie', 'havo-3', 'H3 — Cellen en celdeling'];

const SAMENVATTING_SECTIONS = [
  {
    heading: 'Wat is een cel?',
    body: 'Een cel is de kleinste levende bouwsteen van een organisme. Alle planten, dieren en mensen zijn opgebouwd uit cellen — soms uit één (zoals een bacterie), soms uit miljarden. Cellen kunnen voedingsstoffen opnemen, energie maken, en zich vermenigvuldigen. Onder een microscoop zie je dat ze een afgesloten ruimte hebben met daarin verschillende onderdelen die elk een taak hebben.',
  },
  {
    heading: 'Mitose vs meiose',
    body: 'Mitose en meiose zijn twee soorten celdeling. Bij mitose ontstaan uit één moedercel twee identieke dochtercellen — dit gebruikt je lichaam voor groei en herstel. Bij meiose ontstaan vier verschillende geslachtscellen (eicel of zaadcel) met elk de helft van het DNA — dit is alleen voor voortplanting. Belangrijk: bij meiose verdubbelt het DNA niet voor de tweede deling, anders zou je nakomelingen veel te veel chromosomen krijgen.',
  },
  {
    heading: 'Plantencel vs dierlijke cel',
    body: 'Plantencellen en dierlijke cellen lijken op elkaar, maar er zijn drie grote verschillen. Plantencellen hebben een celwand (stevigheid), bladgroenkorrels (om met zonlicht suikers te maken) en één grote vacuole (water-opslag). Dierlijke cellen hebben deze drie niet — wel hebben ze een centriool, waardoor ze sneller en gerichter kunnen delen.',
  },
];

const SAMPLE_FLASHCARD = {
  subject: 'biologie',
  source: 'Biologie voor jou · havo-3 · H3',
  front: 'Wat is mitose?',
  back: 'Een vorm van celdeling waarbij uit één moedercel twee identieke dochtercellen ontstaan.',
  note: 'Belangrijk: het DNA wordt eerst verdubbeld vóór de deling, zodat beide dochtercellen een complete set chromosomen krijgen.',
};

const SAMPLE_CHAT_MESSAGES = [
  {
    role: 'user',
    body: 'Wat is het verschil tussen mitose en meiose ook alweer?',
  },
  {
    role: 'pulse',
    body: 'Korte versie:\n\n• Mitose maakt 2 identieke cellen (groei en herstel).\n• Meiose maakt 4 verschillende geslachtscellen met de helft van het DNA (voortplanting).\n\nDe truc om te onthouden: mit-OSE is voor het mensen-LIJF, mei-OSE is voor de zaad/eicel-LIJN. Bij meiose is er ook geen tweede DNA-verdubbeling — anders zou je nakomelingen elke generatie verdubbelen in chromosomen.',
    citations: ['Biologie voor jou · H3 §3.2', 'Biologie voor jou · H3 §3.3'],
  },
];

/* ─── Tabs config ─────────────────────────────────────────── */
const HOOFDSTUK_TABS = [
  { id: 'samenvatting', label: 'Samenvatting', icon: 'file-text' },
  { id: 'mindmap',      label: 'Mindmap',      icon: 'git-branch' },
  { id: 'flashcards',   label: 'Flashcards',   icon: 'layers',    count: 12 },
  { id: 'pulse',        label: 'Vraag aan Pulse', icon: 'message-circle' },
];

/* ─── Page wrapper for chapter detail ─────────────────────── */
function HoofdstukLayout({ t, activeTab, children, variant = 'default' }) {
  const isNieuw = variant === 'nieuw';
  const isVoltooid = variant === 'voltooid';

  const subtitle = isNieuw
    ? 'Bio H3 — nog niet begonnen · ~ 35 min materiaal'
    : isVoltooid
      ? 'Bio H3 — afgerond · onderhoudsherhaling 1× per week'
      : 'Bio H3 — vrijdag toets · ~22 min resterend · 8 te herhalen';

  const masteryLevel = isNieuw ? 0 : isVoltooid ? 4 : 2;
  const toetsContext = isNieuw || isVoltooid ? null : 'toets vrijdag';

  return (
    <LerenPage t={t}
      subtitle={subtitle}
      url="snapsnel.nl/leren/biologie/h3"
    >
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20, maxWidth: 1180,
      }}>
        {/* Main column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <ChapterHeader t={t}
            subject="biologie"
            breadcrumb={HOOFDSTUK_BREADCRUMB}
            chapter="H3 — Cellen en celdeling"
            source="Biologie voor jou · havo-3"
            masteryLevel={masteryLevel}
            fromPlannen={!isVoltooid}
            toetsContext={toetsContext}
            rightExtra={<BronCertBadge t={t} compact />}
          />

          <div style={{
            background: t.card, border: `1px solid ${t.border}`,
            borderRadius: 10, overflow: 'hidden',
          }}>
            <div style={{ padding: '0 22px' }}>
              <LerenTabs t={t} tabs={HOOFDSTUK_TABS} active={activeTab} />
            </div>
            <div style={{ padding: '22px' }}>
              {children}
            </div>
          </div>
        </div>

        {/* Right rail */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <StandVanZakenCard t={t} variant={variant} />
          <BronCertBadge t={t} />
          {!isNieuw && !isVoltooid && (
            <>
              <HandoffCard t={t} pillar="oefenen" direction="to"
                title="Oefen na het leren"
                subtitle="Een mini-quiz Bio H3 — test of het er echt zit"
                compact />
              <HandoffCard t={t} pillar="plannen" direction="to"
                title="Vrijhouden in je planner"
                subtitle="Volgende leersessie inplannen voor donderdag"
                compact />
            </>
          )}
          {isNieuw && (
            <HandoffCard t={t} pillar="plannen" direction="to"
              title="Voor wanneer plan je dit in?"
              subtitle="Voeg een leersessie toe aan je planner"
              compact />
          )}
          {isVoltooid && (
            <HandoffCard t={t} pillar="oefenen" direction="to"
              title="Wil je nog testen?"
              subtitle="Mini-quiz om te zien of het écht blijft zitten"
              compact />
          )}
        </aside>
      </div>
    </LerenPage>
  );
}

/* ─── Stand-van-zaken aside-card ──────────────────────────── */
function StandVanZakenCard({ t, variant = 'default' }) {
  const dark = t.mode === 'dark';
  const isNieuw = variant === 'nieuw';
  const isVoltooid = variant === 'voltooid';

  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="activity" size={15} color={t.primary} strokeWidth={2.4} />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg }}>Hoe sta je ervoor?</span>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {isNieuw && (
          <>
            <StandRow t={t} label="Beheersing"     value="nog niet"        icon="circle" />
            <StandRow t={t} label="Materiaal"      value="~ 35 min"        icon="book-open" />
            <StandRow t={t} label="Kaarten"        value="12 × nieuw"      icon="layers" />
          </>
        )}
        {isVoltooid && (
          <>
            <StandRow t={t} label="Beheersing"     value="4/4 — zeker"     icon="check-circle" />
            <StandRow t={t} label="Volgende keer"  value="ma 14 apr"       icon="calendar" />
            <StandRow t={t} label="Onderhoud"      value="1× per week"     icon="repeat" />
          </>
        )}
        {!isNieuw && !isVoltooid && (
          <>
            <StandRow t={t} label="Beheersing"     value="2/4 — bezig"     icon="trending-up" />
            <StandRow t={t} label="Te herhalen"    value="8 kaarten"       icon="repeat" />
            <StandRow t={t} label="Resterend werk" value="~ 22 min"         icon="clock" />
            <StandRow t={t} label="Toets"          value="vrijdag"         icon="alert-circle"
                      emphasis />
          </>
        )}
      </div>

      <div style={{
        marginTop: 4, paddingTop: 12, borderTop: `1px solid ${t.border}`,
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {isNieuw && (
          <>
            <BtnPrimary t={t} icon="play" style={{ justifyContent: 'center', width: '100%' }}>
              Start hoofdstuk
            </BtnPrimary>
            <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700, textAlign: 'center' }}>
              We beginnen rustig met de samenvatting
            </span>
          </>
        )}
        {isVoltooid && (
          <>
            <BtnGhost t={t} icon="repeat" style={{ justifyContent: 'center', width: '100%' }}>
              Onderhoudsherhaling starten
            </BtnGhost>
            <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700, textAlign: 'center' }}>
              1× per week · ~ 3 min
            </span>
          </>
        )}
        {!isNieuw && !isVoltooid && (
          <>
            <BtnPrimary t={t} icon="repeat" style={{ justifyContent: 'center', width: '100%' }}>
              Begin herhaling — dit hoofdstuk
            </BtnPrimary>
            <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700, textAlign: 'center' }}>
              8 kaarten · ~ 6 min
            </span>
          </>
        )}
      </div>
    </div>
  );
}

function StandRow({ t, label, value, icon, emphasis }) {
  const dark = t.mode === 'dark';
  const accent = emphasis ? (dark ? '#F472B6' : '#BE185D') : t.fgDim;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: 26, height: 26, borderRadius: 8,
        background: t.cardSunken, color: accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <PI name={icon} size={13} color={accent} strokeWidth={2.4} />
      </div>
      <span style={{ flex: 1, fontSize: 12, color: t.fgDim, fontWeight: 700 }}>{label}</span>
      <span style={{
        fontSize: 12.5, color: emphasis ? accent : t.fg,
        fontWeight: 800, whiteSpace: 'nowrap',
      }}>{value}</span>
    </div>
  );
}

function BronCertBadge({ t, compact }) {
  const dark = t.mode === 'dark';
  const green = dark ? '#22C55E' : '#15803D';
  if (compact) {
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 5,
        padding: '5px 10px', borderRadius: 999,
        background: dark ? 'rgba(34,197,94,0.10)' : 'rgba(21,128,61,0.06)',
        color: green,
        border: `1px solid ${dark ? 'rgba(34,197,94,0.24)' : 'rgba(21,128,61,0.22)'}`,
        fontSize: 10.5, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
        whiteSpace: 'nowrap',
      }}>
        <PI name="badge-check" size={11} color={green} strokeWidth={2.6} />
        Gecertificeerd
      </span>
    );
  }
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 8, padding: 12,
      display: 'flex', alignItems: 'flex-start', gap: 10,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: dark ? 'rgba(34,197,94,0.12)' : 'rgba(21,128,61,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <PI name="badge-check" size={15} color={green} strokeWidth={2.4} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, color: t.fg, fontWeight: 800 }}>
          Biologie voor jou
        </div>
        <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>
          Gecertificeerd lesmateriaal · uitgever Malmberg
        </div>
      </div>
    </div>
  );
}

/* ─── FRAME 1 — Samenvatting-tab ─────────────────────────── */
function FrameHoofdstukSamenvatting({ t }) {
  return (
    <HoofdstukLayout t={t} activeTab="samenvatting">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        {SAMENVATTING_SECTIONS.map((sec, i) => (
          <SamenvattingSection key={i} t={t} {...sec} />
        ))}
        <div style={{
          padding: '14px 16px', borderRadius: 8,
          background: t.cardSunken, border: `1px solid ${t.border}`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <PI name="info" size={14} color={t.fgMute} strokeWidth={2.4} />
          <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5, flex: 1 }}>
            Pulse heeft deze samenvatting opgesteld op basis van Biologie voor jou. Klopt iets niet, of mis je iets? Stel een vraag in de Pulse-tab.
          </span>
        </div>
      </div>
    </HoofdstukLayout>
  );
}

function SamenvattingSection({ t, heading, body }) {
  return (
    <div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        marginBottom: 8,
      }}>
        <h3 style={{
          margin: 0, fontFamily: 'Fredoka One', fontSize: 18,
          color: t.fg, lineHeight: 1.2, letterSpacing: '-0.005em',
        }}>{heading}</h3>
        <span style={{ flex: 1 }} />
        <BtnGhost t={t} icon="sparkles">Leg verder uit</BtnGhost>
      </div>
      <p style={{
        margin: 0, fontSize: 14, color: t.fgDim,
        lineHeight: 1.7, fontWeight: 500,
        textWrap: 'pretty',
      }}>{body}</p>
    </div>
  );
}

/* ─── FRAME 2 — Flashcards-tab ───────────────────────────── */
function FrameHoofdstukFlashcards({ t }) {
  return (
    <HoofdstukLayout t={t} activeTab="flashcards">
      <div style={{
        display: 'flex', flexDirection: 'column', gap: 18,
      }}>
        <FlashcardDeck t={t} card={SAMPLE_FLASHCARD}
          flipped idx={3} total={12} showStackHint />

        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '12px 14px', borderRadius: 8,
          background: t.cardSunken, border: `1px solid ${t.border}`,
        }}>
          <PulseMascot size={28} mood="encouraging" />
          <span style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.5, flex: 1 }}>
            Goed bezig. Pak de moeilijke eruit voor de toets vrijdag — die zien we vaker terug.
          </span>
        </div>
      </div>
    </HoofdstukLayout>
  );
}

/* ─── FRAME 3 — Vraag aan Pulse-tab ──────────────────────── */
function FrameHoofdstukPulse({ t }) {
  return (
    <HoofdstukLayout t={t} activeTab="pulse">
      <ChatPanel t={t}
        source="Biologie voor jou · H3"
        messages={SAMPLE_CHAT_MESSAGES}
        suggestions={['Wat is osmose?', 'Leg meiose uit', 'Verschil planten- vs dierlijke cel?']}
        placeholder="Stel een vraag over dit hoofdstuk…"
        height={540}
      />
    </HoofdstukLayout>
  );
}

/* ─── FRAME 4 — Hoofdstuk: nog niet begonnen ─────────────── */
const SAMENVATTING_NIEUW_PEEK = SAMENVATTING_SECTIONS[0]; // alleen titel preview
const SAMENVATTING_HEADINGS = SAMENVATTING_SECTIONS.map(s => s.heading);

function FrameHoofdstukNieuw({ t }) {
  const dark = t.mode === 'dark';
  return (
    <HoofdstukLayout t={t} activeTab="samenvatting" variant="nieuw">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        {/* Hero — wat zit er in dit hoofdstuk */}
        <div style={{
          padding: '24px 26px', borderRadius: 10,
          background: t.cardSunken, border: `1px dashed ${t.borderStrong}`,
          display: 'flex', alignItems: 'flex-start', gap: 18,
        }}>
          <PulseMascot size={56} mood="encouraging" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 10.5, color: t.primary, fontWeight: 800,
              letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 4,
            }}>Nieuw hoofdstuk</div>
            <h2 style={{
              margin: 0, fontFamily: 'Fredoka One', fontSize: 22,
              color: t.fg, lineHeight: 1.25, letterSpacing: '-0.01em',
            }}>Klaar om dit hoofdstuk te ontdekken?</h2>
            <p style={{
              margin: '6px 0 0', fontSize: 13.5, color: t.fgDim,
              lineHeight: 1.6, fontWeight: 500,
            }}>We beginnen rustig. Eerst een samenvatting in drie stukken, daarna 12 flashcards om het in te slijpen. Stel onderweg gerust vragen.</p>
          </div>
        </div>

        {/* Inhoud-preview */}
        <div>
          <div style={{
            fontSize: 11, color: t.fgMute, fontWeight: 800,
            letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10,
          }}>In dit hoofdstuk · 3 onderwerpen</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {SAMENVATTING_HEADINGS.map((heading, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 14px', borderRadius: 8,
                background: t.cardSunken, border: `1px solid ${t.border}`,
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 999,
                  background: t.card, border: `1px solid ${t.borderStrong}`,
                  color: t.fgMute, fontSize: 11, fontWeight: 800,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>{i + 1}</span>
                <span style={{ flex: 1, fontSize: 13.5, color: t.fg, fontWeight: 700 }}>
                  {heading}
                </span>
                <MasteryDots t={t} level={0} size="sm" />
              </div>
            ))}
          </div>
        </div>

        {/* Footer-CTA */}
        <div style={{
          marginTop: 4, padding: '16px 18px', borderRadius: 10,
          background: dark ? 'rgba(0,180,216,0.06)' : 'rgba(0,150,199,0.04)',
          border: `1px solid ${hexToRgba(t.primary, dark ? 0.30 : 0.24)}`,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <PI name="play-circle" size={22} color={t.primary} strokeWidth={2.4} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg }}>
              Start hoofdstuk
            </div>
            <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>
              We openen de samenvatting en lopen 'm samen door
            </div>
          </div>
          <BtnPrimary t={t} icon="play">Start hoofdstuk</BtnPrimary>
        </div>
      </div>
    </HoofdstukLayout>
  );
}

/* ─── FRAME 5 — Hoofdstuk: voltooid ──────────────────────── */
function FrameHoofdstukVoltooid({ t }) {
  const dark = t.mode === 'dark';
  const green = dark ? '#22C55E' : '#15803D';
  return (
    <HoofdstukLayout t={t} activeTab="samenvatting" variant="voltooid">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        {/* Voltooid-hero */}
        <div style={{
          padding: '24px 26px', borderRadius: 10,
          background: dark ? 'rgba(34,197,94,0.07)' : 'rgba(21,128,61,0.04)',
          border: `1px solid ${dark ? 'rgba(34,197,94,0.28)' : 'rgba(21,128,61,0.22)'}`,
          display: 'flex', alignItems: 'flex-start', gap: 18,
        }}>
          <PulseMascot size={56} mood="celebrating" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 10.5, color: green, fontWeight: 800,
              letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 4,
              display: 'inline-flex', alignItems: 'center', gap: 5,
            }}>
              <PI name="badge-check" size={11} color={green} strokeWidth={2.6} />
              Hoofdstuk afgerond
            </div>
            <h2 style={{
              margin: 0, fontFamily: 'Fredoka One', fontSize: 22,
              color: t.fg, lineHeight: 1.25, letterSpacing: '-0.01em',
            }}>Je beheerst dit hoofdstuk.</h2>
            <p style={{
              margin: '6px 0 0', fontSize: 13.5, color: t.fgDim,
              lineHeight: 1.6, fontWeight: 500,
            }}>Ik laat je 'm rustig herhalen om het vast te houden — geen druk, gewoon één keer per week kort langslopen.</p>

            <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '5px 11px', borderRadius: 999,
                background: t.card, border: `1px solid ${t.border}`,
                fontSize: 11.5, color: t.fgDim, fontWeight: 700,
              }}>
                <PI name="calendar" size={11} color={t.fgMute} strokeWidth={2.4} />
                Volgende keer: <b style={{ color: t.fg }}>ma 14 apr</b>
              </span>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '5px 11px', borderRadius: 999,
                background: t.card, border: `1px solid ${t.border}`,
                fontSize: 11.5, color: t.fgDim, fontWeight: 700,
              }}>
                <PI name="repeat" size={11} color={t.fgMute} strokeWidth={2.4} />
                ~ 3 min
              </span>
            </div>
          </div>
        </div>

        {/* Onderwerpen — alles 4/4 */}
        <div>
          <div style={{
            fontSize: 11, color: t.fgMute, fontWeight: 800,
            letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10,
          }}>Beheersing per onderwerp</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {SAMENVATTING_HEADINGS.map((heading, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 14px', borderRadius: 8,
                background: t.cardSunken, border: `1px solid ${t.border}`,
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 999,
                  background: dark ? 'rgba(34,197,94,0.14)' : 'rgba(21,128,61,0.10)',
                  color: green,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <PI name="check" size={13} color={green} strokeWidth={3} />
                </span>
                <span style={{ flex: 1, fontSize: 13.5, color: t.fg, fontWeight: 700 }}>
                  {heading}
                </span>
                <MasteryDots t={t} level={4} size="sm" />
              </div>
            ))}
          </div>
        </div>

        {/* Footer — onderhoudsherhaling CTA (secondary) */}
        <div style={{
          marginTop: 4, padding: '16px 18px', borderRadius: 10,
          background: t.cardSunken, border: `1px solid ${t.border}`,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <PI name="repeat" size={20} color={t.fgDim} strokeWidth={2.4} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg }}>
              Onderhoudsherhaling
            </div>
            <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>
              1× per week · ~ 3 min · zo blijft het zitten
            </div>
          </div>
          <BtnGhost t={t} icon="repeat">Nu starten</BtnGhost>
        </div>
      </div>
    </HoofdstukLayout>
  );
}

/* ─── FRAME 6 — Mindmap-tab ──────────────────────────────── */
const MINDMAP_NODES = [
  { id: 'cel',         label: 'Wat is een cel?',          mastery: 3, angle: -90 },
  { id: 'mitose',      label: 'Mitose vs meiose',          mastery: 2, angle: -30, hover: true },
  { id: 'plant-dier',  label: 'Plantencel vs dierlijk',    mastery: 2, angle: 30 },
  { id: 'osmose',      label: 'Osmose & diffusie',         mastery: 1, angle: 90 },
  { id: 'organel',     label: 'Organellen & functies',     mastery: 3, angle: 150 },
  { id: 'dna',         label: 'DNA in de cel',             mastery: 1, angle: 210 },
];

function FrameHoofdstukMindmap({ t }) {
  return (
    <HoofdstukLayout t={t} activeTab="mindmap">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 220px', gap: 18 }}>
        <MindmapCanvas t={t} />
        <MindmapSideHint t={t} />
      </div>
    </HoofdstukLayout>
  );
}

function MindmapCanvas({ t }) {
  const dark = t.mode === 'dark';
  const W = 640, H = 460;
  const cx = W / 2, cy = H / 2;
  const R = 168;
  const lineColor = dark ? 'rgba(148,163,184,0.28)' : 'rgba(100,116,139,0.30)';

  return (
    <div style={{
      position: 'relative',
      background: t.cardSunken, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: 14,
      minHeight: H + 28,
      backgroundImage: dark
        ? 'radial-gradient(circle at 50% 50%, rgba(0,180,216,0.05) 0%, transparent 60%)'
        : 'radial-gradient(circle at 50% 50%, rgba(0,150,199,0.04) 0%, transparent 60%)',
    }}>
      <svg width={W} height={H} style={{ display: 'block', margin: '0 auto' }}>
        {/* Lines from center to each node */}
        {MINDMAP_NODES.map((n, i) => {
          const rad = (n.angle * Math.PI) / 180;
          const x = cx + Math.cos(rad) * R;
          const y = cy + Math.sin(rad) * R;
          return (
            <line key={i}
              x1={cx} y1={cy} x2={x} y2={y}
              stroke={n.hover ? t.primary : lineColor}
              strokeWidth={n.hover ? 2 : 1.4}
              strokeDasharray={n.hover ? null : '3 4'}
            />
          );
        })}

        {/* Center node */}
        <g>
          <circle cx={cx} cy={cy} r={62}
            fill={t.card}
            stroke={hexToRgba(t.primary, 0.45)}
            strokeWidth={2}
          />
          <circle cx={cx} cy={cy} r={62}
            fill={hexToRgba(t.primary, dark ? 0.10 : 0.06)}
          />
        </g>
      </svg>

      {/* Center label (HTML overlay for type rendering) */}
      <div style={{
        position: 'absolute', left: 14 + cx - 60, top: 14 + cy - 30,
        width: 120, textAlign: 'center', pointerEvents: 'none',
      }}>
        <div style={{
          fontSize: 9.5, color: t.primary, fontWeight: 800,
          letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 2,
        }}>Hoofdstuk</div>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 13, color: t.fg,
          lineHeight: 1.15, letterSpacing: '-0.005em',
        }}>Cellen en celdeling</div>
      </div>

      {/* Subtopic nodes (HTML for hit-targets + text rendering) */}
      {MINDMAP_NODES.map((n, i) => {
        const rad = (n.angle * Math.PI) / 180;
        const x = cx + Math.cos(rad) * R;
        const y = cy + Math.sin(rad) * R;
        return (
          <MindmapNode key={i} t={t}
            label={n.label}
            mastery={n.mastery}
            hover={n.hover}
            style={{ position: 'absolute', left: 14 + x - 78, top: 14 + y - 26, width: 156 }}
          />
        );
      })}
    </div>
  );
}

function MindmapNode({ t, label, mastery, hover, style }) {
  const dark = t.mode === 'dark';
  return (
    <div style={{
      ...style,
      padding: '8px 10px', borderRadius: 10,
      background: hover
        ? (dark ? 'rgba(0,180,216,0.10)' : 'rgba(0,150,199,0.06)')
        : t.card,
      border: `1px solid ${hover ? hexToRgba(t.primary, 0.5) : t.border}`,
      boxShadow: hover
        ? (dark ? '0 6px 18px rgba(0,180,216,0.18)' : '0 4px 12px rgba(0,150,199,0.18)')
        : (dark ? '0 2px 6px rgba(0,0,0,0.30)' : '0 1px 3px rgba(15,23,42,0.06)'),
      display: 'flex', flexDirection: 'column', gap: 4,
      cursor: 'pointer',
    }}>
      <span style={{
        fontSize: 11.5, color: t.fg, fontWeight: 800, lineHeight: 1.25,
        textWrap: 'pretty',
      }}>{label}</span>
      <MasteryDots t={t} level={mastery} size="sm" />
    </div>
  );
}

function MindmapSideHint({ t }) {
  return (
    <div style={{
      background: t.cardSunken, border: `1px dashed ${t.borderStrong}`,
      borderRadius: 10, padding: '14px 14px 16px',
      display: 'flex', flexDirection: 'column', gap: 10,
      alignSelf: 'flex-start',
    }}>
      <PulseMascot size={40} mood="thinking" />
      <div>
        <div style={{
          fontSize: 11, color: t.primary, fontWeight: 800,
          letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 4,
        }}>Tip</div>
        <p style={{
          margin: 0, fontSize: 12.5, color: t.fgDim,
          lineHeight: 1.55, fontWeight: 600,
        }}>Klik op een knooppunt om er dieper in te duiken — je krijgt de samenvatting van dat onderdeel + de bijhorende kaarten.</p>
      </div>
      <div style={{
        marginTop: 4, paddingTop: 10, borderTop: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5,
        color: t.fgMute, fontWeight: 700,
      }}>
        <PI name="circle" size={9} color={t.fgMute} strokeWidth={2.4} />
        Open knooppunt: <b style={{ color: t.fg }}>Mitose vs meiose</b>
      </div>
    </div>
  );
}

Object.assign(window, {
  HoofdstukLayout, StandVanZakenCard, BronCertBadge,
  FrameHoofdstukSamenvatting, FrameHoofdstukFlashcards, FrameHoofdstukPulse,
  FrameHoofdstukNieuw, FrameHoofdstukVoltooid, FrameHoofdstukMindmap,
});