/* Foundation & Shell — 9 sections rendered into one canvas.
   Each section has a header + dark/light pairs of phone frames or component cards. */

const { useState: secUseState } = React;

/* ─── Wrapper for a dark/light side-by-side pair ─── */
function ModeBoth({ children, gap = 24, label }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {label && (
        <div style={{
          fontSize: 10.5, fontWeight: 800, color: '#64748B',
          letterSpacing: 0.7, textTransform: 'uppercase',
        }}>{label}</div>
      )}
      <div style={{ display: 'flex', gap, alignItems: 'flex-start' }}>
        {typeof children === 'function' ? (
          <>{children(TK_DARK)}{children(TK_LIGHT)}</>
        ) : children}
      </div>
    </div>
  );
}

/* ═══════════════ SECTION 1 — PhoneShell ═══════════════ */
function Sec1_PhoneShell() {
  const renderShell = (t) => (
    <PhoneShell t={t} label={t.mode === 'dark' ? 'Dark' : 'Light'}>
      <StatusBar t={t} />
      <DotGrid t={t} />
    </PhoneShell>
  );
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="1 · Phone-shell · 390×844"
        caption="iPhone 14 reference frame met dark + light variant naast elkaar. 44px corner-radius, 1px border, shadow-elevated. Status-bar 24h: 9:41 links, signal/wifi/battery icons rechts." />
      <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
        {renderShell(TK_DARK)}
        {renderShell(TK_LIGHT)}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 2 — Topbar varianten ═══════════════ */
const TOPBAR_VARIANTS = [
  { id: 'normaal', label: 'Normaal', subtitle: 'Dinsdag 22 april · 14:03', bellAlert: false },
  { id: 'klaar', label: 'Alles klaar', subtitle: 'Dinsdag 22 april · alles van vandaag is klaar', bellAlert: false },
  { id: 'comeback', label: 'Comeback', subtitle: 'Dinsdag 22 april · welkom terug na 4 dagen', bellAlert: false },
  { id: 'schoolsysteem', label: 'Schoolsysteem-import', subtitle: 'Dinsdag 22 april · 12 nieuwe items uit je schoolsysteem', bellAlert: true },
  { id: 'pulse', label: 'Pulse observeert', subtitle: 'Dinsdag 22 april · Pulse heeft iets gezien', bellAlert: true },
];
function Sec2_Topbar() {
  const renderMini = (t, v) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <PairLabel t={t}>{v.label} · {t.mode}</PairLabel>
      <div style={{
        width: 390, borderRadius: 24, overflow: 'hidden',
        background: t.card, border: `1px solid ${t.border}`,
        boxShadow: t.shadowCard,
      }}>
        <StatusBar t={t} />
        <MobileTopbar t={t} subtitle={v.subtitle} bellAlert={v.bellAlert} />
        <div style={{ height: 18, background: t.bgApp }} />
      </div>
    </div>
  );
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="2 · Topbar · subtitle-states"
        caption="Vijf varianten op de Plannen-subtitle per scenario uit PRD 14. Titel = Fredoka One 20px; subtitle = caption fg2 12px. Pills rechts: Snaps + streak + bell met optionele rode-dot voor unread." />
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 32 }}>
        {TOPBAR_VARIANTS.map(v => (
          <div key={v.id} style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
            {renderMini(TK_DARK, v)}
            {renderMini(TK_LIGHT, v)}
          </div>
        ))}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 3 — BottomNav ═══════════════ */
function Sec3_BottomNav() {
  const renderNav = (t) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <PairLabel t={t}>{t.mode}</PairLabel>
      <div style={{
        width: 390, borderRadius: 24, overflow: 'hidden',
        background: t.card, border: `1px solid ${t.border}`,
        boxShadow: t.shadowCard,
      }}>
        <div style={{ height: 18, background: t.bgApp }} />
        <MobileBottomNav t={t} active="plannen" />
      </div>
    </div>
  );
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="3 · Bottom-nav · 5 tabs"
        caption="Matches SnapSnel web sidebar: Dashboard · Leren · Oefenen · Plannen · Profiel. Plannen-tab is in deze module altijd actief (primary-color, primary-dim pill-bg, radius-xl). Inactieve tabs in fg3. Height 64 + safe-area 16. Icon 24, label caption-bold 11, vertical-stacked." />
      <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start' }}>
        {renderNav(TK_DARK)}
        {renderNav(TK_LIGHT)}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 4 — Pulse mascot moods ═══════════════ */
