/* Scherm 2 — Eerste bezoek vandaag (opening-ritueel)
   Sanne had gisteren alles af. Begroetings-strip bovenaan Stapel, dismissible. */

function Screen2() {
  const t = TK;

  const today = [
    { subject: 'biologie', type: 'lezen', title: 'Celbiologie § 4.2 lezen', detail: '8 bladzijden · mindmap 2 punten', mins: 25, source: 'Bio — vrijdag' },
    { subject: 'biologie', type: 'flashcards', title: '10 flashcards herhalen', mins: 15, source: 'Bio — SRS' },
    { subject: 'wiskunde', type: 'oefenen', title: 'Oefeningen § 2.3', mins: 10, source: 'Wi — SO ma' },
  ];

  const deadlines = [
    { subject: 'biologie', type: 'Toets', title: 'H4 · Celbiologie', days: 2, progress: 0.35 },
    { subject: 'wiskunde', type: 'SO',    title: 'SO · Functies',    days: 5, progress: 0.60 },
    { subject: 'engels',   type: 'Essay', title: 'Schrijfopdracht',  days: 8, progress: 0.10 },
  ];

  return (
    <StapelShell title="Plannen" subtitle="Woensdag 10 okt · fijne middag">
      <main style={{
        flex: 1, overflow: 'hidden', padding: '20px 26px 24px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>

        {/* Opening-ritueel strip */}
        <div style={{
          background: `linear-gradient(90deg, rgba(255,208,0,0.06) 0%, rgba(0,180,216,0.06) 100%)`,
          border: `1px solid rgba(255,208,0,0.22)`, borderRadius: 14,
          padding: '12px 14px 12px 18px', display: 'flex', alignItems: 'center', gap: 14,
          position: 'relative', overflow: 'hidden', flexShrink: 0,
        }}>
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
            background: `linear-gradient(180deg, ${t.gold}, ${t.primary})`,
          }} />

          <div style={{ flexShrink: 0, width: 52 }}>
            <PulseMascot variant="glow" mood="proud" size="md" eyeAnimation="peek-up" />
          </div>

          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
              <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.fg, letterSpacing: '-0.01em' }}>
                Goed bezig, Sanne
              </span>
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                fontSize: 10, fontWeight: 800, color: t.green,
                padding: '2px 8px', borderRadius: 9999,
                background: 'rgba(34,197,94,0.14)', border: '1px solid rgba(34,197,94,0.28)',
                letterSpacing: 0.3, textTransform: 'uppercase',
              }}>
                <I name="check" size={10} strokeWidth={4} /> Gisteren 3/3
              </span>
              <span style={{ fontSize: 10.5, fontWeight: 700, color: t.fgMute }}>· 🔥 5 dagen streak</span>
            </div>
            <div style={{ fontSize: 12.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.45 }}>
              Hier is je dag — 3 taken, ~50 min. Bio blijft focus · vrijdag toets.
            </div>
          </div>

          <div style={{ display: 'flex', gap: 8, flexShrink: 0, alignItems: 'center' }}>
            <button style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              height: 34, padding: '0 14px', borderRadius: 9,
              background: t.primary, color: '#07090F', border: 0,
              cursor: 'pointer', fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5,
            }}>
              <I name="play" size={12} fill="currentColor" strokeWidth={0} color="#07090F" />
              Start middag
            </button>
            <button style={{ ...shellBtn(t, 'ghost'), height: 34 }}>Bekijk</button>
            <button style={{
              width: 28, height: 28, borderRadius: 7, background: 'transparent',
              border: `1px solid ${t.border}`, color: t.fgMute, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <I name="x" size={13} />
            </button>
          </div>
        </div>

        <WeekGrid density="medium" showHeader headerTitle="Week 41" headerRange="7–13 okt" subtitle="vrijdag is je toetsdag"
          week={[
            { day: 'ma', date: 7,  past: true,  items: [{ s: 'biologie', n: 1 }, { s: 'wiskunde', n: 1 }] },
            { day: 'di', date: 8,  past: true,  items: [{ s: 'biologie', n: 2 }] },
            { day: 'wo', date: 9,  today: true, items: [{ s: 'biologie', n: 2 }, { s: 'wiskunde', n: 1 }] },
            { day: 'do', date: 10, items: [{ s: 'biologie', n: 1 }, { s: 'engels', n: 1 }] },
            { day: 'vr', date: 11, deadline: 'biologie', deadlineType: 'Toets', dlLabel: 'H4 Celbiologie' },
            { day: 'za', date: 12 },
            { day: 'zo', date: 13, items: [{ s: 'engels', n: 1 }] },
          ]}
        />

        <div style={{
          flex: 1, display: 'grid', gridTemplateColumns: '320px 1fr',
          gap: 18, minHeight: 0,
        }}>
          {/* LEFT — deadlines */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <h2 style={colHeader(t)}>Deadlines</h2>
                <span style={sectionChip(t)}>{deadlines.length}</span>
              </div>
              <button style={{ ...shellBtn(t, 'ghost'), height: 28, padding: '0 10px' }}>
                <I name="plus" size={12} />
              </button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, overflow: 'auto', paddingRight: 2 }}>
              {deadlines.map((d, i) => <DeadlineCardCompact key={i} d={d} active={i === 0} />)}
            </div>
          </section>

          {/* RIGHT — vandaag */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0, overflow: 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Dot c={t.primary} size={8} />
              <h2 style={{ ...colHeader(t, t.primary) }}>Vandaag</h2>
              <span style={{ ...sectionChip(t, t.primary, 'rgba(0,180,216,0.14)'), border: '1px solid rgba(0,180,216,0.24)' }}>
                3 taken · ±50 min
              </span>
              <span style={{ flex: 1 }} />
              <button style={{ ...shellBtn(t, 'ghost'), height: 28, padding: '0 10px' }}>
                <I name="maximize-2" size={12} />  Focus
              </button>
            </div>

            <TaskRow task={today[0]} state="active" />
            <TaskRow task={today[1]} state="queued" />
            <TaskRow task={today[2]} state="queued" />

            <div style={{
              marginTop: 'auto', padding: '10px 14px', background: t.card, border: `1px solid ${t.border}`,
              borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <I name="target" size={13} color={t.gold} />
              <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600 }}>
                Na vandaag op <b style={{ color: t.green }}>~55%</b> voor Bio-toets.
              </span>
            </div>
          </section>
        </div>

        <CoachFAB />
      </main>
    </StapelShell>
  );
}

window.Screen2 = Screen2;