/* ═════════════════════════════════════════════════════════
   Moment 5 — Ritme-observatie (Momentum als Pulse-card)
   Basis Free = 1 zin per maand
   Premium = langere trends, heatmap
   ═════════════════════════════════════════════════════════ */

function Moment5() {
  const t = TK;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* TOP ROW: de card in de Stapel + opening-paneel erachter */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <SceneFrame num="5A" title="De card in de Stapel" context="1e login van de maand · 1 zin · dismissable" height={580}>
          <StapelShell title="Plannen" subtitle="Vrijdag 1 november · 08:12" height={580}>
            <main style={{ flex: 1, overflow: 'auto', padding: '16px 24px 22px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <PulseCard
                tone="calm"
                mood="warm"
                label="pulse · november"
                title={<>Deze maand ben je <b style={{ color: '#C4B5FD' }}>drie keer</b> op tijd begonnen voor een toets. Vorige maand nul keer.</>}
                footer="Eén zin per maand — geen oordeel, geen scoreboard."
                dismissable
              >
                <div style={{ display: 'flex', gap: 8, marginTop: 6, flexWrap: 'wrap' }}>
                  <div style={{
                    background: 'rgba(157,78,221,0.14)', border: '1px solid rgba(157,78,221,0.3)',
                    color: '#C4B5FD', padding: '7px 12px', borderRadius: 8,
                    fontSize: 11.5, fontWeight: 800, display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer',
                  }}>
                    <I name="line-chart" size={12} /> Bekijk hoe ik dat zie
                  </div>
                  <div style={{
                    background: 'transparent', border: `1px solid ${t.border}`,
                    color: t.fgDim, padding: '7px 12px', borderRadius: 8,
                    fontSize: 11.5, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer',
                  }}>
                    Nu niet
                  </div>
                </div>
              </PulseCard>

              {/* Rest van de stapel — gedimd */}
              <div style={{ opacity: 0.5, display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <h2 style={colHeader(t)}>Vrijdag 1 nov</h2>
                  <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>3 taken · 60 min</span>
                </div>
                <TaskRow task={{ subject: 'wiskunde', title: 'Kansberekening — 4 opgaves', mins: 20, source: 'Wisk · H8', type: 'oefenen' }} state="active" />
                <TaskRow task={{ subject: 'engels', title: 'Essay — paragraaf 1 afmaken', mins: 25, source: 'En · essay', type: 'oefenen' }} state="queued" />
                <TaskRow task={{ subject: 'biologie', title: 'Flashcards H5 — eerste ronde', mins: 15, source: 'Bio · toets', type: 'flashcards' }} state="queued" />
              </div>
              <div style={{ marginTop: 'auto', paddingTop: 10, borderTop: `1px dashed ${t.border}` }}>
                <NoZinLink />
              </div>
            </main>
          </StapelShell>
        </SceneFrame>

        <SceneFrame num="5B" title="Na klik · het paneel · Free-versie" context="één visual, geen percentages-dashboard" height={800}>
          <div style={{
            height: 755, background: t.panel, border: `1px solid ${t.border}`, borderRadius: 12,
            padding: 24, display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: 'rgba(157,78,221,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <PulseMascot variant="glow" mood="warm" size="sm" />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, fontWeight: 800, color: '#C4B5FD', letterSpacing: 0.6, textTransform: 'uppercase' }}>pulse · zo plan jij deze maand</div>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.fg, letterSpacing: '-0.01em', marginTop: 2 }}>Drie keer op tijd. Vorige maand nul.</div>
              </div>
              <button style={{ width: 28, height: 28, borderRadius: 7, background: 'transparent', border: `1px solid ${t.border}`, color: t.fgMute, cursor: 'pointer' }}>
                <I name="x" size={13} />
              </button>
            </div>

            {/* Toets-timeline: wanneer je begon per toets */}
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 10,
              padding: '14px 16px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.5, textTransform: 'uppercase' }}>november · per toets</div>
              <StartTimelineRow subject="biologie" toets="Bio H4-5" daysAhead={5} onTime />
              <StartTimelineRow subject="wiskunde" toets="Wisk H7" daysAhead={4} onTime />
              <StartTimelineRow subject="frans" toets="Frans SO" daysAhead={1} late />
              <StartTimelineRow subject="engels" toets="En essay" daysAhead={6} onTime />
              <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700, marginTop: 4, display: 'flex', gap: 12 }}>
                <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: '#86EFAC', marginRight: 5, verticalAlign: 0 }} />op tijd begonnen (≥3d vooraf)</span>
                <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 2, background: '#FCA5A5', marginRight: 5, verticalAlign: 0 }} />avond-ervoor</span>
              </div>
            </div>

            {/* Premium upsell — zichtbaar maar klein */}
            <div style={{
              background: 'linear-gradient(180deg, rgba(255,208,0,0.06), transparent)',
              border: '1px dashed rgba(255,208,0,0.3)', borderRadius: 10,
              padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{
                background: 'rgba(255,208,0,0.18)', color: '#FCD34D', padding: '3px 8px', borderRadius: 6,
                fontSize: 9.5, fontWeight: 800, letterSpacing: 0.4,
              }}>PREMIUM</div>
              <div style={{ flex: 1, fontSize: 12, color: t.fgDim, fontWeight: 500, lineHeight: 1.4 }}>
                Zien hoe dit over <b style={{ color: t.fg }}>3 maanden</b> eruitziet? Ritme-patronen, wanneer je begint per vak, dag-van-de-week heatmap.
              </div>
              <button style={{
                padding: '7px 12px', borderRadius: 7, background: 'transparent',
                border: `1px solid ${t.border}`, color: t.fgDim, fontWeight: 700, fontSize: 11, cursor: 'pointer',
              }}>Bekijk</button>
            </div>
          </div>
        </SceneFrame>
      </div>

      {/* BOTTOM ROW: Premium paneel — heatmap + trends + harde regel tegen ouder-view */}
      <SceneFrame num="5C" title="Premium-paneel · diepere trends" context="heatmap + vak-per-dag patroon + seizoenspatronen" height={820}>
        <div style={{
          height: 820, background: t.panel, border: `1px solid ${t.border}`, borderRadius: 12,
          padding: 24, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 20,
        }}>
          {/* LEFT — Heatmap + zin */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ background: 'rgba(255,208,0,0.16)', color: '#FCD34D', padding: '4px 10px', borderRadius: 6, fontFamily: 'Fredoka One', fontSize: 11, letterSpacing: 0.3 }}>PREMIUM · PATRONEN</div>
              <span style={{ fontSize: 11.5, color: t.fgMute, fontWeight: 700 }}>sept · okt · nov</span>
            </div>

            <div style={{ fontFamily: 'Fredoka One', fontSize: 19, color: t.fg, letterSpacing: '-0.01em', lineHeight: 1.3 }}>
              Zo plan je meestal — op <b style={{ color: '#C4B5FD' }}>maandag</b> begin je rond <b style={{ color: '#C4B5FD' }}>19:00</b>.<br/>
              <span style={{ color: t.fgDim, fontSize: 15, fontWeight: 600 }}>Dinsdag en woensdag vaker rond 16:30.</span>
            </div>

            <RhythmHeatmap />

            <div style={{ fontSize: 11.5, color: t.fgMute, fontWeight: 500, fontStyle: 'italic', lineHeight: 1.5 }}>
              Geen oordeel — gewoon wat Pulse ziet. Je bepaalt zelf of dit je goed uitkomt of niet.
            </div>
          </div>

          {/* RIGHT — Per-vak trend + ouderscheidslijn */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
            <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 10, padding: '14px 16px' }}>
              <div style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>per vak — dagen vóór toets dat je begint</div>
              <SubjectTrendRow subject="biologie" avgDays={4.2} trend="up" />
              <SubjectTrendRow subject="wiskunde" avgDays={3.5} trend="up" />
              <SubjectTrendRow subject="engels" avgDays={5.1} trend="flat" />
              <SubjectTrendRow subject="frans" avgDays={1.3} trend="down" note="begint laat — is dat bewust?" />
              <SubjectTrendRow subject="scheikunde" avgDays={2.8} trend="flat" />
            </div>

            <div style={{
              background: `linear-gradient(180deg, rgba(239,68,68,0.04), transparent)`,
              border: `1px dashed rgba(239,68,68,0.22)`, borderRadius: 10,
              padding: '11px 14px',
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <div style={{ width: 22, height: 22, borderRadius: 7, background: 'rgba(239,68,68,0.12)', color: '#FCA5A5', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <I name="eye-off" size={11} />
                </div>
                <div>
                  <div style={{ fontSize: 11.5, fontWeight: 800, color: t.fg }}>Dit paneel is niet zichtbaar voor ouders.</div>
                  <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600, marginTop: 3, lineHeight: 1.4 }}>
                    Momentum-inzicht is voor de leerling. Ouder-dashboards tonen huidige planning — geen ritme-geschiedenis, geen trends.
                  </div>
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <SettingRow label="Maandelijkse zin" value="aan" />
              <SettingRow label="Heatmap" value="aan · premium" />
              <SettingRow label="Achteruit-variant" value="open vraag i.p.v. cijfer" />
            </div>
          </div>
        </div>
      </SceneFrame>
    </div>
  );
}

