/* ═════════ Flow E — Instellingen ═════════
   Aparte settings-pagina (niet drawer) binnen StapelShell.
   Motivatie: week-strip voor studie-tijd + meerdere categorieën
   hebben fysieke breedte nodig. Drawer wordt versnipperd.

   2 states:
   E1  Volledige settings-view (Free user, alles zichtbaar)
   E2  Tijdvenster maandag aanpassen (in-place edit)
*/

function FlowE() {
  const t = TK;
  return (
    <div id="flow-e" style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
      <EStageLabel num="E1" title="Volledige settings" note="Free user · alle categorieën zichtbaar" />
      <div style={{
        background: t.bg, borderRadius: 14, border: `1px solid ${t.border}`,
        overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
      }}>
        <E1FullSettings />
      </div>

      <EStageLabel num="E2" title="Tijdvenster maandag instellen" note="Inline edit · van 'niet beschikbaar' naar '15:30–17:30'" />
      <div style={{
        background: t.bg, borderRadius: 14, border: `1px solid ${t.border}`,
        overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
      }}>
        <E2TimeEdit />
      </div>
    </div>
  );
}

function EStageLabel({ num, title, note }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: -18 }}>
      <div style={{
        background: 'rgba(0,180,216,0.18)', color: t.primary,
        padding: '5px 10px', borderRadius: 8,
        fontFamily: 'Fredoka One', fontSize: 13, letterSpacing: '-0.01em',
      }}>{num}</div>
      <div style={{ fontSize: 14, fontWeight: 800, color: t.fg }}>{title}</div>
      <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600 }}>· {note}</div>
    </div>
  );
}

/* ── E1 — Volledige settings ─────────────────────── */
function E1FullSettings() {
  return (
    <StapelShell title="Instellingen" subtitle="Pas Plannen aan op jouw week" height={800}>
      <main style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        <ETabs active="plannen" />
        <div style={{
          flex: 1, overflow: 'hidden', padding: '18px 28px 24px',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0, overflow: 'hidden' }}>
            <StudyTimeSection />
            <SubjectsSection />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0, overflow: 'hidden' }}>
            <FocusSection />
            <NotificationsSection />
            <DisplaySection />
            <PremiumSection />
          </div>
        </div>
      </main>
    </StapelShell>
  );
}

function ETabs({ active }) {
  const t = TK;
  const tabs = [
    { k: 'profiel', label: 'Profiel', icon: 'user' },
    { k: 'plannen', label: 'Plannen', icon: 'calendar' },
    { k: 'account', label: 'Account', icon: 'shield' },
    { k: 'privacy', label: 'Privacy', icon: 'lock' },
  ];
  return (
    <div style={{
      padding: '14px 28px 0', borderBottom: `1px solid ${t.border}`,
      display: 'flex', gap: 4, flexShrink: 0,
    }}>
      {tabs.map(tab => {
        const on = tab.k === active;
        return (
          <div key={tab.k} style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            padding: '10px 14px 13px', position: 'relative',
            color: on ? t.primary : t.fgDim,
            fontSize: 12.5, fontWeight: on ? 800 : 700, cursor: 'pointer',
          }}>
            <I name={tab.icon} size={13} />
            {tab.label}
            {on && <div style={{
              position: 'absolute', left: 6, right: 6, bottom: -1, height: 2,
              background: t.primary, borderRadius: 2,
            }} />}
          </div>
        );
      })}
    </div>
  );
}

/* ── sections ──────────────────── */

function SettingsCard({ title, icon, children, right }) {
  const t = TK;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
      padding: 14, display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          width: 26, height: 26, borderRadius: 7,
          background: 'rgba(0,180,216,0.12)', color: t.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I name={icon} size={13} />
        </div>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, letterSpacing: '-0.01em', color: t.fg }}>{title}</span>
        <span style={{ flex: 1 }} />
        {right}
      </div>
      {children}
    </div>
  );
}

function Row({ label, sub, right, noBorder }) {
  const t = TK;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      paddingBottom: noBorder ? 0 : 10,
      borderBottom: noBorder ? 0 : `1px solid ${t.border}`,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg }}>{label}</div>
        {sub && <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 600, marginTop: 2 }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
}

