/* Flow B — Herplannen Coach
   Free vs Premium NAAST ELKAAR getoond, 3 states.
     B1: Entry — Free (drag-list) naast Premium (voorstel-kaart met rationale)
     B2: Tweaking — gebruiker heeft in Premium 1 taak aangepast, rest herberekend
     B3: Accepted — terug naar Stapel met nieuwe planning, Pulse korte bevestiging

   Vorm: fullscreen takeover binnen de Stapel-view (niet drawer).
   Waarom: herplannen raakt meerdere dagen + meerdere taken. Drawer (480px)
   is te smal voor een week-grid + drag. Takeover houdt Stapel in dezelfde
   route (geen page-jump), scrim maakt "dit is een tijdelijke modus" duidelijk. */

function FlowB() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <FlowBRow label="B1 · Entry" tag="zelfde week · Free en Premium naast elkaar">
        <BStage>
          <BTakeoverHeader state="entry" />
          <div style={bSplitStyle()}>
            <BFreeVariant state="entry" />
            <BPremiumVariant state="entry" />
          </div>
        </BStage>
      </FlowBRow>

      <FlowBRow label="B2 · Tweaken" tag="leerling verschoof Wiskunde zelf · rippel effect">
        <BStage>
          <BTakeoverHeader state="tweak" />
          <div style={bSplitStyle()}>
            <BFreeVariant state="tweak" />
            <BPremiumVariant state="tweak" />
          </div>
        </BStage>
      </FlowBRow>

      <FlowBRow label="B3 · Geaccepteerd" tag="terug in Stapel · Pulse bevestigt">
        <BStage tall>
          <BAcceptedStapel />
        </BStage>
      </FlowBRow>
    </div>
  );
}

function FlowBRow({ label, tag, children }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 13, color: t.fg,
          background: t.cardHi, borderRadius: 7, padding: '4px 10px',
          letterSpacing: '-0.01em',
        }}>{label}</div>
        <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>{tag}</div>
      </div>
      {children}
    </div>
  );
}

function BStage({ children, tall }) {
  const t = TK;
  return (
    <div style={{
      position: 'relative', height: tall ? 600 : 780, borderRadius: 14, overflow: 'hidden',
      background: t.bg, border: `1px solid ${t.border}`,
      display: 'flex', flexDirection: 'column',
    }}>
      {children}
    </div>
  );
}

function bSplitStyle() {
  return {
    flex: 1, minHeight: 0,
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
  };
}

/* Header bovenop takeover */
function BTakeoverHeader({ state }) {
  const t = TK;
  const copy = state === 'entry'
    ? 'Drie taken van deze week opnieuw verdelen — Bio-toets staat vrijdag.'
    : 'Je hebt 1 keus aangepast — Pulse heeft de rest meeverplaatst.';
  return (
    <div style={{
      flexShrink: 0, zIndex: 5,
      background: `linear-gradient(180deg, ${t.topbar}, color-mix(in srgb, ${t.topbar} 90%, #000))`,
      borderBottom: `1px solid ${t.border}`,
      padding: '12px 20px', display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: `linear-gradient(135deg, ${t.purple}, #6D28D9)`,
        color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 20px rgba(157,78,221,0.4)', flexShrink: 0,
      }}>
        <I name="calendar-clock" size={17} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.fg, letterSpacing: '-0.01em' }}>
            Herplan deze week
          </div>
          <span style={{
            fontSize: 9, fontWeight: 800, color: t.fgMute, letterSpacing: 0.5, textTransform: 'uppercase',
            background: t.cardHi, padding: '2px 6px', borderRadius: 4,
          }}>3 taken</span>
        </div>
        <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>{copy}</div>
      </div>
      <button style={{ ...shellBtn(t, 'ghost'), height: 30, padding: '0 10px', fontSize: 11 }}>
        <I name="x" size={12} /> Sluiten
      </button>
    </div>
  );
}