const MOODS = ['happy', 'thinking', 'encouraging', 'observing'];
const SIZES = [{ k: 'sm', n: 32 }, { k: 'md', n: 46 }, { k: 'lg', n: 64 }];
function Sec4_Pulse() {
  const renderGrid = (t) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <PairLabel t={t}>{t.mode}</PairLabel>
      <div style={{
        background: t.bgApp, border: `1px solid ${t.border}`,
        borderRadius: 16, padding: 16,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
        width: 390 - 32, boxSizing: 'content-box',
      }}>
        {MOODS.flatMap(mood => SIZES.map(s => (
          <div key={mood + s.k} style={{
            background: t.card, border: `1px solid ${t.border}`,
            borderRadius: 12, padding: 12,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
            minHeight: 110, justifyContent: 'space-between',
          }}>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <PulseMascotImg size={s.n} mood={mood} />
            </div>
            <div style={{
              fontSize: 10.5, fontWeight: 800, color: t.fgMute,
              letterSpacing: 0.4, textAlign: 'center',
            }}>{mood} / {s.k} ({s.n})</div>
          </div>
        )))}
      </div>
    </div>
  );
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="4 · Pulse-mascot · 4 moods × 3 sizes"
        caption="SVG-mascot, blauwe/cyaan tinten, zachte ronde vormen. Encouraging = celebrating-asset (armen omhoog); observing = idle (hoofd licht gekanteld)." />
      <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap' }}>
        {renderGrid(TK_DARK)}
        {renderGrid(TK_LIGHT)}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 4B — Subject-chip gallery ═══════════════ */
const SUBJECT_GALLERY = [
  // row 1
  { id: 'wiskunde',         label: 'Wiskunde',         icon: 'calculator',     hex: '#3B82F6' },
  { id: 'biologie',         label: 'Biologie',         icon: 'leaf',           hex: '#22C55E' },
  { id: 'scheikunde',       label: 'Scheikunde',       icon: 'flask-conical',  hex: '#A855F7' },
  { id: 'natuurkunde',      label: 'Natuurkunde',      icon: 'zap',            hex: '#6366F1' },
  { id: 'geschiedenis',     label: 'Geschiedenis',     icon: 'landmark',       hex: '#EC4899' },
  { id: 'aardrijkskunde',   label: 'Aardrijkskunde',   icon: 'map',            hex: '#14B8A6' },
  { id: 'economie',         label: 'Economie',         icon: 'trending-up',    hex: '#10B981' },
  // row 2
  { id: 'informatica',      label: 'Informatica',      icon: 'terminal',       hex: '#0EA5E9' },
  { id: 'engels',           label: 'Engels',           icon: 'book',           hex: '#7C3AED' },
  { id: 'nederlands',       label: 'Nederlands',       icon: 'book-open-text', hex: '#EF4444' },
  { id: 'frans',            label: 'Frans',            icon: 'languages',      hex: '#F59E0B' },
  { id: 'duits',            label: 'Duits',            icon: 'languages',      hex: '#78716C' },
  { id: 'maatschappijleer', label: 'Maatschappijleer', icon: 'users',          hex: '#F97316' },
  { id: 'kunst',            label: 'Kunst',            icon: 'palette',        hex: '#F43F5E' },
];
function GalleryChip({ t, item }) {
  const fg = t.subjectFg(item.hex);
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4, height: 24,
      padding: '0 10px', borderRadius: 9999,
      background: hexToRgba(item.hex, t.mode === 'dark' ? 0.18 : 0.13),
      color: fg,
      border: `1px solid ${hexToRgba(item.hex, 0.30)}`,
      fontFamily: 'Nunito', fontWeight: 700, fontSize: 13, lineHeight: 1,
      letterSpacing: 0.1, whiteSpace: 'nowrap',
    }}>
      <MI name={item.icon} size={14} color={fg} strokeWidth={2.2} />
      {item.label}
    </span>
  );
}
function Sec4B_SubjectChips() {
  const renderGrid = (t) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <PairLabel t={t}>{t.mode}</PairLabel>
      <div style={{
        background: t.card, border: `1px solid ${t.border}`,
        borderRadius: 16, padding: 18, boxShadow: t.shadowCard,
        display: 'grid', gridTemplateColumns: 'repeat(7, max-content)',
        gap: 10, alignItems: 'center', justifyContent: 'start',
      }}>
        {SUBJECT_GALLERY.map(it => <GalleryChip key={it.id} t={t} item={it} />)}
      </div>
    </div>
  );
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="4B · Subject chips · 14 vakken"
        caption="Chip = pill met lucide-icoon + naam in vak-kleur. Icoon is verplicht — nooit alleen tekst. Rij 1: wiskunde, biologie, scheikunde, natuurkunde, geschiedenis, aardrijkskunde, economie. Rij 2: informatica, engels, nederlands, frans, duits, maatschappijleer, kunst." />
      <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap' }}>
        {renderGrid(TK_DARK)}
        {renderGrid(TK_LIGHT)}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 5 — BottomSheet heights ═══════════════ */