function Toggle({ on = false }) {
  const t = TK;
  return (
    <div style={{
      width: 34, height: 20, borderRadius: 9999,
      background: on ? t.primary : t.cardHi,
      border: `1px solid ${on ? t.primary : t.border}`,
      position: 'relative', flexShrink: 0, cursor: 'pointer',
    }}>
      <div style={{
        position: 'absolute', top: 1, left: on ? 15 : 1,
        width: 16, height: 16, borderRadius: 9999,
        background: on ? '#07090F' : t.fgDim,
        transition: 'left 180ms',
      }} />
    </div>
  );
}

function Seg({ options, active }) {
  const t = TK;
  return (
    <div style={{
      display: 'inline-flex', background: t.cardHi, padding: 2,
      borderRadius: 8, border: `1px solid ${t.border}`, gap: 2,
    }}>
      {options.map(o => {
        const on = o === active;
        return (
          <div key={o} style={{
            padding: '4px 10px', borderRadius: 6,
            background: on ? t.primary : 'transparent',
            color: on ? '#07090F' : t.fgDim,
            fontSize: 11, fontWeight: 800, cursor: 'pointer',
          }}>{o}</div>
        );
      })}
    </div>
  );
}

/* Studie-tijd: week-strip met tijdvensters */
function StudyTimeSection() {
  const t = TK;
  const days = [
    { d: 'ma', range: '15:30–18:00', active: true },
    { d: 'di', range: '15:30–18:00', active: true },
    { d: 'wo', range: '—', active: false, note: 'vrij' },
    { d: 'do', range: '15:30–18:00', active: true },
    { d: 'vr', range: '—', active: false, note: 'vrij' },
    { d: 'za', range: '10:00–12:00', active: true, weekend: true },
    { d: 'zo', range: '10:00–12:00', active: true, weekend: true },
  ];
  return (
    <SettingsCard title="Studie-tijd" icon="clock">
      <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.5, marginTop: -4 }}>
        Wanneer kun je studeren? Pulse verdeelt taken binnen deze vensters.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
        {days.map((d, i) => (
          <div key={i} style={{
            background: d.active ? 'rgba(0,180,216,0.08)' : t.cardAlt,
            border: `1px solid ${d.active ? 'rgba(0,180,216,0.28)' : t.border}`,
            borderRadius: 9, padding: '8px 6px',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          }}>
            <span style={{
              fontSize: 9, fontWeight: 800, color: d.active ? t.primary : t.fgMute,
              letterSpacing: 0.6, textTransform: 'uppercase',
            }}>{d.d}</span>
            <div style={{
              fontSize: 10.5, fontWeight: 800,
              color: d.active ? t.fg : t.fgMute,
              textAlign: 'center', lineHeight: 1.2,
            }}>
              {d.range === '—'
                ? '—'
                : (() => {
                    const [a, b] = d.range.split('–');
                    return <>{a}<br />{b}</>;
                  })()}
              {!d.active && <div style={{ fontSize: 9, fontWeight: 700, color: t.fgMute, marginTop: 2 }}>{d.note}</div>}
            </div>
          </div>
        ))}
      </div>

      <Row
        label="Standaard studie-sessie"
        sub="Hoelang een blok doorgaat voordat Pulse een pauze voorstelt."
        right={<Seg options={['25', '45', '60']} active="45" />}
        noBorder
      />
    </SettingsCard>
  );
}