/* ────── FREE variant ────── */
function BFreeVariant({ state }) {
  const t = TK;
  const entry = state === 'entry';

  const items = [
    { subject: 'biologie', title: 'H4 · Flashcards × 10', mins: 15, placed: !entry ? 'do' : null },
    { subject: 'biologie', title: 'H4 · § 4.2 lezen', mins: 30, placed: 'do' },
    { subject: 'wiskunde', title: 'Oefeningen § 2.3', mins: 45, placed: !entry ? 'di' : null },
  ];
  const days = [
    { d: 'di', date: 9, free: '2u 15m' },
    { d: 'wo', date: 10, free: '—', today: true },
    { d: 'do', date: 11, free: '2u 00m' },
    { d: 'vr', date: 12, free: '0u 45m', deadline: true },
  ];

  return (
    <section style={{
      padding: '16px 16px 12px', borderRight: `1px solid ${t.border}`,
      background: t.bg, display: 'flex', flexDirection: 'column', gap: 12,
      overflow: 'hidden',
    }}>
      <BHeaderLabel
        icon="hand"
        label="Handmatig"
        tag="Free"
        tagColor={t.fgDim}
        tagBg={t.cardHi}
        description="Sleep taken naar een dag. Jij bepaalt."
      />

      {/* te verdelen */}
      <div>
        <div style={labelStyle(t)}>Nog te plannen</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {items.filter(i => !i.placed).map((it, i) => (
            <DragItem key={i} item={it} />
          ))}
          {items.filter(i => !i.placed).length === 0 && (
            <div style={{
              padding: '10px 12px', borderRadius: 9,
              background: 'rgba(34,197,94,0.08)', border: '1px dashed rgba(34,197,94,0.3)',
              fontSize: 11, color: t.green, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6,
            }}><I name="check-circle-2" size={12} /> Alles geplaatst</div>
          )}
        </div>
      </div>

      {/* dag-slots */}
      <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <div style={labelStyle(t)}>Beschikbare dagen</div>
        {days.map((day, i) => (
          <DaySlot key={i} day={day} items={items.filter(it => it.placed === day.d)} />
        ))}
      </div>

      <BFooter>
        <button style={{ ...shellBtn(t, 'ghost'), height: 32 }}>Reset</button>
        <span style={{ flex: 1 }} />
        <button style={{
          height: 32, padding: '0 14px', borderRadius: 9,
          background: entry ? t.cardHi : t.primary,
          color: entry ? t.fgMute : '#07090F', border: 0,
          fontSize: 12, fontWeight: 800,
          display: 'inline-flex', alignItems: 'center', gap: 5,
          cursor: entry ? 'not-allowed' : 'pointer',
        }}>
          <I name="check" size={12} strokeWidth={3} /> Bevestig planning
        </button>
      </BFooter>
    </section>
  );
}

function DragItem({ item }) {
  const t = TK;
  const s = SUBJECTS[item.subject];
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 9,
      padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 8,
      cursor: 'grab', boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
    }}>
      <I name="grip-vertical" size={12} color={t.fgMute} />
      <div style={{ width: 3, height: 20, background: s.color, borderRadius: 1, flexShrink: 0 }} />
      <span style={{ fontSize: 9.5, fontWeight: 800, color: s.color, letterSpacing: 0.3, textTransform: 'uppercase' }}>
        {s.label.slice(0,3)}
      </span>
      <span style={{ fontSize: 11, fontWeight: 700, color: t.fg, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {item.title}
      </span>
      <span style={{ fontSize: 9.5, fontWeight: 800, color: t.fgMute }}>{item.mins}m</span>
    </div>
  );
}

function DaySlot({ day, items }) {
  const t = TK;
  const totalPlaced = items.reduce((s, it) => s + it.mins, 0);
  return (
    <div style={{
      background: day.today ? 'rgba(0,180,216,0.06)' : t.card,
      border: day.today ? '1.5px solid rgba(0,180,216,0.22)' :
              day.deadline ? '1.5px solid rgba(239,68,68,0.28)' :
              `1px solid ${t.border}`,
      borderRadius: 9, padding: 8, display: 'flex', flexDirection: 'column', gap: 6,
      minHeight: 50,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{
          fontFamily: 'Fredoka One', fontSize: 13, color: day.today ? t.primary : day.deadline ? t.red : t.fg,
        }}>{day.d}</span>
        <span style={{ fontSize: 9.5, fontWeight: 700, color: t.fgMute }}>{day.date} okt</span>
        {day.deadline && (
          <span style={{
            fontSize: 8.5, fontWeight: 800, color: t.red, letterSpacing: 0.4, textTransform: 'uppercase',
            background: 'rgba(239,68,68,0.14)', padding: '1px 5px', borderRadius: 3,
          }}>Bio-toets</span>
        )}
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 9.5, fontWeight: 800, color: t.fgMute }}>vrij {day.free}</span>
      </div>
      {items.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {items.map((it, i) => {
            const s = SUBJECTS[it.subject];
            return (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 6,
                background: `color-mix(in srgb, ${s.color} 14%, transparent)`,
                border: `1px solid color-mix(in srgb, ${s.color} 28%, transparent)`,
                borderRadius: 7, padding: '5px 8px',
              }}>
                <I name="grip-vertical" size={10} color={t.fgMute} />
                <span style={{ fontSize: 10, fontWeight: 800, color: s.color, textTransform: 'uppercase', letterSpacing: 0.3 }}>
                  {s.label.slice(0,3)}
                </span>
                <span style={{ fontSize: 10.5, fontWeight: 700, color: t.fg, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {it.title}
                </span>
                <span style={{ fontSize: 9, fontWeight: 800, color: t.fgMute }}>{it.mins}m</span>
              </div>
            );
          })}
        </div>
      )}
      {items.length === 0 && !day.today && (
        <div style={{
          fontSize: 9.5, color: t.fgMute, fontStyle: 'italic', fontWeight: 600,
          padding: '4px 4px', border: `1px dashed ${t.border}`, borderRadius: 5,
          textAlign: 'center',
        }}>sleep taak hierheen</div>
      )}
      {totalPlaced > 0 && (
        <div style={{ fontSize: 9, fontWeight: 700, color: t.fgMute, textAlign: 'right' }}>
          {totalPlaced}m gepland
        </div>
      )}
    </div>
  );
}

