/* ═════════ Flow G — 3 mini-states ═════════
   G1  Lege Stapel (nieuwe user, geen deadlines)
   G2  Alles-klaar (vandaag af, geen overdue, dichtstbij 8+d)
   G3  Vakantie (geen school deze week)
*/

function FlowG() {
  const t = TK;
  return (
    <div id="flow-g" style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
    }}>
      <GCard num="G1" label="Lege Stapel" note="Nieuwe user · uitnodigend, niet somber"><G1Empty /></GCard>
      <GCard num="G2" label="Alles klaar" note="Vandaag af · geen valse prompts"><G2AllDone /></GCard>
      <GCard num="G3" label="Vakantie" note="Chill · oefenen-voor-de-lol optioneel"><G3Holiday /></GCard>
    </div>
  );
}

function GCard({ num, label, note, children }) {
  const t = TK;
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div style={{
          background: 'rgba(255,208,0,0.18)', color: t.gold,
          padding: '4px 9px', borderRadius: 7,
          fontFamily: 'Fredoka One', fontSize: 12, letterSpacing: '-0.01em',
        }}>{num}</div>
        <div style={{ fontSize: 13, fontWeight: 800, color: t.fg }}>{label}</div>
        <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600 }}>· {note}</div>
      </div>
      <div style={{
        background: t.bg, borderRadius: 14, border: `1px solid ${t.border}`,
        overflow: 'hidden', boxShadow: '0 16px 40px rgba(0,0,0,0.35)',
        height: 620,
      }}>{children}</div>
    </div>
  );
}

/* ── G1 — Lege Stapel ─────────────── */
function G1Empty() {
  const t = TK;
  const emptyWeek = ['ma','di','wo','do','vr','za','zo'].map((d,i) => ({
    day: d, date: 8+i, items: [], today: i === 2,
  }));

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: t.bg }}>
      {/* topbar-lite */}
      <div style={{ padding: '16px 20px', borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.fg, letterSpacing: '-0.01em' }}>Plannen</span>
        <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>· wo 10 okt</span>
        <span style={{ flex: 1 }} />
        <button style={{
          width: 30, height: 30, borderRadius: 8,
          background: t.primary, color: '#07090F', border: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 12px rgba(0,180,216,0.28)',
        }}><I name="plus" size={14} strokeWidth={3} /></button>
      </div>

      {/* lege week */}
      <div style={{ padding: '14px 16px 12px' }}>
        <WeekGrid week={emptyWeek} compact showHeader={false} />
      </div>

      {/* empty state */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', padding: '0 28px', textAlign: 'center', gap: 14 }}>
        <div style={{ width: 68, height: 68, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <PulseMascot variant="glow" mood="happy" size="lg" eyeAnimation="idle" />
        </div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.fg, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          Nog niets gepland
        </div>
        <div style={{ fontSize: 12.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.55, maxWidth: 260 }}>
          Voeg je eerste deadline toe — je eerstvolgende toets is het makkelijkst om mee te beginnen.
        </div>
        <button style={{
          height: 42, padding: '0 18px', borderRadius: 11,
          background: t.primary, color: '#07090F', border: 0,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 6,
          boxShadow: '0 8px 20px rgba(0,180,216,0.3)',
        }}>
          <I name="plus" size={13} strokeWidth={3} /> Nieuwe deadline
        </button>
      </div>
    </div>
  );
}

/* ── G2 — Alles klaar ─────────────── */
function G2AllDone() {
  const t = TK;
  const week = [
    { day: 'ma', date: 8, items: [{ s: 'biologie', n: 1 }], past: true },
    { day: 'di', date: 9, items: [{ s: 'wiskunde', n: 1 }], past: true },
    { day: 'wo', date: 10, items: [{ s: 'biologie', n: 2 }], today: true },
    { day: 'do', date: 11, items: [] },
    { day: 'vr', date: 12, items: [] },
    { day: 'za', date: 13, items: [] },
    { day: 'zo', date: 14, items: [] },
  ];

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: t.bg }}>
      <div style={{ padding: '16px 20px', borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.fg, letterSpacing: '-0.01em' }}>Plannen</span>
        <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>· wo 10 okt</span>
        <span style={{ flex: 1 }} />
        <SnapsPill count={240} />
      </div>

      <div style={{ padding: '14px 16px 12px' }}>
        <WeekGrid week={week} compact showHeader={false} />
      </div>

      {/* hero celebrate */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', padding: '0 24px', textAlign: 'center', gap: 10,
        position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: 30, left: '50%', transform: 'translateX(-50%)',
          width: 180, height: 180, borderRadius: '50%',
          background: `radial-gradient(circle, rgba(34,197,94,0.18), transparent 65%)`,
          pointerEvents: 'none',
        }} />
        <div style={{ width: 72, height: 72, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', zIndex: 1 }}>
          <PulseMascot variant="glow" mood="celebrating" size="lg" />
        </div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 19, color: t.fg, letterSpacing: '-0.01em', lineHeight: 1.2, position: 'relative', zIndex: 1 }}>
          Lekker bezig
        </div>
        <div style={{ fontSize: 12.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.55, maxWidth: 280, position: 'relative', zIndex: 1 }}>
          De <b style={{ color: t.fg }}>3 taken van vandaag</b> zijn af — dichtstbijzijnde toets is over <b style={{ color: t.fg }}>8 dagen</b>. Morgen zie je weer wat er op staat.
        </div>

        {/* quiet offer, niet dominant */}
        <div style={{
          marginTop: 16, padding: '10px 14px',
          background: t.card, border: `1px solid ${t.border}`, borderRadius: 10,
          display: 'flex', alignItems: 'center', gap: 10, maxWidth: 280, width: '100%',
          position: 'relative', zIndex: 1,
        }}>
          <div style={{
            width: 26, height: 26, borderRadius: 7, background: 'rgba(255,208,0,0.14)',
            color: t.gold, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><I name="layers" size={13} /></div>
          <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
            <div style={{ fontSize: 11.5, fontWeight: 800, color: t.fg }}>Zin in een flashcard-ronde?</div>
            <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600, marginTop: 1 }}>5 min · geen druk</div>
          </div>
          <button style={{
            height: 26, padding: '0 9px', borderRadius: 6,
            background: t.cardHi, color: t.fgDim, border: `1px solid ${t.border}`,
            fontSize: 10.5, fontWeight: 800,
          }}>Start</button>
        </div>
      </div>
    </div>
  );
}