/* — row: "Bio H4-5" + tijdlijn met start-punt vóór toets */
function StartTimelineRow({ subject, toets, daysAhead, onTime, late }) {
  const t = TK;
  const s = SUBJECTS[subject];
  const WEEK_DAYS = 7; // line goes from 7d-before-test to day-of-test
  const startPct = ((WEEK_DAYS - daysAhead) / WEEK_DAYS) * 100;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 60px', gap: 10, alignItems: 'center' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
        <span style={{ width: 6, height: 6, borderRadius: 2, background: s.color, flexShrink: 0 }} />
        <span style={{ fontSize: 11.5, color: t.fg, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{toets}</span>
      </div>
      <div style={{ position: 'relative', height: 16 }}>
        {/* timeline baseline */}
        <div style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 2, background: t.border, borderRadius: 2, transform: 'translateY(-50%)' }} />
        {/* filled segment: from start → test */}
        <div style={{
          position: 'absolute', top: '50%', transform: 'translateY(-50%)',
          left: `${startPct}%`, right: 0, height: 4,
          background: onTime ? '#86EFAC' : '#FCA5A5', borderRadius: 2, opacity: 0.7,
        }} />
        {/* start marker */}
        <div style={{
          position: 'absolute', top: '50%', transform: 'translate(-50%, -50%)',
          left: `${startPct}%`, width: 10, height: 10, borderRadius: 9999,
          background: onTime ? '#86EFAC' : '#FCA5A5', border: `2px solid ${t.card}`,
        }} />
        {/* test-day marker */}
        <div style={{
          position: 'absolute', top: '50%', transform: 'translate(-50%, -50%)',
          right: -4, width: 10, height: 10, borderRadius: 2,
          background: t.fgDim, border: `2px solid ${t.card}`,
        }} />
      </div>
      <div style={{ textAlign: 'right', fontSize: 11, color: onTime ? '#86EFAC' : '#FCA5A5', fontWeight: 800 }}>
        {daysAhead}d vooraf
      </div>
    </div>
  );
}