/* ────── PREMIUM variant ────── */
function BPremiumVariant({ state }) {
  const t = TK;
  const entry = state === 'entry';

  const proposals = entry ? [
    {
      task: 'H4 · § 4.2 lezen', subject: 'biologie', mins: 30,
      from: 'di gemist', to: 'do', rationale: 'Donderdag is je enige dag met 2u aan één stuk — past het best voor lezen.',
      locked: false,
    },
    {
      task: 'H4 · Flashcards × 10', subject: 'biologie', mins: 15,
      from: 'di gemist', to: 'vr 08:00', rationale: 'Ochtend-review vlak voor toets — spaced repetition werkt beter op korte termijn.',
      locked: false,
    },
    {
      task: 'Oefeningen § 2.3', subject: 'wiskunde', mins: 45,
      from: 'wo verzet', to: 'di', rationale: 'Dinsdag had je al een oefenblok — volgend blok erop pakt beter aan.',
      locked: false,
    },
  ] : [
    {
      task: 'H4 · § 4.2 lezen', subject: 'biologie', mins: 30,
      from: 'di gemist', to: 'do', rationale: 'Donderdag is je enige dag met 2u aan één stuk — past het best voor lezen.',
      locked: false,
    },
    {
      task: 'H4 · Flashcards × 10', subject: 'biologie', mins: 15,
      from: 'di gemist', to: 'do 20:00', rationale: 'Herberekend: na leesblok zelfde dag — directe consolidatie, kort en concreet.',
      recalculated: true,
    },
    {
      task: 'Oefeningen § 2.3', subject: 'wiskunde', mins: 45,
      from: 'wo verzet', to: 'wo avond', rationale: 'Jij koos wo — vrije avond beschikbaar, maar tegelijk met Bio-avond.',
      edited: true,
    },
  ];

  return (
    <section style={{
      padding: '16px 16px 12px',
      background: `linear-gradient(180deg, rgba(157,78,221,0.04), transparent)`,
      display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden',
      position: 'relative',
    }}>
      <BHeaderLabel
        icon="sparkles"
        label="Met coach"
        tag="Premium"
        tagColor="#FFD000"
        tagBg="rgba(255,208,0,0.14)"
        purple
        description="Pulse stelt een verdeling voor — met uitleg per keuze."
      />

      {/* voorstel-titel */}
      <div style={{
        background: `linear-gradient(135deg, rgba(157,78,221,0.14), rgba(0,180,216,0.08))`,
        border: '1px solid rgba(157,78,221,0.3)',
        borderRadius: 10, padding: '10px 12px',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8, flexShrink: 0,
          background: 'rgba(157,78,221,0.25)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <PulseMascot variant="glow" mood={entry ? 'thinking' : 'encouraging'} size="sm" />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 800, color: '#C4B5FD', letterSpacing: 0.3 }}>
            {entry ? 'Voorstel · 3 taken verplaatst' : 'Aangepast · rest herberekend'}
          </div>
          <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, marginTop: 1 }}>
            Vrijdag-toets blijft haalbaar — marge <b style={{ color: t.green }}>80 min</b>.
          </div>
        </div>
      </div>

      {/* proposal cards */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {proposals.map((p, i) => (
          <ProposalCard key={i} p={p} />
        ))}
      </div>

      <BFooter>
        <button style={{
          height: 32, padding: '0 10px', borderRadius: 9,
          background: t.card, border: `1px solid ${t.border}`,
          color: t.fgDim, fontSize: 11.5, fontWeight: 800,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <I name="x" size={12} /> Annuleer
        </button>
        <span style={{ flex: 1 }} />
        <button style={{
          height: 32, padding: '0 10px', borderRadius: 9,
          background: t.card, border: `1px solid ${t.border}`,
          color: t.fgDim, fontSize: 11.5, fontWeight: 800,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <I name="settings-2" size={12} /> Tweak per taak
        </button>
        <button style={{
          height: 32, padding: '0 14px', borderRadius: 9,
          background: `linear-gradient(135deg, ${t.purple}, #6D28D9)`,
          color: '#fff', border: 0,
          fontSize: 12, fontWeight: 800,
          display: 'inline-flex', alignItems: 'center', gap: 5,
          boxShadow: '0 6px 16px rgba(157,78,221,0.35)',
        }}>
          <I name="check" size={12} strokeWidth={3} /> Accepteer alles
        </button>
      </BFooter>
    </section>
  );
}

function ProposalCard({ p }) {
  const t = TK;
  const s = SUBJECTS[p.subject];
  const accent = p.edited ? '#3B82F6' : p.recalculated ? '#FFD000' : '#C4B5FD';
  return (
    <div style={{
      background: t.card,
      border: p.edited ? '1.5px solid rgba(59,130,246,0.4)' :
              p.recalculated ? '1.5px solid rgba(255,208,0,0.4)' :
              `1px solid ${t.border}`,
      borderRadius: 10, padding: '10px 12px',
      position: 'relative',
    }}>
      {(p.edited || p.recalculated) && (
        <div style={{
          position: 'absolute', top: -7, right: 10,
          background: p.edited ? '#3B82F6' : '#FFD000',
          color: '#07090F',
          fontSize: 8.5, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase',
          padding: '2px 7px', borderRadius: 4,
        }}>
          {p.edited ? 'Jij aangepast' : 'Herberekend'}
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <div style={{ width: 3, height: 16, background: s.color, borderRadius: 1 }} />
        <span style={{ fontSize: 9.5, fontWeight: 800, color: s.color, textTransform: 'uppercase', letterSpacing: 0.4 }}>
          {s.label.slice(0,3)}
        </span>
        <span style={{ fontSize: 11.5, fontWeight: 800, color: t.fg, flex: 1,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.task}</span>
        <span style={{ fontSize: 10, fontWeight: 800, color: t.fgMute }}>{p.mins}m</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <span style={{
          fontSize: 10, fontWeight: 800, color: t.red,
          background: 'rgba(239,68,68,0.12)', border: '1px solid rgba(239,68,68,0.3)',
          borderRadius: 9999, padding: '2px 8px',
        }}>{p.from}</span>
        <I name="arrow-right" size={12} color={t.fgMute} />
        <span style={{
          fontSize: 10, fontWeight: 800, color: t.primary,
          background: t.primaryDim, border: `1px solid color-mix(in srgb, ${t.primary} 30%, transparent)`,
          borderRadius: 9999, padding: '2px 8px',
        }}>{p.to}</span>
      </div>

      <div style={{
        display: 'flex', gap: 6, alignItems: 'flex-start',
        background: 'rgba(157,78,221,0.06)', borderRadius: 7, padding: '6px 8px',
        borderLeft: `2px solid ${accent}`,
      }}>
        <I name="lightbulb" size={11} color={accent} style={{ marginTop: 1, flexShrink: 0 }} />
        <span style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.4 }}>
          <b style={{ color: t.fg, fontWeight: 800 }}>Waarom: </b>
          {p.rationale}
        </span>
      </div>
    </div>
  );
}

function BHeaderLabel({ icon, label, tag, tagColor, tagBg, purple, description }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: 26, height: 26, borderRadius: 7,
        background: purple ? 'rgba(157,78,221,0.2)' : t.cardHi,
        color: purple ? '#C4B5FD' : t.fgDim,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <I name={icon} size={13} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg, letterSpacing: '-0.01em' }}>
            {label}
          </span>
          <span style={{
            fontSize: 8.5, fontWeight: 800, color: tagColor, letterSpacing: 0.5, textTransform: 'uppercase',
            background: tagBg, padding: '2px 6px', borderRadius: 4,
          }}>{tag}</span>
        </div>
        <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, marginTop: 1 }}>{description}</div>
      </div>
    </div>
  );
}

function labelStyle(t) {
  return {
    fontSize: 9.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6,
    textTransform: 'uppercase', marginBottom: 6,
  };
}

function BFooter({ children }) {
  const t = TK;
  return (
    <div style={{
      borderTop: `1px solid ${t.border}`, paddingTop: 10,
      display: 'flex', alignItems: 'center', gap: 6,
    }}>
      {children}
    </div>
  );
}

/* ────── B3 Accepted — volledige Stapel met Pulse-bevestiging ────── */
function BAcceptedStapel() {
  const t = TK;
  const newToday = [
    { subject: 'biologie', type: 'lezen', title: 'Celbiologie § 4.2 lezen', mins: 30, source: 'Bio — herplanned', fresh: true },
    { subject: 'wiskunde', type: 'oefenen', title: 'Oefeningen § 2.3', mins: 45, source: 'Wi — jij aangepast', fresh: true },
    { subject: 'biologie', type: 'flashcards', title: '10 flashcards', mins: 15, source: 'Bio — avond' },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column' }}>
      {/* topbar */}
      <div style={{
        height: 50, background: t.topbar, borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', padding: '0 18px', gap: 10, flexShrink: 0,
      }}>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.fg }}>Plannen</div>
        <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600 }}>· Woensdag 10 okt · herplanned</span>
        <span style={{ flex: 1 }} />
        <StreakPill count={5} />
      </div>

      {/* pulse bevestig-bar */}
      <div style={{
        margin: '12px 18px 0',
        background: `linear-gradient(180deg, rgba(34,197,94,0.14), rgba(34,197,94,0.04))`,
        border: '1.5px solid rgba(34,197,94,0.32)',
        borderRadius: 12, padding: '10px 12px',
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 9,
          background: 'rgba(34,197,94,0.2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <PulseMascot variant="glow" mood="encouraging" size="sm" />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 1 }}>
            <span style={{ fontSize: 9.5, fontWeight: 800, color: t.green, letterSpacing: 0.5, textTransform: 'uppercase' }}>
              Herplanned
            </span>
            <span style={{
              fontSize: 8.5, fontWeight: 800, color: '#C4B5FD', letterSpacing: 0.4, textTransform: 'uppercase',
              background: 'rgba(157,78,221,0.18)', padding: '1px 5px', borderRadius: 3,
            }}>Premium</span>
          </div>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.fg, lineHeight: 1.35 }}>
            3 taken verzet — <b>Wiskunde</b> hield jouw keuze, rest is meeverplaatst. Bio-toets blijft op koers.
          </div>
        </div>
        <button style={{
          height: 28, padding: '0 10px', borderRadius: 7,
          background: t.card, border: `1px solid ${t.border}`,
          color: t.fgDim, fontSize: 10.5, fontWeight: 800,
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
          <I name="undo-2" size={11} /> Ongedaan
        </button>
      </div>

      {/* tasks */}
      <div style={{ padding: '14px 18px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.primary }}>Vandaag</div>
        {newToday.map((tk, i) => (
          <FreshTask key={i} task={tk} />
        ))}
      </div>
    </div>
  );
}

function FreshTask({ task }) {
  const t = TK;
  const s = SUBJECTS[task.subject];
  return (
    <div style={{
      background: task.fresh ? `color-mix(in srgb, ${s.color} 8%, ${t.card})` : t.card,
      border: task.fresh ? `1.5px solid color-mix(in srgb, ${s.color} 40%, transparent)` : `1px solid ${t.border}`,
      borderRadius: 10, padding: '9px 12px',
      display: 'flex', alignItems: 'center', gap: 10,
      position: 'relative',
    }}>
      {task.fresh && (
        <div style={{
          position: 'absolute', top: -6, left: 10,
          background: s.color, color: '#07090F',
          fontSize: 8, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase',
          padding: '1px 6px', borderRadius: 3,
        }}>Verplaatst</div>
      )}
      <div style={{ width: 3, height: 22, background: s.color, borderRadius: 1 }} />
      <span style={{ fontSize: 10, fontWeight: 800, color: s.color, textTransform: 'uppercase', letterSpacing: 0.3 }}>
        {s.label.slice(0,3)}
      </span>
      <span style={{ fontSize: 12, fontWeight: 800, color: t.fg, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {task.title}
      </span>
      <span style={{ fontSize: 9.5, fontWeight: 700, color: t.fgMute }}>{task.source}</span>
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 3,
        fontSize: 10, fontWeight: 800, color: t.fgDim,
        background: t.cardHi, padding: '2px 8px', borderRadius: 9999,
      }}>
        <I name="clock" size={10} /> {task.mins}m
      </span>
    </div>
  );
}

window.FlowB = FlowB;