function SheetFrame({ t, height, title, rows, footer }) {
  return (
    <PhoneShell t={t} label={`${height} · ${t.mode}`}>
      <StatusBar t={t} />
      <MobileTopbar t={t} subtitle="Dinsdag 22 april · 14:03" />
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: t.bgApp }}>
        <DotGrid t={t} />
        <BottomSheet t={t} height={height} title={title} footer={footer}>
          {Array.from({ length: rows }).map((_, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
              <SkeletonRow t={t} width={i % 2 === 0 ? '60%' : '78%'} height={12} />
              <SkeletonRow t={t} width="100%" height={32} />
            </div>
          ))}
        </BottomSheet>
      </div>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}
function Sec5_Sheets() {
  const variants = [
    { h: 'small', title: 'Snel toevoegen', rows: 3 },
    {
      h: 'medium', title: 'Verplaats naar...', rows: 5,
      footer: (t) => (<><Btn t={t} variant="secondary" size="md" full>Annuleer</Btn><Btn t={t} variant="primary" size="md" full>Verplaats</Btn></>),
    },
    {
      h: 'full', title: 'Day-detail', rows: 8,
      footer: (t) => (<><Btn t={t} variant="ghost" size="md">Verberg</Btn><Btn t={t} variant="primary" size="md" full>Klaar</Btn></>),
    },
  ];
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="5 · Bottom-sheet · 3 heights"
        caption="Modal vanaf onderkant met drag-handle (32×4 pill) en close-X. Backdrop overlay achter sheet. Heights: small ~40vh, medium ~65vh, full = 100vh − 24." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
        {variants.map(v => (
          <div key={v.h} style={{ display: 'flex', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap' }}>
            <SheetFrame t={TK_DARK} height={v.h} title={v.title} rows={v.rows}
              footer={v.footer ? v.footer(TK_DARK) : null} />
            <SheetFrame t={TK_LIGHT} height={v.h} title={v.title} rows={v.rows}
              footer={v.footer ? v.footer(TK_LIGHT) : null} />
          </div>
        ))}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 6 — Banners ═══════════════ */
function Sec6_Banners() {
  const renderBanner = (t, b) => (
    <div style={{ width: 358 }}>{b.render(t)}</div>
  );
  const banners = [
    {
      key: 'welkom',
      label: '👋 Welkom (nieuw)',
      render: (t) => (
        <Banner t={t} accent={t.mode === 'dark' ? '#C4B5FD' : '#7C3AED'} accentRgb={t.mode === 'dark' ? '196,181,253' : '124,58,237'}
          mood="happy" label="👋 Welkom bij Plannen" title="Laten we beginnen."
          body="Start met een deadline of koppel je schoolsysteem."
          ctas={<><Btn t={t} variant="primary" size="md" full>+ Eerste deadline</Btn><Btn t={t} variant="secondary" size="md" full>Schoolsysteem koppelen</Btn></>} />
      ),
    },
    {
      key: 'comeback',
      label: 'Comeback',
      render: (t) => (
        <Banner t={t} accent={t.mode === 'dark' ? '#C4B5FD' : '#7C3AED'} accentRgb={t.mode === 'dark' ? '196,181,253' : '124,58,237'}
          mood="encouraging" label="Welkom terug" title="Je was een paar dagen weg."
          body="Wil je herplannen of opnieuw beginnen?"
          ctas={<><Btn t={t} variant="primary" size="md" full>Herplannen</Btn><Btn t={t} variant="secondary" size="md" full>Opnieuw beginnen</Btn><Btn t={t} variant="ghost" size="sm">Negeren</Btn></>} />
      ),
    },
    {
      key: 'klaar',
      label: '✓ Alles klaar',
      render: (t) => (
        <Banner t={t} accent={t.green} accentRgb={t.mode === 'dark' ? '34,197,94' : '21,128,61'}
          mood="happy" label="✓ Vandaag klaar" title="Lekker bezig."
          body="Alle 3 taken afgevinkt — nog ruimte? Pak een extra of relax."
          ctas={<><Btn t={t} variant="primary" size="md" full>+ Pak een extra</Btn><Btn t={t} variant="secondary" size="md" full>Relax</Btn></>} />
      ),
    },
    {
      key: 'pulse-warn',
      label: 'Pulse observeert',
      render: (t) => (
        <Banner t={t} accent={t.warn} accentRgb={t.mode === 'dark' ? '245,158,11' : '180,83,9'}
          mood="observing" label="Pulse heeft iets gezien" title="Vijf avonden na tienen."
          body="Wil je morgen wat meer ademruimte?"
          ctas={<><Btn t={t} variant="primary" size="md" full>Ja, plan rustiger</Btn><Btn t={t} variant="secondary" size="md" full>Laat het zo</Btn><Btn t={t} variant="ghost" size="sm">Vraag mij later</Btn></>} />
      ),
    },
    {
      key: 'schoolsysteem',
      label: 'Schoolsysteem-import',
      render: (t) => (
        <Banner t={t} accent={t.mode === 'dark' ? '#C4B5FD' : '#7C3AED'} accentRgb={t.mode === 'dark' ? '196,181,253' : '124,58,237'}
          icon="download" label="Schoolsysteem · 12 nieuwe items" title="Net binnen uit je schoolsysteem."
          body="Bekijk in Te-plannen bak om in te plannen." dismissible
          ctas={<Btn t={t} variant="primary" size="md" full>Naar Te-plannen</Btn>} />
      ),
    },
    {
      key: 'offline',
      label: 'Geen-internet (sticky)',
      render: (t) => {
        const accentRgb = t.mode === 'dark' ? '245,158,11' : '180,83,9';
        return (
          <div style={{
            background: `rgba(${accentRgb}, 0.12)`,
            borderTop: `1px solid rgba(${accentRgb}, 0.30)`,
            borderBottom: `1px solid rgba(${accentRgb}, 0.30)`,
            height: 36, padding: '0 14px',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <MI name="wifi-off" size={14} color={t.warn} strokeWidth={2.4} />
            <span style={{
              fontSize: 12, fontWeight: 700, color: t.warn,
              letterSpacing: 0.1,
            }}>Geen internet — je ziet je laatste plannen</span>
          </div>
        );
      },
    },
  ];
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="6 · Banners · 6 scenarios"
        caption="Cross-cutting Pulse-banners voor home + cross-screen. Tone is rustig en feitelijk — geen exclamation, geen druk. Zes varianten op één rij van twee (dark/light)." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        {banners.map(b => (
          <div key={b.key}>
            <div style={{ marginBottom: 8, fontSize: 11, fontWeight: 800, color: '#64748B', letterSpacing: 0.6, textTransform: 'uppercase' }}>{b.label}</div>
            <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
              {renderBanner(TK_DARK, b)}
              {renderBanner(TK_LIGHT, b)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 7 — Empty cards ═══════════════ */
function Sec7_Empty() {
  const cards = [
    {
      key: 'vandaag-leeg',
      render: (t) => (
        <EmptyCard t={t} icon="check-circle-2" iconColor={t.green}
          title="Niets ingepland voor vandaag"
          body="Geen taken of toetsen — relax of start nu alvast met morgen."
          ctas={<><Btn t={t} variant="primary" size="sm">Begin alvast met morgen</Btn><Btn t={t} variant="ghost" size="sm">+ Voeg losse taak toe</Btn></>} />
      ),
    },
    {
      key: 'deadlines-leeg',
      render: (t) => (
        <EmptyCard t={t} icon="calendar-plus" iconColor={t.primary}
          title="Geen deadlines"
          body="Voeg je eerste toets of inlever-werk toe — Pulse helpt je inplannen."
          ctas={<><Btn t={t} variant="primary" size="sm">+ Eerste deadline</Btn><Btn t={t} variant="ghost" size="sm">Schoolsysteem koppelen</Btn></>} />
      ),
    },
    {
      key: 'dag-leeg',
      render: (t) => (
        <EmptyCard t={t} icon="moon" iconColor={t.fgFaint}
          title="Geen plannen voor deze dag"
          body="Geen toets, geen taken, geen vakantie."
          ctas={<Btn t={t} variant="primary" size="sm">+ Voeg taak toe</Btn>} />
      ),
    },
    {
      key: 'weekend',
      render: (t) => (
        <EmptyCard t={t} icon="sun" iconColor={t.gold}
          title="Weekend"
          body="Vrij. Wil je toch iets inplannen?"
          ctas={<Btn t={t} variant="ghost" size="sm">+ Toch iets inplannen</Btn>} />
      ),
    },
  ];
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="7 · Empty-cards · 4 contexten"
        caption="Per context andere icoon + copy + CTA. Dashed-border 2px om empty-state visueel te markeren. Pulse-tone: rustig, geen schuldgevoel, concrete CTA." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        {cards.map(c => (
          <div key={c.key} style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <div style={{ width: 358 }}>{c.render(TK_DARK)}</div>
            <div style={{ width: 358 }}>{c.render(TK_LIGHT)}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 8 — Button grid ═══════════════ */
function Sec8_Buttons() {
  const variants = ['primary', 'secondary', 'ghost', 'destructive', 'gold'];
  const sizes = ['sm', 'md', 'lg'];
  const states = ['default', 'active', 'disabled'];
  const labels = { sm: 'Klein', md: 'Standaard', lg: 'Groot' };
  const renderTable = (t) => (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 16, padding: 24, boxShadow: t.shadowCard,
      flex: 1, minWidth: 480,
    }}>
      <div style={{
        fontSize: 10.5, fontWeight: 800, color: t.fgMute,
        letterSpacing: 0.7, textTransform: 'uppercase', marginBottom: 14,
      }}>{t.mode}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {variants.map(v => (
          <div key={v}>
            <div style={{ fontSize: 11, fontWeight: 800, color: t.fgDim, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 8 }}>{v}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              {sizes.map(sz => (
                <div key={sz} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {states.map(st => (
                    <Btn key={st} t={t} variant={v} size={sz} state={st}
                      icon={sz === 'lg' ? 'plus' : null}>
                      {sz === 'lg' && v === 'primary' ? 'Voeg toe' : labels[sz]}
                    </Btn>
                  ))}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="8 · Buttons · variants × sizes × states"
        caption="5 varianten (primary, secondary, ghost, destructive, gold) × 3 sizes (sm/md/lg) × 3 states (default, active, disabled). Sizes 32/40/48h. lg-rij toont icon-left voorbeelden." />
      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
        {renderTable(TK_DARK)}
        {renderTable(TK_LIGHT)}
      </div>
    </section>
  );
}

/* ═══════════════ SECTION 9 — FAB ═══════════════ */
function Sec9_Fab() {
  const renderFab = (t, state) => (
    <PhoneShell t={t} height={260} label={`${state} · ${t.mode}`}>
      <div style={{ flex: 1, position: 'relative', background: t.bgApp }}>
        <DotGrid t={t} />
        <div style={{ position: 'absolute', right: 24, bottom: 92 }}>
          <Fab t={t} state={state} />
        </div>
      </div>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
  return (
    <section>
      <SectionHeader t={TK_LIGHT} title="9 · FAB · floating action"
        caption="+ knop voor primary action op Stapel + Week-view. Rond 56×56, fixed bottom-right (24 right, 92 bottom — boven bottom-nav). Active = scale(0.94) + extra glow." />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          {renderFab(TK_DARK, 'default')}
          {renderFab(TK_LIGHT, 'default')}
        </div>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          {renderFab(TK_DARK, 'active')}
          {renderFab(TK_LIGHT, 'active')}
        </div>
      </div>
    </section>
  );
}

/* ═══════════════ App mount ═══════════════ */
function FoundationApp() {
  return (
    <div style={{
      minHeight: '100vh', padding: 32,
      background: '#F1F5F9', color: '#0F172A',
      fontFamily: 'Nunito, system-ui, sans-serif',
      display: 'flex', flexDirection: 'column', gap: 48,
    }}>
      {/* Page heading */}
      <header>
        <div style={{ fontSize: 11, fontWeight: 800, color: '#64748B', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 6 }}>
          Plannen Mobile · Foundation &amp; Shell
        </div>
        <h1 style={{
          margin: 0, fontFamily: 'Fredoka One', fontSize: 40,
          color: '#0F172A', letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>De mobiele bouwblokken.</h1>
        <div style={{ marginTop: 8, fontSize: 14, color: '#475569', fontWeight: 500, lineHeight: 1.5, maxWidth: 760 }}>
          Polish-niveau showcase van de mobiele primitives voor Plannen. Per blok dark + light variant naast elkaar zodat we tokens, shells en componenten visueel kunnen verifiëren voordat we aan schermen beginnen.
        </div>
      </header>

      <Sec1_PhoneShell />
      <Sec2_Topbar />
      <Sec3_BottomNav />
      <Sec4_Pulse />
      <Sec4B_SubjectChips />
      <Sec5_Sheets />
      <Sec6_Banners />
      <Sec7_Empty />
      <Sec8_Buttons />
      <Sec9_Fab />
    </div>
  );
}

{
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<FoundationApp />);
}