function SubjectsSection() {
  const t = TK;
  const subs = [
    { k: 'biologie', active: true, level: 'HAVO 4' },
    { k: 'wiskunde', active: true, level: 'HAVO 4 B' },
    { k: 'scheikunde', active: true, level: 'HAVO 4' },
    { k: 'nederlands', active: true, level: 'HAVO 4' },
    { k: 'engels', active: true, level: 'HAVO 4' },
    { k: 'geschiedenis', active: false, level: 'HAVO 4', paused: true },
  ];
  return (
    <SettingsCard
      title="Vakken"
      icon="book-open"
      right={
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          height: 24, padding: '0 9px', borderRadius: 7,
          background: 'rgba(0,180,216,0.14)', color: t.primary,
          border: `1px solid rgba(0,180,216,0.28)`,
          fontSize: 10.5, fontWeight: 800,
        }}>
          <I name="plus" size={10} strokeWidth={3} /> Vak
        </button>
      }
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {subs.map((s, i) => {
          const spec = SUBJECTS[s.k];
          return (
            <div key={s.k} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 10px', borderRadius: 9,
              background: s.paused ? 'transparent' : t.cardAlt,
              border: `1px solid ${s.paused ? t.border : 'transparent'}`,
              opacity: s.paused ? 0.6 : 1,
            }}>
              <SubjPill k={s.k} size="sm" />
              <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>· {s.level}</span>
              {s.paused && (
                <span style={{
                  fontSize: 9, fontWeight: 800, color: t.warn,
                  background: 'rgba(245,158,11,0.14)', border: '1px solid rgba(245,158,11,0.28)',
                  padding: '2px 6px', borderRadius: 4, letterSpacing: 0.3, textTransform: 'uppercase',
                }}>Pauze</span>
              )}
              <span style={{ flex: 1 }} />
              <button style={{
                height: 22, padding: '0 6px', borderRadius: 5,
                background: 'transparent', color: t.fgMute, border: 0,
                fontSize: 10.5, fontWeight: 700,
              }}>Wijzig</button>
              <Toggle on={!s.paused} />
            </div>
          );
        })}
      </div>
    </SettingsCard>
  );
}

function FocusSection() {
  return (
    <SettingsCard title="Focus-mode" icon="target">
      <Row
        label="Default timer-duur"
        sub="Starttijd wanneer je focus-mode aanzet."
        right={<Seg options={['Geen', '25m', '50m']} active="25m" />}
      />
      <Row
        label="Auto-start bij focus-mode"
        sub="Timer begint direct zodra je op 'Focus' klikt."
        right={<Toggle on={true} />}
        noBorder
      />
    </SettingsCard>
  );
}

function NotificationsSection() {
  return (
    <SettingsCard title="Notificaties" icon="bell">
      <Row
        label="Ochtend-reminder"
        sub="Korte blik op wat er vandaag staat."
        right={
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 11.5, fontWeight: 800, color: '#F1F5F9' }}>07:45</span>
            <Toggle on={true} />
          </div>
        }
      />
      <Row
        label="Dag-voor-deadline"
        sub="Herinnering de avond voor een toets."
        right={<Toggle on={true} />}
      />
      <Row
        label="Avond-wrap-up"
        sub="Hoe ging je dag — 21:00."
        right={<Toggle on={false} />}
        noBorder
      />
    </SettingsCard>
  );
}

function DisplaySection() {
  return (
    <SettingsCard title="Weergave" icon="layout">
      <Row
        label="Minimal-mode"
        sub="Compact versus ademend. Uit = meer witruimte."
        right={<Toggle on={false} />}
      />
      <Row
        label="Thema"
        sub="Volgt systeem als default."
        right={<Seg options={['Systeem', 'Licht', 'Donker']} active="Donker" />}
        noBorder
      />
    </SettingsCard>
  );
}