/* — rhythm heatmap: 7 cols × 4 tijdsloten */
function RhythmHeatmap() {
  const t = TK;
  const days = ['ma', 'di', 'wo', 'do', 'vr', 'za', 'zo'];
  const slots = ['07-09', '15-17', '19-21', '21-23'];
  // intensities 0-3 (how often sanne plans on that cel)
  const mtx = [
    [0, 0, 2, 1, 0, 0, 0], // 07-09 ochtend
    [0, 2, 3, 2, 1, 0, 1], // 15-17 na school
    [3, 2, 2, 3, 1, 0, 2], // 19-21 avond
    [2, 1, 0, 1, 0, 0, 1], // 21-23 laat
  ];
  const col = (v) => {
    if (v === 0) return t.card;
    if (v === 1) return 'rgba(157,78,221,0.25)';
    if (v === 2) return 'rgba(157,78,221,0.55)';
    return 'rgba(157,78,221,0.85)';
  };
  return (
    <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 10, padding: '14px 16px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '44px repeat(7, 1fr)', gap: 4, alignItems: 'center' }}>
        <div />
        {days.map(d => (
          <div key={d} style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, textAlign: 'center', letterSpacing: 0.3, textTransform: 'uppercase' }}>{d}</div>
        ))}
        {slots.map((slot, r) => (
          <React.Fragment key={slot}>
            <div style={{ fontSize: 10, color: t.fgMute, fontWeight: 700, letterSpacing: 0.2 }}>{slot}</div>
            {mtx[r].map((v, c) => (
              <div key={c} style={{
                aspectRatio: '1 / 1', borderRadius: 4, background: col(v),
                border: v >= 2 ? '1px solid rgba(157,78,221,0.4)' : `1px solid ${t.border}`,
              }} />
            ))}
          </React.Fragment>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 }}>
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>zelden</span>
        <div style={{ display: 'flex', gap: 3 }}>
          {[0,1,2,3].map(v => (
            <div key={v} style={{ width: 12, height: 12, borderRadius: 3, background: col(v), border: `1px solid ${t.border}` }} />
          ))}
        </div>
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>vaak</span>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 600, fontStyle: 'italic' }}>3 maanden gemiddeld · geen specifieke dag</span>
      </div>
    </div>
  );
}

function SubjectTrendRow({ subject, avgDays, trend, note }) {
  const t = TK;
  const s = SUBJECTS[subject];
  const tIcon = trend === 'up' ? 'trending-up' : trend === 'down' ? 'trending-down' : 'minus';
  const tColor = trend === 'up' ? '#86EFAC' : trend === 'down' ? '#FCA5A5' : t.fgMute;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0', borderBottom: `1px dashed ${t.border}` }}>
      <span style={{ width: 6, height: 6, borderRadius: 2, background: s.color, flexShrink: 0 }} />
      <span style={{ width: 90, fontSize: 11.5, color: t.fg, fontWeight: 700, textTransform: 'capitalize' }}>{s.label}</span>
      <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 700 }}>⌀ {avgDays}d vooraf</span>
      <span style={{ flex: 1 }} />
      {note && <span style={{ fontSize: 10.5, color: t.fgMute, fontStyle: 'italic', fontWeight: 600 }}>{note}</span>}
      <I name={tIcon} size={13} color={tColor} />
    </div>
  );
}

function SettingRow({ label, value }) {
  const t = TK;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 8,
      padding: '6px 10px', display: 'inline-flex', alignItems: 'center', gap: 8,
      fontSize: 10.5, fontWeight: 700,
    }}>
      <span style={{ color: t.fgMute }}>{label}</span>
      <span style={{ color: t.fg }}>{value}</span>
    </div>
  );
}

window.Moment5 = Moment5;