// video-scenes.jsx — Noctua use-case video: the ten scenes + root composition.
// Loaded after animations.jsx and video-core.jsx.

const {
  Stage, Sprite, useSprite, Easing, clamp, interpolate, animate,
  C, FONT, lerp, win, Eyebrow, CountUp, NoctuaGlyph, Panel, Chrome, AgentSweep,
  Badge, MetricStat, Spreadsheet, DocArtifact, PhoneArtifact, Sticky,
  CalendarArtifact, ReviewArtifact, AgentReply,
} = window;

const W = 1920, H = 1080;

// ── SceneFrame: bg + crossfade in/out + slow ken-burns zoom ───────────────────
function SceneFrame({ bg, zoom = 0.03, fade = 0.4, children }) {
  const { localTime, duration } = useSprite();
  const fin = clamp(localTime / fade, 0, 1);
  const fout = clamp((duration - localTime) / fade, 0, 1);
  const op = Math.min(fin, fout);
  const sc = 1 + zoom * (localTime / Math.max(duration, 0.001));
  return (
    <div style={{ position: 'absolute', inset: 0, background: bg, opacity: op }}>
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', transform: `scale(${sc})`, transformOrigin: '50% 50%' }}>
        {children}
      </div>
    </div>
  );
}

// faint hairline grid texture for paper scenes
function HairGrid({ color = 'rgba(22,20,15,0.045)', gap = 64 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
      backgroundSize: `${gap}px ${gap}px`,
    }}></div>
  );
}

// ── Use-case header (eyebrow + Verdana title) ─────────────────────────────────
function UCHeader({ eyebrow, title }) {
  const { localTime } = useSprite();
  const p = win(localTime, 0.0, 0.6);
  return (
    <div style={{ position: 'absolute', left: 150, top: 110, opacity: p, transform: `translateY(${(1 - p) * 18}px)` }}>
      <Eyebrow>{eyebrow}</Eyebrow>
      <div style={{ font: '700 58px/1.02 ' + FONT.display, letterSpacing: '-0.03em', color: C.ink, marginTop: 14, maxWidth: 1500, whiteSpace: 'pre-line' }}>{title}</div>
    </div>
  );
}

// corner tab label e.g. BEFORE / AFTER
function PanelTag({ x, y, text, tone }) {
  const bg = tone === 'after' ? C.green600 : C.ink700;
  return (
    <div style={{ position: 'absolute', left: x, top: y, zIndex: 5,
      font: '700 13px/1 ' + FONT.mono, letterSpacing: '0.14em', color: '#fff',
      background: bg, padding: '7px 12px', borderRadius: 6, textTransform: 'uppercase' }}>{text}</div>
  );
}