function PremiumSection() {
  const t = TK;
  return (
    <SettingsCard title="Abonnement" icon="sparkles">
      <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.28)`,
        borderRadius: 10, padding: '12px 14px',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 9,
          background: 'rgba(157,78,221,0.22)', color: t.purpleFg,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <I name="sparkles" size={17} fill="currentColor" strokeWidth={0} color={t.purpleFg} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontSize: 13, fontWeight: 800, color: t.fg }}>Free</span>
            <span style={{ fontSize: 10, fontWeight: 700, color: t.fgMute }}>· handmatig herplannen</span>
          </div>
          <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, marginTop: 2, lineHeight: 1.45 }}>
            Premium (<b style={{ color: t.purpleFg }}>€4,99/mnd</b>) geeft je Pulse's voorstellen + uitleg-waarom.
          </div>
        </div>
        <button style={{
          height: 32, padding: '0 12px', borderRadius: 8,
          background: t.purpleFg, color: '#2E1065', border: 0,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
          flexShrink: 0,
        }}>Upgrade</button>
      </div>
    </SettingsCard>
  );
}

/* ── E2 — Tijdvenster maandag in-place bewerken ─── */
function E2TimeEdit() {
  const t = TK;
  const days = [
    { d: 'ma', active: true, editing: true, range: '15:30–17:30' },
    { d: 'di', range: '15:30–18:00', active: true },
    { d: 'wo', range: '—', active: false, note: 'vrij' },
    { d: 'do', range: '15:30–18:00', active: true },
    { d: 'vr', range: '—', active: false, note: 'vrij' },
    { d: 'za', range: '10:00–12:00', active: true },
    { d: 'zo', range: '10:00–12:00', active: true },
  ];

  return (
    <StapelShell title="Instellingen › Studie-tijd" subtitle="Maandag aanpassen"
      rightExtra={<BreadcrumbBack />} height={640}>
      <main style={{ flex: 1, overflow: 'hidden', padding: '24px 28px',
        display: 'flex', flexDirection: 'column', gap: 16 }}>

        {/* voor/na context */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          background: 'rgba(0,180,216,0.08)', border: `1px solid rgba(0,180,216,0.2)`,
          borderRadius: 11, padding: '10px 14px',
        }}>
          <div style={{
            width: 26, height: 26, borderRadius: 7, background: 'rgba(0,180,216,0.18)',
            color: t.primary, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><I name="info" size={13} /></div>
          <span style={{ fontSize: 12, color: t.fgDim, fontWeight: 700 }}>
            Maandag stond op <b style={{ color: t.fgMute, textDecoration: 'line-through' }}>niet beschikbaar</b> —
            <b style={{ color: t.primary }}> 15:30–17:30</b> is de nieuwe standaard.
          </span>
          <span style={{ flex: 1 }} />
          <span style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute }}>
            <I name="calendar" size={10} style={{ verticalAlign: -1 }} /> 3 momenten verschoven
          </span>
        </div>

        {/* week-strip met ma geopend */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8 }}>
          {days.map((d, i) => (
            <div key={i} style={{
              background: d.editing ? 'rgba(0,180,216,0.1)' :
                          d.active ? 'rgba(0,180,216,0.06)' : t.cardAlt,
              border: `1.5px solid ${d.editing ? t.primary :
                       d.active ? 'rgba(0,180,216,0.22)' : t.border}`,
              borderRadius: 10, padding: d.editing ? '10px 10px 12px' : '10px 8px',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              position: 'relative',
            }}>
              {d.editing && (
                <div style={{
                  position: 'absolute', top: -1, left: -1, right: -1, height: 3,
                  background: `linear-gradient(90deg, ${t.primary}, transparent)`,
                  borderRadius: '10px 10px 0 0',
                }} />
              )}
              <span style={{
                fontSize: 10, fontWeight: 800,
                color: d.editing ? t.primary : d.active ? t.fgDim : t.fgMute,
                letterSpacing: 0.6, textTransform: 'uppercase',
              }}>{d.d}</span>
              <div style={{
                fontSize: 11, fontWeight: 800,
                color: d.active ? t.fg : t.fgMute, textAlign: 'center', lineHeight: 1.3,
              }}>
                {d.range}
                {!d.active && <div style={{ fontSize: 9, fontWeight: 700, color: t.fgMute, marginTop: 2 }}>{d.note}</div>}
              </div>
              {d.editing && (
                <div style={{ display: 'flex', gap: 3, marginTop: 2 }}>
                  <I name="pen-line" size={10} color={t.primary} strokeWidth={2.5} />
                </div>
              )}
            </div>
          ))}
        </div>

        {/* edit-paneel voor maandag */}
        <div style={{
          background: t.card, border: `1.5px solid ${t.primary}`, borderRadius: 14,
          padding: 18, display: 'flex', flexDirection: 'column', gap: 14,
          boxShadow: '0 12px 32px rgba(0,180,216,0.15)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{
              fontFamily: 'Fredoka One', fontSize: 17, color: t.fg, letterSpacing: '-0.01em',
            }}>Maandag</span>
            <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>· studie-venster</span>
            <span style={{ flex: 1 }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 700 }}>Beschikbaar</span>
              <Toggle on={true} />
            </div>
          </div>

          {/* tijdslider */}
          <TimeRange startLabel="15:30" endLabel="17:30" duration="2u 0m" />

          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 10px', background: t.cardAlt, borderRadius: 8,
            border: `1px solid ${t.border}`,
          }}>
            <I name="coffee" size={12} color={t.fgMute} />
            <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 700 }}>
              Pulse voegt automatisch een pauze van 10 min in na 45 min.
            </span>
            <span style={{ flex: 1 }} />
            <Toggle on={true} />
          </div>

          {/* preset-knoppen */}
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, alignSelf: 'center', marginRight: 4, letterSpacing: 0.4, textTransform: 'uppercase' }}>Snel:</span>
            {['Zoals dinsdag', 'Na school (15:30–18:00)', 'Avond (19:30–21:00)'].map((p, i) => (
              <button key={i} style={{
                height: 26, padding: '0 10px', borderRadius: 6,
                background: t.cardAlt, color: t.fgDim,
                border: `1px solid ${t.border}`,
                fontSize: 10.5, fontWeight: 700,
              }}>{p}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', gap: 8, marginTop: 'auto' }}>
          <button style={shellBtn(t, 'ghost')}>Annuleer</button>
          <span style={{ flex: 1 }} />
          <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700, alignSelf: 'center', marginRight: 4 }}>
            Wijzigingen worden automatisch bewaard
          </span>
          <button style={shellBtn(t, 'primary')}>
            <I name="check" size={12} strokeWidth={3} /> Klaar
          </button>
        </div>
      </main>
    </StapelShell>
  );
}

function BreadcrumbBack() {
  const t = TK;
  return (
    <button style={{
      height: 32, padding: '0 10px', borderRadius: 8,
      background: t.card, border: `1px solid ${t.border}`, color: t.fgDim,
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
    }}>
      <I name="chevron-left" size={13} /> Terug
    </button>
  );
}

function TimeRange({ startLabel, endLabel, duration }) {
  const t = TK;
  // track 00:00 (0%) → 24:00 (100%)
  // range: 15:30 (64.58%) → 17:30 (72.92%)
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 10 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase' }}>Van</span>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.primary, letterSpacing: '-0.01em' }}>{startLabel}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase' }}>Tot</span>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.primary, letterSpacing: '-0.01em' }}>{endLabel}</span>
        </div>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 12, fontWeight: 800, color: t.fgDim }}>{duration}</span>
      </div>

      {/* track */}
      <div style={{
        position: 'relative', height: 32, background: t.cardAlt,
        borderRadius: 6, border: `1px solid ${t.border}`, overflow: 'hidden',
      }}>
        {/* hour marks */}
        {[0,3,6,9,12,15,18,21,24].map(h => (
          <div key={h} style={{
            position: 'absolute', top: 0, bottom: 0,
            left: `${(h / 24) * 100}%`, width: 1,
            background: 'rgba(148,163,184,0.1)',
          }} />
        ))}
        {[6, 12, 18].map(h => (
          <div key={h} style={{
            position: 'absolute', top: 2, left: `${(h / 24) * 100}%`,
            transform: 'translateX(-50%)',
            fontSize: 8.5, color: t.fgMute, fontWeight: 700,
          }}>{h}:00</div>
        ))}
        {/* selected range — 15:30 to 17:30 */}
        <div style={{
          position: 'absolute', top: 1, bottom: 1,
          left: `${(15.5 / 24) * 100}%`, width: `${(2 / 24) * 100}%`,
          background: `linear-gradient(90deg, rgba(0,180,216,0.4), rgba(0,180,216,0.6))`,
          border: `1.5px solid ${t.primary}`, borderRadius: 5,
          boxShadow: '0 4px 10px rgba(0,180,216,0.25)',
        }} />
        {/* handles */}
        {[15.5, 17.5].map((h, i) => (
          <div key={i} style={{
            position: 'absolute', top: -2, bottom: -2,
            left: `${(h / 24) * 100}%`, transform: 'translateX(-50%)',
            width: 6, borderRadius: 3,
            background: '#fff', boxShadow: '0 2px 6px rgba(0,0,0,0.5)',
          }} />
        ))}
      </div>

      <div style={{
        display: 'flex', justifyContent: 'space-between', marginTop: 4,
        fontSize: 9.5, color: t.fgMute, fontWeight: 700,
      }}>
        <span>00:00</span>
        <span>12:00</span>
        <span>24:00</span>
      </div>
    </div>
  );
}

window.FlowE = FlowE;