/* ── G3 — Vakantie ─────────────── */
function G3Holiday() {
  const t = TK;
  const week = ['ma','di','wo','do','vr','za','zo'].map((d,i) => ({
    day: d, date: 22+i, items: [], today: i === 2,
  }));

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: `radial-gradient(circle at 50% 20%, rgba(245,158,11,0.08), transparent 55%), ${t.bg}`,
    }}>
      <div style={{ padding: '16px 20px', borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 16, color: t.fg, letterSpacing: '-0.01em' }}>Plannen</span>
        <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>· wo 24 okt</span>
        <span style={{ flex: 1 }} />
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          height: 24, padding: '0 10px', borderRadius: 9999,
          background: 'rgba(245,158,11,0.14)', color: t.warn,
          border: `1px solid rgba(245,158,11,0.32)`,
          fontSize: 10.5, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
        }}>
          <I name="palm-tree" size={10} /> Vakantie
        </span>
      </div>

      <div style={{ padding: '14px 16px 12px' }}>
        <WeekGrid week={week} compact showHeader={false}
          headerTitle="Week 43" headerRange="22–28 okt" />
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', padding: '0 28px', textAlign: 'center', gap: 12 }}>
        <div style={{ width: 68, height: 68, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <PulseMascot variant="glow" mood="sleeping" size="lg" />
        </div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.fg, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
          Herfstvakantie
        </div>
        <div style={{ fontSize: 12.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.55, maxWidth: 260 }}>
          Geen school deze week. Pulse neemt even pauze — eerste toets is op <b style={{ color: t.fg }}>ma 29 okt</b>.
        </div>
        <button style={{
          height: 36, padding: '0 14px', borderRadius: 9, marginTop: 6,
          background: t.card, color: t.fgDim, border: `1px solid ${t.border}`,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <I name="layers" size={11} /> Oefenen voor de lol
        </button>
        <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600, marginTop: -2 }}>
          Geen streak-druk · telt niet voor missions
        </span>
      </div>
    </div>
  );
}

window.FlowG = FlowG;