// ── Generic use-case layout (before → agent sweep → after → metric) ───────────
function UseCase({ eyebrow, title, agentName, beforeLabel, afterLabel, renderBefore, renderAfter, metric }) {
  const { localTime: lt } = useSprite();
  const bx = 165, ax = 1155, py = 360, pw = 600, ph = 446;
  const pB = win(lt, 0.5, 1.35);
  const pA = win(lt, 2.5, 3.4, Easing.easeOutBack);
  const pChip = win(lt, 1.6, 2.2, Easing.easeOutBack);
  const pMetric = win(lt, 3.5, 4.0);

  return (
    <SceneFrame bg={C.paper} zoom={0.022}>
      <HairGrid />
      <UCHeader eyebrow={eyebrow} title={title} />

      {/* BEFORE panel (messy, tilted, muted) */}
      <PanelTag x={bx + 6} y={py - 30} text="Before" tone="before" />
      <Panel x={bx} y={py} w={pw} h={ph} rotate={-2.0} tx={(1 - pB) * -48} opacity={pB} style={{ filter: 'saturate(0.9)' }}>
        <Chrome label={beforeLabel} />
        <div style={{ height: ph - 40, position: 'relative' }}>{renderBefore(lt)}</div>
      </Panel>

      {/* AFTER panel (crisp, upright, green-accented) */}
      <PanelTag x={ax + 6} y={py - 30} text="After" tone="after" />
      <Panel x={ax} y={py} w={pw} h={ph} rotate={0} tx={(1 - pA) * 48} opacity={pA} accent>
        <Chrome label={afterLabel} />
        <div style={{ height: ph - 40, position: 'relative' }}>{renderAfter(lt)}</div>
      </Panel>

      {/* center: agent chip + arrow */}
      <div style={{ position: 'absolute', left: W / 2, top: py + ph / 2 - 26, transform: `translateX(-50%) scale(${pChip})`, opacity: clamp(pChip, 0, 1),
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, zIndex: 6 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: C.ink, color: C.paper,
          padding: '12px 18px', borderRadius: 99, boxShadow: '0 10px 28px rgba(22,20,15,0.30)' }}>
          <NoctuaGlyph size={26} color={C.green400} />
          <span style={{ font: '600 16px/1 ' + FONT.mono, letterSpacing: '0.06em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>{agentName}</span>
        </div>
        <svg width="78" height="22" viewBox="0 0 78 22" fill="none">
          <path d="M2 11 H66 M58 4 L70 11 L58 18" stroke={C.green600} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>

      {/* agent scan sweep across both panels */}
      <AgentSweep y={py - 6} h={ph + 12} x0={bx} x1={ax + pw} s={1.35} e={2.6} />

      {/* metric strip bottom-left */}
      <div style={{ position: 'absolute', left: 165, top: 868, opacity: pMetric, transform: `translateY(${(1 - pMetric) * 16}px)`, display: 'flex', alignItems: 'flex-end', gap: 60 }}>
        <MetricStat value={metric.value} start={3.5} end={4.9} prefix={metric.prefix || ''} suffix={metric.suffix || ''} decimals={metric.decimals || 0} label={metric.label} accent={metric.accent || C.green600} />
        {metric.value2 != null && (
          <MetricStat value={metric.value2} start={3.7} end={5.1} prefix={metric.prefix2 || ''} suffix={metric.suffix2 || ''} decimals={metric.decimals2 || 0} label={metric.label2} accent={C.ink} />
        )}
      </div>
    </SceneFrame>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// SCENE 1 — COLD OPEN (after-hours chaos, ink night)
// ════════════════════════════════════════════════════════════════════════════
function ColdOpen() {
  const { localTime: lt } = useSprite();
  const float = (i) => Math.sin((lt + i) * 0.9) * 6; // gentle drift
  const a1 = win(lt, 0.5, 1.4), a2 = win(lt, 0.8, 1.7), a3 = win(lt, 1.1, 2.0), a4 = win(lt, 1.4, 2.3);
  const tIn = win(lt, 1.6, 2.6);
  const pulse = 0.5 + 0.5 * Math.sin(lt * 3.2);

  return (
    <SceneFrame bg={C.ink} zoom={0.05}>
      {/* radial glow */}
      <div style={{ position: 'absolute', left: '50%', top: '52%', width: 1200, height: 1200, transform: 'translate(-50%,-50%)',
        background: `radial-gradient(circle, ${C.green900}66 0%, transparent 62%)` }}></div>

      {/* corner artifacts */}
      <div style={{ position: 'absolute', left: 120, top: 132, opacity: a1, transform: `translateY(${(1 - a1) * 30 + float(0)}px) rotate(-6deg)` }}>
        <Panel x={0} y={0} w={320} h={300}><Chrome label="Phone" /><div style={{ height: 260 }}><PhoneArtifact /></div></Panel>
      </div>
      <div style={{ position: 'absolute', left: 1480, top: 150, opacity: a2, transform: `translateY(${(1 - a2) * 30 + float(1)}px) rotate(5deg)` }}>
        <Panel x={0} y={0} w={320} h={300}><Chrome label="Invoice.pdf" /><div style={{ height: 260 }}><DocArtifact kind="PDF" title="INVOICE" unsent /></div></Panel>
      </div>
      <div style={{ position: 'absolute', left: 150, top: 638, opacity: a3, transform: `translateY(${(1 - a3) * 30 + float(2)}px) rotate(-3deg)` }}>
        <Panel x={0} y={0} w={380} h={300}><Chrome label="leads.xlsx" /><div style={{ height: 260 }}><Spreadsheet messy /></div></Panel>
      </div>
      <Sticky x={1520} y={620} rotate={4} w={250}>Call back the<br />Hendersons!!</Sticky>
      <div style={{ opacity: a4 }}><Sticky x={1300} y={770} rotate={-5} color="#F4C9A0" w={210}>send invoices!!</Sticky></div>

      {/* center message */}
      <div style={{ position: 'absolute', left: '50%', top: 430, width: 940, transform: `translateX(-50%) translateY(${(1 - tIn) * 18}px)`, opacity: tIn, textAlign: 'center' }}>
        <div style={{ font: '600 22px/1.4 ' + FONT.mono, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.green300 }}>
          9:47 PM · still at the desk
        </div>
        <div style={{ font: '700 84px/1.0 ' + FONT.display, letterSpacing: '-0.03em', color: C.paper, marginTop: 20 }}>
          The night shift<br />is you.
        </div>
        <div style={{ font: '400 26px/1.5 ' + FONT.body, color: C.ink200, marginTop: 22 }}>
          Leads cool off. Invoices wait. The tools don't talk.
        </div>
      </div>

      {/* cold-lead ticker */}
      <div style={{ position: 'absolute', left: '50%', top: 770, transform: 'translateX(-50%)', opacity: win(lt, 4.6, 5.2),
        display: 'flex', alignItems: 'center', gap: 10, background: 'rgba(180,58,40,0.16)', border: `1px solid ${C.danger}88`,
        borderRadius: 99, padding: '11px 18px' }}>
        <span style={{ width: 11, height: 11, borderRadius: 99, background: C.danger, opacity: 0.5 + 0.5 * pulse }}></span>
        <span style={{ font: '600 17px/1 ' + FONT.mono, letterSpacing: '0.06em', color: '#F2B3A8', textTransform: 'uppercase' }}>3 leads going cold</span>
      </div>
    </SceneFrame>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// SCENE 2 — THE TURN (enter Noctua, ink)
// ════════════════════════════════════════════════════════════════════════════
function TheTurn() {
  const { localTime: lt } = useSprite();
  const draw = clamp((lt - 0.4) / 1.3, 0, 1);
  const tIn = win(lt, 1.7, 2.5);
  const agents = ['Lead response', 'Invoicing', 'Scheduling', 'Reviews', 'Reporting', 'Back-office'];
  const sweep = win(lt, 4.8, 5.9, Easing.easeInOutCubic);

  return (
    <SceneFrame bg={C.ink} zoom={0.04}>
      <div style={{ position: 'absolute', left: '50%', top: '50%', width: 1100, height: 1100, transform: 'translate(-50%,-50%)',
        background: `radial-gradient(circle, ${C.green900}88 0%, transparent 60%)` }}></div>

      {/* glyph + wordmark */}
      <div style={{ position: 'absolute', left: '50%', top: 230, transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
        <NoctuaGlyph size={150} color={C.green400} draw={draw} glow />
        <div style={{ opacity: win(lt, 1.3, 2.0), font: '700 56px/1 ' + FONT.display, letterSpacing: '-0.02em', color: C.paper }}>Noctua</div>
      </div>

      {/* headline */}
      <div style={{ position: 'absolute', left: '50%', top: 528, width: 1100, transform: `translateX(-50%) translateY(${(1 - tIn) * 16}px)`, opacity: tIn, textAlign: 'center' }}>
        <div style={{ font: '600 20px/1.4 ' + FONT.mono, letterSpacing: '0.2em', textTransform: 'uppercase', color: C.green300, marginBottom: 16 }}>Enter Noctua</div>
        <div style={{ font: '700 62px/1.05 ' + FONT.display, letterSpacing: '-0.03em', color: C.paper }}>
          We get you AI-ready — then run it.
        </div>
        <div style={{ font: '400 25px/1.5 ' + FONT.body, color: C.ink200, marginTop: 20 }}>
          A managed team of agents on the tools you already pay for.
        </div>
      </div>

      {/* six agent chips */}
      <div style={{ position: 'absolute', left: '50%', top: 808, transform: 'translateX(-50%)', display: 'flex', gap: 14 }}>
        {agents.map((a, i) => {
          const p = win(lt, 2.8 + i * 0.12, 3.4 + i * 0.12, Easing.easeOutBack);
          return (
            <div key={a} style={{ opacity: p, transform: `translateY(${(1 - p) * 22}px)`,
              display: 'flex', alignItems: 'center', gap: 9, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.14)',
              borderRadius: 99, padding: '12px 18px' }}>
              <span style={{ width: 8, height: 8, borderRadius: 99, background: C.green400 }}></span>
              <span style={{ font: '500 18px/1 ' + FONT.body, color: C.paper }}>{a}</span>
            </div>
          );
        })}
      </div>

      {/* transition sweep */}
      {sweep > 0 && sweep < 1 && (
        <div style={{ position: 'absolute', top: 0, bottom: 0, left: `${lerp(-10, 110, sweep)}%`, width: 6, background: C.green400, boxShadow: `0 0 40px 10px ${C.green400}` }}></div>
      )}
    </SceneFrame>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// SCENE 9 — OUTCOME (calm console payoff, paper)
// ════════════════════════════════════════════════════════════════════════════
function Outcome() {
  const { localTime: lt } = useSprite();
  const head = win(lt, 0.3, 1.0);
  const panel = win(lt, 0.7, 1.6, Easing.easeOutCubic);
  const agents = [
    ['Lead response', 'Replied · 38s avg'],
    ['Invoicing', 'Sent & reconciled'],
    ['Scheduling', 'Calendar synced'],
    ['Reviews', '+47 this month'],
    ['Reporting', 'Weekly · auto'],
    ['Back-office', 'Excel · PDF · Word'],
  ];
  return (
    <SceneFrame bg={C.paper} zoom={0.025}>
      <HairGrid />
      <div style={{ position: 'absolute', left: 150, top: 96, opacity: head, transform: `translateY(${(1 - head) * 16}px)` }}>
        <Eyebrow>The operation, on autopilot</Eyebrow>
        <div style={{ font: '700 60px/1.02 ' + FONT.display, letterSpacing: '-0.03em', color: C.ink, marginTop: 12 }}>Calm. Caught up. Every night.</div>
      </div>

      {/* console panel */}
      <div style={{ position: 'absolute', left: 150, top: 270, width: 1620, opacity: panel, transform: `translateY(${(1 - panel) * 26}px)` }}>
        <Panel x={0} y={0} w={1620} h={520} accent>
          <Chrome label="Noctua · operator console" />
          <div style={{ padding: '26px 30px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {agents.map(([name, status], i) => (
              <div key={name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                border: `1px solid ${C.ink100}`, background: C.surface2, borderRadius: 10, padding: '18px 20px',
                opacity: win(lt, 1.2 + i * 0.1, 1.7 + i * 0.1) }}>
                <div>
                  <div style={{ font: '600 21px/1.1 ' + FONT.body, color: C.ink }}>{name}</div>
                  <div style={{ font: '400 14px/1.3 ' + FONT.mono, color: C.ink500, marginTop: 4 }}>{status}</div>
                </div>
                <Badge tone="qualified">Running</Badge>
              </div>
            ))}
          </div>
          {/* metric footer */}
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 0 }}></div>
        </Panel>
      </div>

      {/* big metric row */}
      <div style={{ position: 'absolute', left: 150, top: 838, display: 'flex', gap: 92, opacity: win(lt, 2.4, 3.0) }}>
        <MetricStat value={312} start={2.4} end={3.8} label="leads qualified this quarter" />
        <MetricStat value={84} start={2.5} end={3.9} prefix="$" suffix="k" label="collected, sent on time" accent={C.ink} />
        <MetricStat value={4.9} start={2.6} end={4.0} decimals={1} suffix="★" label="average review score" accent={C.clay500} />
        <MetricStat value={11} start={2.7} end={4.1} suffix=" hrs" label="given back each week" />
      </div>
    </SceneFrame>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// SCENE 10 — CLOSE (logo + taglines, ink)
// ════════════════════════════════════════════════════════════════════════════
function Close() {
  const { localTime: lt } = useSprite();
  const draw = clamp((lt - 0.3) / 1.1, 0, 1);
  const t1 = win(lt, 1.0, 1.7);
  const t2 = win(lt, 1.7, 2.4);
  const cta = win(lt, 2.4, 3.1, Easing.easeOutBack);
  return (
    <SceneFrame bg={C.ink} zoom={0.03} fade={0.5}>
      <div style={{ position: 'absolute', left: '50%', top: '50%', width: 1200, height: 1200, transform: 'translate(-50%,-50%)',
        background: `radial-gradient(circle, ${C.green900}77 0%, transparent 60%)` }}></div>

      <div style={{ position: 'absolute', left: '50%', top: 300, transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
        <NoctuaGlyph size={120} color={C.green400} draw={draw} glow />
        <div style={{ opacity: win(lt, 0.9, 1.5), font: '700 64px/1 ' + FONT.display, letterSpacing: '-0.02em', color: C.paper }}>Noctua</div>
      </div>

      <div style={{ position: 'absolute', left: '50%', top: 560, width: 1200, textAlign: 'center', transform: 'translateX(-50%)' }}>
        <div style={{ opacity: t1, transform: `translateY(${(1 - t1) * 14}px)`, font: '700 56px/1.1 ' + FONT.display, letterSpacing: '-0.03em', color: C.paper }}>
          Run a tighter business — without hiring.
        </div>
        <div style={{ opacity: t2, marginTop: 22, font: '600 22px/1.4 ' + FONT.mono, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.green300 }}>
          Nothing slips past us.
        </div>
      </div>

      <div style={{ position: 'absolute', left: '50%', top: 760, transform: `translateX(-50%) scale(${cta})`, opacity: clamp(cta, 0, 1),
        display: 'flex', alignItems: 'center', gap: 12, background: C.green600, color: '#fff',
        padding: '18px 30px', borderRadius: 8, boxShadow: `0 14px 36px ${C.green600}66` }}>
        <span style={{ font: '600 22px/1 ' + FONT.body }}>Get a free Ops Review</span>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </div>
    </SceneFrame>
  );
}

// ════════════════════════════════════════════════════════════════════════════
// ROOT
// ════════════════════════════════════════════════════════════════════════════
function NoctuaVideo() {
  return (
    <Stage width={W} height={H} duration={60} background={C.ink} persistKey="noctua-usecases">
      {/* data-screen-label updates handled by Stage children below */}
      <Sprite start={0} end={8.3}><ColdOpen /></Sprite>
      <Sprite start={8.0} end={14.3}><TheTurn /></Sprite>

      {/* Use case 1 — Lead response */}
      <Sprite start={14.0} end={20.3}>
        <UseCase
          eyebrow="Use case 01 · Lead response"
          title={"Leads that close themselves."}
          agentName="Lead response"
          beforeLabel="Voicemail · 3 missed"
          afterLabel="Replied in 38s"
          renderBefore={() => <PhoneArtifact />}
          renderAfter={(lt) => <AgentReply name="Lead response" typed={win(lt, 2.8, 4.2)} lines={["Hi Dana — thanks for reaching out!", "I can get you a quote today.", "Are mornings or afternoons better?"]} />}
          metric={{ value: 312, label: "leads qualified — none left to cool off", value2: 38, suffix2: "s", label2: "average reply, day or night" }}
        />
      </Sprite>

      {/* Use case 2 — Invoicing */}
      <Sprite start={20.0} end={26.3}>
        <UseCase
          eyebrow="Use case 02 · Invoicing"
          title={"Invoices out the door — not at midnight."}
          agentName="Invoicing"
          beforeLabel="invoices.pdf · unsent"
          afterLabel="Sent & reconciled"
          renderBefore={() => <DocArtifact kind="PDF" title="INVOICE" unsent />}
          renderAfter={(lt) => (
            <div style={{ padding: '22px 24px', height: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <DocArtifact kind="PAID" title="INVOICE" />
              <div style={{ position: 'absolute', top: 70, right: 18, transform: `rotate(-8deg) scale(${win(lt, 3.0, 3.6, Easing.easeOutBack)})` }}>
                <Badge tone="sent" big>Paid</Badge>
              </div>
            </div>
          )}
          metric={{ value: 84, prefix: "$", suffix: "k", label: "collected — sent the moment a job closes" }}
        />
      </Sprite>

      {/* Use case 3 — Scheduling */}
      <Sprite start={26.0} end={32.3}>
        <UseCase
          eyebrow="Use case 03 · Scheduling"
          title={"The calendar fills itself."}
          agentName="Scheduling"
          beforeLabel="Texts & double-bookings"
          afterLabel="Booked · synced"
          renderBefore={() => <CalendarArtifact booked={false} />}
          renderAfter={() => <CalendarArtifact booked={true} />}
          metric={{ value: 9, suffix: " hrs", label: "of back-and-forth texting, gone each week", accent: C.green600 }}
        />
      </Sprite>

      {/* Use case 4 — Reviews */}
      <Sprite start={32.0} end={38.3}>
        <UseCase
          eyebrow="Use case 04 · Follow-up & reviews"
          title={"Every happy customer, asked."}
          agentName="Reviews"
          beforeLabel="Sticky note · someday"
          afterLabel="Review request sent"
          renderBefore={() => (
            <div style={{ position: 'relative', height: '100%' }}>
              <Sticky x={60} y={36} rotate={-4} w={300}>ask the Garcias<br />for a review?</Sticky>
            </div>
          )}
          renderAfter={(lt) => <ReviewArtifact filled={Math.round(win(lt, 2.9, 4.2) * 5)} />}
          metric={{ value: 47, prefix: "+", label: "reviews this month", value2: 4.9, decimals2: 1, suffix2: "★", label2: "average rating" }}
        />
      </Sprite>

      {/* Use case 5 — Reporting */}
      <Sprite start={38.0} end={44.3}>
        <UseCase
          eyebrow="Use case 05 · Reporting"
          title={"The numbers, assembled for you."}
          agentName="Reporting"
          beforeLabel="report.xlsx · by hand"
          afterLabel="Weekly report · auto"
          renderBefore={() => <Spreadsheet messy />}
          renderAfter={(lt) => (
            <div style={{ padding: '22px 24px', height: '100%', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ font: '600 15px/1 ' + FONT.mono, color: C.green700, textTransform: 'uppercase', letterSpacing: '0.08em' }}>This week</div>
              {[['Revenue', '$23,480', 0.78], ['New leads', '64', 0.6], ['Jobs booked', '29', 0.46]].map(([k, v, w2], i) => (
                <div key={k} style={{ opacity: win(lt, 2.9 + i * 0.18, 3.5 + i * 0.18) }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                    <span style={{ font: '500 17px/1 ' + FONT.body, color: C.ink600 }}>{k}</span>
                    <span style={{ font: '600 18px/1 ' + FONT.mono, color: C.ink }}>{v}</span>
                  </div>
                  <div style={{ height: 10, background: C.ink100, borderRadius: 99, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${w2 * 100 * win(lt, 3.0 + i * 0.18, 3.9 + i * 0.18)}%`, background: C.green500, borderRadius: 99 }}></div>
                  </div>
                </div>
              ))}
            </div>
          )}
          metric={{ value: 0, label: "spreadsheets to build by hand — it lands in your inbox", accent: C.green600 }}
        />
      </Sprite>

      {/* Use case 6 — Back-office silos */}
      <Sprite start={44.0} end={50.3}>
        <UseCase
          eyebrow="Use case 06 · Back-office data"
          title={"Excel, PDF, Word — finally talking."}
          agentName="Back-office"
          beforeLabel="Disconnected files"
          afterLabel="One connected system"
          renderBefore={() => (
            <div style={{ position: 'relative', height: '100%' }}>
              <div style={{ position: 'absolute', left: 30, top: 24, transform: 'rotate(-7deg)', width: 200 }}><Panel x={0} y={0} w={200} h={130}><div style={{ padding: 10 }}><span style={{ font: '700 11px/1 ' + FONT.mono, color: '#fff', background: C.green600, padding: '4px 7px', borderRadius: 4 }}>XLSX</span></div></Panel></div>
              <div style={{ position: 'absolute', left: 280, top: 70, transform: 'rotate(5deg)', width: 200 }}><Panel x={0} y={0} w={200} h={130}><div style={{ padding: 10 }}><span style={{ font: '700 11px/1 ' + FONT.mono, color: '#fff', background: C.danger, padding: '4px 7px', borderRadius: 4 }}>PDF</span></div></Panel></div>
              <div style={{ position: 'absolute', left: 130, top: 200, transform: 'rotate(-3deg)', width: 200 }}><Panel x={0} y={0} w={200} h={130}><div style={{ padding: 10 }}><span style={{ font: '700 11px/1 ' + FONT.mono, color: '#fff', background: '#2A5F6B', padding: '4px 7px', borderRadius: 4 }}>DOCX</span></div></Panel></div>
            </div>
          )}
          renderAfter={(lt) => (
            <div style={{ padding: '22px 24px', height: '100%', display: 'flex', flexDirection: 'column', gap: 14, justifyContent: 'center' }}>
              {['XLSX', 'PDF', 'DOCX'].map((t, i) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 14, opacity: win(lt, 2.9 + i * 0.16, 3.4 + i * 0.16) }}>
                  <span style={{ font: '700 12px/1 ' + FONT.mono, color: '#fff', background: i === 0 ? C.green600 : i === 1 ? C.danger : '#2A5F6B', padding: '6px 9px', borderRadius: 5, width: 46, textAlign: 'center' }}>{t}</span>
                  <div style={{ flex: 1, height: 2, background: `repeating-linear-gradient(90deg, ${C.green400} 0 8px, transparent 8px 14px)` }}></div>
                  <NoctuaGlyph size={30} color={C.green600} />
                </div>
              ))}
              <div style={{ marginTop: 6, font: '500 16px/1.4 ' + FONT.body, color: C.ink600 }}>Reconciled into one source of truth — automatically.</div>
            </div>
          )}
          metric={{ value: 11, suffix: " hrs", label: "of back-office busywork handed back every week" }}
        />
      </Sprite>

      <Sprite start={50.0} end={55.8}><Outcome /></Sprite>
      <Sprite start={55.5} end={60}><Close /></Sprite>

      <ScreenLabeler />
    </Stage>
  );
}

// updates the root data-screen-label to the current second for comment context
function ScreenLabeler() {
  const { time } = window.useTimeline();
  React.useEffect(() => {
    const root = document.getElementById('video-root');
    if (root) root.setAttribute('data-screen-label', `t=${time.toFixed(0)}s`);
  }, [Math.floor(time)]);
  return null;
}

window.NoctuaVideo = NoctuaVideo;