/* ═════════════════════════════════════════════════════════
   Moment 3 — Slechte dag / 'geen zin'-knop (3 states)
   Moment 4 — Anti-burnout guardrails (2 patterns)
   ═════════════════════════════════════════════════════════ */

function Moment3() {
  const t = TK;

  /* Shared right-column mission card — shown lit in A, dimmed in B, restored in C */
  const missions = [
    { title: '3 taken op één dag', icon: 'target', progress: 0.67, done: 2, target: 3, reward: 25 },
    { title: 'Flashcards 5× deze week', icon: 'layers', progress: 0.4, done: 2, target: 5, reward: 40 },
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* STATE A — normal stapel, link visible at footer */}
      <SceneFrame num="3A" title="Stapel normaal · de knop zit onderaan" context="permanent klein, niet schreeuwend, onder de dag-kolom" height={580}>
        <StapelShell title="Plannen" subtitle="Donderdag 14 november · 16:12" height={580}>
          <main style={{ flex: 1, overflow: 'hidden', padding: '16px 24px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <WeekGrid density="compact" showHeader={false}
              week={[
                { day: 'ma', date: 11, past: true, items: [{ s: 'wiskunde', n: 1 }, { s: 'engels', n: 1 }] },
                { day: 'di', date: 12, past: true, items: [{ s: 'wiskunde', n: 2 }] },
                { day: 'wo', date: 13, past: true, items: [{ s: 'wiskunde', n: 1 }, { s: 'biologie', n: 1 }] },
                { day: 'do', date: 14, today: true, items: [{ s: 'wiskunde', n: 1 }, { s: 'engels', n: 1 }, { s: 'biologie', n: 1 }] },
                { day: 'vr', date: 15, items: [{ s: 'wiskunde', n: 1 }] },
                { day: 'za', date: 16, deadline: 'wiskunde', deadlineType: 'Toets', dlLabel: 'Statistiek H7' },
                { day: 'zo', date: 17 },
              ]}
            />
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '280px 1fr 260px', gap: 16, minHeight: 0 }}>
              {/* Deadlines */}
              <section style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <h2 style={colHeader(t)}>Deadlines</h2>
                <DeadlineCardCompact d={{ subject: 'wiskunde', type: 'Toets', title: 'Statistiek · H7', days: 2, progress: 0.55 }} active />
                <DeadlineCardCompact d={{ subject: 'engels', type: 'Essay', title: 'Literature essay', days: 5, progress: 0.18 }} />
              </section>
              {/* Dag */}
              <section style={{ display: 'flex', flexDirection: 'column', gap: 8, minHeight: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <h2 style={colHeader(t)}>Vandaag</h2>
                  <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>3 taken · 55 min</span>
                </div>
                <TaskRow task={{ subject: 'wiskunde', title: 'Statistiek — 5 oefenopgaves', mins: 20, source: 'Wisk · H7', type: 'oefenen', detail: 'Flow-sessie · 20 min focus' }} state="active" />
                <TaskRow task={{ subject: 'engels', title: 'Lezen hoofdstuk 3', mins: 20, source: 'En · essay prep', type: 'lezen' }} state="queued" />
                <TaskRow task={{ subject: 'biologie', title: 'Flashcards herhalen', mins: 15, source: 'Bio · H4', type: 'flashcards' }} state="queued" />
                <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: `1px dashed ${t.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <NoZinLink />
                  <Callout3 />
                </div>
              </section>
              {/* Missies */}
              <section style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <h2 style={colHeader(t)}>Missies</h2>
                {missions.map((m, i) => <MissionRow key={i} mission={m} />)}
              </section>
            </div>
          </main>
        </StapelShell>
      </SceneFrame>

      {/* ROW B + C side by side */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        {/* STATE B — zachte modus actief */}
        <SceneFrame num="3B" title="Zachte dagmodus actief" context="dag is klein — max 2 zachte taken, missies uit, pulse stil" height={580}>
          <StapelShell title="Plannen" subtitle="Donderdag 14 november · 16:13" height={580}>
            <main style={{ flex: 1, overflow: 'hidden', padding: '16px 24px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <PulseCard
                tone="calm"
                mood="encouraging"
                label="Pulse"
                title="Oké. Dag gemaakt."
                body="Twee kleine dingen als je wilt. Anders is ook goed. Tot morgen."
                footer="Geen missies vandaag · streak niet in gevaar · morgen is morgen"
              />
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4, minHeight: 0 }}>
                <Sectionlabel right={<span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>ALS JE WILT · NIETS MOET</span>}>Vandaag — klein</Sectionlabel>
                <TaskRow task={{ subject: 'biologie', title: '10 flashcards doorheen — alleen kijken', mins: 10, source: 'vrijblijvend', type: 'flashcards' }} state="queued" />
                <TaskRow task={{ subject: 'engels', title: 'Hoofdstuk lezen zonder noten', mins: 15, source: 'vrijblijvend', type: 'lezen' }} state="queued" />
                <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{ background: t.cardAlt, border: `1px dashed ${t.border}`, borderRadius: 10, padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10 }}>
                    <I name="moon" size={14} color={t.fgMute} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 11.5, fontWeight: 800, color: t.fgDim }}>Deadlines staan stil</div>
                      <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600, marginTop: 1 }}>Wiskunde-toets is morgen nog morgen. Pulse houdt 'm bij.</div>
                    </div>
                    <button style={microBtn(t)}>
                      <I name="x" size={10} /> Zacht uit
                    </button>
                  </div>
                </div>
              </div>
            </main>
          </StapelShell>
        </SceneFrame>

        {/* STATE C — morgen, zachte opstart */}
        <SceneFrame num="3C" title="Volgende dag · geen rood" context="gisteren was een pauze, niet een achterstand" height={580}>
          <StapelShell title="Plannen" subtitle="Vrijdag 15 november · 07:45" height={580}>
            <main style={{ flex: 1, overflow: 'hidden', padding: '16px 24px 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <PulseCard
                tone="neutral"
                mood="warm"
                label="pulse"
                title="Gisteren was een pauze. Vandaag is vandaag."
                body={<>Een normale dag — drie taken, niets extra voor wat gisteren nog stond. <b style={{ color: t.fg }}>Niks is achter</b>; Wiskunde-toets is nog steeds maandag.</>}
                dismissable
              />
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8, minHeight: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <h2 style={colHeader(t)}>Vrijdag</h2>
                  <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>3 taken · 50 min</span>
                </div>
                <TaskRow task={{ subject: 'wiskunde', title: 'Statistiek — opgaves 4 t/m 7', mins: 20, source: 'Wisk · H7', type: 'oefenen', detail: 'In de studie-uur op school' }} state="active" />
                <TaskRow task={{ subject: 'engels', title: 'Lezen hoofdstuk 3 — doornemen', mins: 20, source: 'En · essay', type: 'lezen' }} state="queued" />
                <TaskRow task={{ subject: 'biologie', title: 'Flashcards H4 — eerste ronde', mins: 10, source: 'Bio · toets', type: 'flashcards' }} state="queued" />
                <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: `1px dashed ${t.border}` }}>
                  <NoZinLink />
                </div>
              </div>
            </main>
          </StapelShell>
        </SceneFrame>
      </div>
    </div>
  );
}

/* Tiny callout pointing at the NoZinLink in state A */
function Callout3() {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, maxWidth: 280 }}>
      <div style={{ flex: 1, fontSize: 10, color: t.fgMute, fontWeight: 600, lineHeight: 1.45, textAlign: 'right', fontStyle: 'italic' }}>
        permanent klein onderaan de Stapel.<br/>eerste persoon. geen vraag achteraf.
      </div>
      <svg width="36" height="14" viewBox="0 0 36 14" style={{ flexShrink: 0 }}>
        <path d="M2 7 Q18 1 34 11" stroke="#C4B5FD" strokeWidth="1.5" fill="none" strokeDasharray="2 2" />
        <path d="M2 7 L6 4 M2 7 L6 10" stroke="#C4B5FD" strokeWidth="1.5" fill="none" />
      </svg>
    </div>
  );
}

/* ═════════════════════════════════════════════════════════
   Moment 4 — Anti-burnout · 2 patterns
   A · Openings-observatie (card bovenaan stapel, vraagt actief)
   B · In-sessie pauze-hint (faded-in onderin focus-mode)
   ═════════════════════════════════════════════════════════ */

function Moment4() {
  const t = TK;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      {/* PATTERN A */}
      <SceneFrame num="4A" title="Openings-observatie · halvering aanbieden" context="avond-opening na 5e avond van 3u+" height={880}>
        <StapelShell title="Plannen" subtitle="Woensdag 20 november · 21:14" height={880}>
          <main style={{ flex: 1, overflow: 'auto', padding: '18px 24px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <PulseCard
              tone="warm"
              mood="thinking"
              label="pulse · observatie"
              title="Je hebt vijf avonden op rij na tienen doorgewerkt."
              body={
                <>Zal ik morgen halveren? Ik schuif dan <b style={{ color: t.fg }}>Scheikunde-samenvatting</b> naar woensdag.
                <br/><span style={{ color: t.fgMute, fontSize: 11.5, fontStyle: 'italic', display: 'inline-block', marginTop: 6 }}>Eén knop, één beslissing. Als je nee zegt vraag ik 't morgen niet opnieuw.</span></>
              }
            >
              {/* custom choices with preview */}
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 6 }}>
                <GuardrailChoice label="Ja, halveer morgen" hint="·  3 taken → 2 · bed 22:30" color={t.primary} />
                <GuardrailChoice label="Nee, het gaat wel" hint="·  geen herhaling deze week" />
                <GuardrailChoice label="Later vragen" hint="·  over 2 dagen opnieuw" />
              </div>
            </PulseCard>

            {/* Preview: zo zou morgen eruitzien */}
            <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 12, padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <I name="eye" size={13} color={t.fgMute} />
                <span style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase' }}>Voorvertoning — donderdag als je ‘ja’ zegt</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 16px 1fr', gap: 10, alignItems: 'center' }}>
                <div style={{ background: t.cardAlt, borderRadius: 10, padding: '10px 12px', border: `1px solid ${t.border}` }}>
                  <div style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute, textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 6 }}>nu geplant · donderdag</div>
                  <PreviewLine subject="wiskunde" text="Statistiek oefenopgaves" mins={25} />
                  <PreviewLine subject="scheikunde" text="Samenvatting H6 afmaken" mins={40} struck />
                  <PreviewLine subject="engels" text="Essay-paragraaf 2" mins={25} />
                  <PreviewLine subject="biologie" text="Flashcards H4" mins={15} />
                  <div style={{ fontSize: 10, color: t.fgMute, fontWeight: 700, marginTop: 6 }}>totaal · ~105 min + bed 23:00</div>
                </div>
                <div style={{ textAlign: 'center', color: t.fgMute }}><I name="chevron-right" size={16} /></div>
                <div style={{ background: `color-mix(in srgb, ${t.primary} 8%, ${t.cardAlt})`, borderRadius: 10, padding: '10px 12px', border: `1px solid ${t.primary}` }}>
                  <div style={{ fontSize: 10.5, fontWeight: 800, color: t.primary, textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 6 }}>na halvering · donderdag</div>
                  <PreviewLine subject="wiskunde" text="Statistiek oefenopgaves" mins={25} />
                  <PreviewLine subject="engels" text="Essay-paragraaf 2" mins={25} />
                  <PreviewLine subject="biologie" text="Flashcards H4" mins={15} />
                  <div style={{ fontSize: 10, color: t.fgMute, fontWeight: 600, marginTop: 6, fontStyle: 'italic' }}>Scheikunde-samenvatting staat nu op <b style={{ color: t.fg, fontStyle: 'normal' }}>woensdag volgende week</b>.</div>
                  <div style={{ fontSize: 10, color: t.primary, fontWeight: 800, marginTop: 3 }}>totaal · ~65 min + bed 22:30</div>
                </div>
              </div>
            </div>

            {/* The rest of the stapel — smaller, to show context */}
            <div style={{ opacity: 0.5, pointerEvents: 'none' }}>
              <Sectionlabel>Vandaag · avond</Sectionlabel>
              <TaskRow task={{ subject: 'scheikunde', title: 'Zuren & basen — oefenopgaves', mins: 25, source: 'Sk · toets', type: 'oefenen' }} state="queued" />
              <TaskRow task={{ subject: 'engels', title: 'Essay-inleiding schrijven', mins: 30, source: 'En', type: 'oefenen' }} state="queued" />
            </div>
          </main>
        </StapelShell>
      </SceneFrame>

      {/* PATTERN B — in-sessie pauze-hint binnen Focus-mode */}
      <SceneFrame num="4B" title="In-sessie pauze-hint · focus-mode" context="90 min bezig · fade-in onderin · géén onderbreking" height={940}>
        <FocusModeMock height={940} />
      </SceneFrame>
    </div>
  );
}

function GuardrailChoice({ label, hint, color }) {
  const t = TK;
  const primary = !!color;
  return (
    <div style={{
      background: primary ? `color-mix(in srgb, ${color} 14%, ${t.card})` : t.card,
      border: `1.5px solid ${primary ? color : t.border}`,
      borderRadius: 10, padding: '10px 14px',
      display: 'flex', flexDirection: 'column', gap: 3, minWidth: 190, cursor: 'pointer',
    }}>
      <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg }}>{label}</div>
      <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600 }}>{hint}</div>
    </div>
  );
}

function PreviewLine({ subject, text, mins, struck }) {
  const t = TK;
  const s = SUBJECTS[subject];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0',
      opacity: struck ? 0.4 : 1,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 2, background: s.color, flexShrink: 0 }} />
      <span style={{ flex: 1, fontSize: 11.5, color: t.fg, fontWeight: 600, textDecoration: struck ? 'line-through' : 'none', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {text}
      </span>
      <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 800 }}>{mins}m</span>
    </div>
  );
}

/* Focus-mode mock: dark full-screen study session with a huge timer,
   a flashcard, and the rising pause-hint at the bottom. */
function FocusModeMock({ height }) {
  const t = TK;
  return (
    <div className="is-dark" style={{
      height, background: 'linear-gradient(180deg, #0A0F1E 0%, #060910 100%)',
      position: 'relative', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'flex-start', padding: 32,
      fontFamily: 'Nunito', color: t.fg,
    }}>
      {/* Header bar */}
      <div style={{ position: 'absolute', top: 16, left: 20, right: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: 'rgba(0,180,216,0.14)', color: t.primary, padding: '5px 12px',
          borderRadius: 9999, border: '1px solid rgba(0,180,216,0.3)', fontSize: 11, fontWeight: 800,
        }}>
          <I name="zap" size={11} color={t.primary} fill={t.primary} strokeWidth={0} /> Focus · Scheikunde
        </div>
        <span style={{ fontSize: 12, color: t.fgMute, fontWeight: 700 }}>sessie 2 · zuren & basen</span>
        <span style={{ flex: 1 }} />
        <button style={{ width: 32, height: 32, borderRadius: 9, background: t.card, color: t.fgDim, border: `1px solid ${t.border}`, cursor: 'pointer' }}>
          <I name="x" size={14} />
        </button>
      </div>

      {/* Big timer */}
      <div style={{ marginTop: 58, textAlign: 'center' }}>
        <div style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.8, textTransform: 'uppercase' }}>bezig sinds 19:30</div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 72, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 8, color: t.fg }}>
          1:32:14
        </div>
        <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, marginTop: 4 }}>32 kaarten gedaan · 4 twijfels</div>
      </div>

      {/* flashcard */}
      <div style={{
        marginTop: 32, width: '100%', maxWidth: 420,
        background: t.card, border: `1px solid ${t.border}`, borderRadius: 16,
        padding: '28px 26px', boxShadow: '0 22px 60px rgba(0,0,0,0.5)',
      }}>
        <div style={{ fontSize: 10, fontWeight: 800, color: '#C4B5FD', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 10 }}>
          <I name="flask-conical" size={10} color="#C4B5FD" style={{ verticalAlign: -1, marginRight: 4 }} /> Vraag 33
        </div>
        <div style={{ fontSize: 18, fontWeight: 800, color: t.fg, lineHeight: 1.4, letterSpacing: '-0.005em' }}>
          Wat is de pH van een oplossing met <span style={{ color: '#C4B5FD' }}>[H⁺] = 10⁻⁴ mol/L</span>?
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
          <button style={{ flex: 1, padding: '11px 0', borderRadius: 10, background: 'rgba(34,197,94,0.14)', color: '#86EFAC', border: '1px solid rgba(34,197,94,0.28)', fontWeight: 800, fontSize: 13, cursor: 'pointer' }}>Ik wist 'm</button>
          <button style={{ flex: 1, padding: '11px 0', borderRadius: 10, background: 'rgba(245,158,11,0.14)', color: '#FDE68A', border: '1px solid rgba(245,158,11,0.28)', fontWeight: 800, fontSize: 13, cursor: 'pointer' }}>Bijna</button>
          <button style={{ flex: 1, padding: '11px 0', borderRadius: 10, background: 'rgba(239,68,68,0.12)', color: '#FCA5A5', border: '1px solid rgba(239,68,68,0.28)', fontWeight: 800, fontSize: 13, cursor: 'pointer' }}>Nee</button>
        </div>
      </div>

      {/* THE PAUSE HINT — faded in at bottom */}
      <div style={{
        position: 'absolute', bottom: 90, left: '50%', transform: 'translateX(-50%)',
        background: 'rgba(20, 27, 44, 0.9)', backdropFilter: 'blur(20px)',
        border: '1px solid rgba(226,232,240,0.12)', borderRadius: 14,
        padding: '12px 14px 12px 14px', display: 'flex', gap: 12, alignItems: 'center',
        boxShadow: '0 20px 50px rgba(0,0,0,0.6)',
        minWidth: 420, opacity: 0.96,
      }}>
        <div style={{ width: 32, height: 32, borderRadius: 9, background: 'rgba(0,180,216,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <PulseMascot variant="glow" mood="warm" size="sm" />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 800, color: t.fg, lineHeight: 1.3 }}>Je bent 90 minuten bezig.</div>
          <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 500, marginTop: 2 }}>Wil je 10 minuten? Timer loopt door, kaarten blijven staan.</div>
        </div>
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          height: 32, padding: '0 12px', borderRadius: 8,
          background: t.card, color: t.fgDim, border: `1px solid ${t.border}`,
          fontWeight: 800, fontSize: 11.5, cursor: 'pointer', flexShrink: 0,
        }}>
          <I name="coffee" size={12} /> 10 min
        </button>
        <button style={{ width: 28, height: 28, borderRadius: 7, background: 'transparent', border: 0, color: t.fgMute, cursor: 'pointer' }}>
          <I name="x" size={13} />
        </button>
      </div>

      {/* Tiny footer note */}
      <div style={{ position: 'absolute', bottom: 6, left: 20, right: 20, textAlign: 'center', fontSize: 9.5, color: t.fgMute, fontWeight: 600, fontStyle: 'italic', letterSpacing: 0.3 }}>
        geen reactie → hint verdwijnt na 45s · geen escalation
      </div>
    </div>
  );
}

window.Moment3 = Moment3;
window.Moment4 = Moment4;