// Bento — 2x2 grid where each hero visual is a LOOPED illustration of the agent at work. function Bento() { return (
Readiness & risk radar

Every show has a live readiness score. The agent flags risks before they become emergencies — missing hotel, unsigned contract, unpaid deposit, bad flight timing, missing passport.

); } /* ───────── Inbox triage — emails arrive, top one slides out as drafted reply ───────── */ function InboxTriageVisual() { const reduced = window.PREFERS_REDUCED; const POOL = [ { from: 'Marcus · Bowery', subj: 'Brooklyn Steel — hotel block?', tag: 'HOTEL', priority: 'CHASE' }, { from: 'Sara · Goldenvoice', subj: 'Verandas Pickathon — rider?', tag: 'RIDER', priority: 'NOW' }, { from: 'Eli · Spaceland', subj: 'Junot Fonda — deposit cleared', tag: 'DEPOSIT', priority: 'OK' }, { from: 'Lena · Berghain', subj: 'Sable Nov 02 — timetable?', tag: 'TIME', priority: 'CHASE' }, { from: 'Tomi · Primavera', subj: 'Lior — visa documents pending', tag: 'VISA', priority: 'HIGH' }, { from: 'Rae · MSG', subj: 'Maya — settlement spreadsheet', tag: 'SETTLE', priority: 'OK' }, ]; const [stack, setStack] = React.useState(POOL.slice(0, 3)); const idxRef = React.useRef(3); const [phase, setPhase] = React.useState('settle'); React.useEffect(() => { if (reduced) return; let t1, t2; const id = setInterval(() => { setPhase('reply'); t1 = setTimeout(() => { setStack((s) => { const next = POOL[idxRef.current % POOL.length]; idxRef.current += 1; return [...s.slice(1), next]; }); setPhase('arrive'); t2 = setTimeout(() => setPhase('settle'), 600); }, 700); }, 3400); return () => { clearInterval(id); clearTimeout(t1); clearTimeout(t2); }; }, [reduced]); return (
{stack.map((m, i) => { const replying = phase === 'reply' && i === 0; const arriving = phase === 'arrive' && i === stack.length - 1; const offset = i * 14; return (
{m.tag}
{m.from}
{m.subj}
{m.priority}
); })} {!reduced && phase === 'reply' && (
Drafted follow-up · sent
)}
); } /* ───────── Readiness radar — bars fill live, AT-RISK ring pulses ───────── */ function ReadinessRadar() { const reduced = window.PREFERS_REDUCED; const [tick, setTick] = React.useState(0); React.useEffect(() => { if (reduced) return; const id = setInterval(() => setTick((t) => t + 1), 2400); return () => clearInterval(id); }, [reduced]); const rows = [ { name: 'Maya · Brooklyn Steel', sub: 'Oct 18 · hotel pending', base: 78, jitter: 4, status: 'ok' }, { name: 'Junot · Fonda LA', sub: 'Oct 22 · ready for show', base: 92, jitter: 2, status: 'ok' }, { name: 'Verandas · Pickathon', sub: 'Oct 25 · deposit unpaid', base: 28, jitter: 0, status: 'risk' }, { name: 'Sable · Berghain', sub: 'Nov 02 · rider missing', base: 64, jitter: 5, status: 'ok' }, ]; return (
{rows.map((r, i) => { const pct = r.status === 'risk' ? r.base : Math.min(98, r.base + ((tick + i) % 2 === 0 ? r.jitter : -r.jitter)); return (
{!reduced && r.status === 'risk' && ( )}
{r.name}
{r.sub}
{r.status === 'risk' ? 'AT RISK' : `${pct}%`}
); })}
); } /* ───────── Living packet — sync sweep travels down rows ───────── */ function LivingPacket() { const reduced = window.PREFERS_REDUCED; const items = [ { stage: 'Deal', label: 'Contract · countersigned', value: '✓', dot: '#4ade80' }, { stage: 'Logistics', label: 'Hotel block · chasing', value: '✓', dot: '#fbbf24' }, { stage: 'Travel', label: 'Flights · 3 options ranked', value: '✓', dot: 'var(--accent)' }, { stage: 'Production', label: 'Rider · unsigned', value: '!', dot: '#ef4444' }, { stage: 'Finance', label: 'Deposit · cleared', value: '✓', dot: '#4ade80' }, ]; const [active, setActive] = React.useState(-1); React.useEffect(() => { if (reduced) return; let i = 0; const id = setInterval(() => { setActive(i % (items.length + 2)); i += 1; }, 900); return () => clearInterval(id); }, [reduced]); return (
{items.map((d, i) => { const isActive = active === i; return (
{!reduced && isActive && (
)}
{d.stage}
{d.label}
{d.value}
); })}
); } /* ───────── Roster calendar — "now" column sweeps, conflict callout pulses ───────── */ function RosterCalendar() { const reduced = window.PREFERS_REDUCED; const artists = [ { name: 'Maya O.', initials: 'MO', color: 'var(--accent-deep)' }, { name: 'Lior H.', initials: 'LH', color: '#7c3aed' }, { name: 'Junot A.', initials: 'JA', color: '#ec4899' }, { name: 'Sable Q.', initials: 'SQ', color: '#f59e0b' }, ]; const events = [ [null, 'studio', null, 'press', null, 'show', null], ['mix', null, null, null, 'travel', null, null], [null, null, 'studio', 'studio', null, null, 'show'], [null, 'press', null, null, null, null, null], ]; const eventColors = { studio: 'var(--accent)', press: '#fbbf24', show: '#ef4444', travel: 'rgba(255,255,255,0.4)', mix: '#7c3aed', }; const [now, setNow] = React.useState(0); React.useEffect(() => { if (reduced) return; const id = setInterval(() => setNow((n) => (n + 1) % 7), 700); return () => clearInterval(id); }, [reduced]); return (
{['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) => (
{d}
))}
{artists.map((a, ai) => (
{a.name.split(' ')[0]}
{events[ai].map((e, j) => { const highlight = j === now; return (
{e && e.slice(0, 3)}
); })}
))}
⚠ Hotel conflict resolved
); } Object.assign(window, { Bento });