// scenes-b.jsx — Scenes 6–10
// 6. Freeze report   0:52 → 1:03
// 7. Claims / ERAs   1:03 → 1:14
// 8. Numbers / ROI   1:14 → 1:24
// 9. Audit defense   1:24 → 1:33
// 10. Closer         1:33 → 1:40

// ───────────────────────────────────────────────────────────────────────────
// SCENE 6 — Freeze report (Mara on the 27th → nightly job on the 31st)
// ───────────────────────────────────────────────────────────────────────────
function Scene6_Freeze() {
  const t = useTime();
  const start = 52, end = 63;
  if (t < start || t > end) return null;
  const lt = t - start;

  const sceneOp = lt < 0.5 ? Easing.easeOutCubic(lt / 0.5) : (lt > end - start - 0.6 ? 1 - (lt - (end - start - 0.6)) / 0.6 : 1);

  // Date marquee: 27 → 31
  const dayProgress = clamp((lt - 1.0) / 5.0, 0, 1);
  const dayIdx = Math.min(4, Math.floor(dayProgress * 5));
  const days = ['27', '28', '29', '30', '31'];

  // Rows stagger in
  const rowOps = FREEZE_ROWS.map((_, i) =>
    animate({ from: 0, to: 1, start: 1.0 + i * 0.16, end: 1.4 + i * 0.16, ease: Easing.easeOutCubic })(lt)
  );

  // At lt=6.5, nightly job fires — clock spins to 11:00pm and rows pulse
  const nightlyTrigger = animate({ from: 0, to: 1, start: 6.4, end: 7.4, ease: Easing.easeInOutCubic })(lt);
  const freezeFlash = animate({ from: 0, to: 1, start: 7.4, end: 8.4, ease: Easing.easeOutCubic })(lt);

  // Evidence chips appear at 8.0
  const evidenceOp = animate({ from: 0, to: 1, start: 8.4, end: 9.4, ease: Easing.easeOutCubic })(lt);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />
      <BrandStamp caption="Week 3 · Friday afternoon · the freeze report" sceneNo={4} totalScenes={8} />

      <SceneTitle
        kicker="/billing → freeze report"
        title={<>The month closes on its own.<br/><Em size={62}>Nightly job · 23:00 UTC.</Em></>}
        x={110} y={150}
      />

      {/* Date marquee */}
      <div style={{
        position: 'absolute', left: 110, top: 360,
        display: 'flex', alignItems: 'flex-end', gap: 18,
      }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-soft)',
          letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 14,
        }}>day</div>
        {days.map((d, i) => {
          const active = i === dayIdx;
          const past = i < dayIdx;
          return (
            <div key={d} style={{
              fontFamily: 'var(--serif)', fontStyle: 'italic',
              fontSize: active ? 64 : 36,
              color: active ? 'var(--ink)' : past ? 'var(--ink-mute)' : 'rgba(21,32,26,0.25)',
              lineHeight: 1, transition: 'none',
              opacity: active ? 1 : past ? 0.7 : 0.4,
            }}>{d}</div>
          );
        })}
        <div style={{
          marginLeft: 24, marginBottom: 14,
          fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-soft)',
        }}>May · 2026</div>
      </div>

      {/* Freeze table */}
      <div style={{
        position: 'absolute', left: 110, top: 470, width: 1180,
        background: '#fff',
        border: '1px solid var(--rule)',
        borderRadius: 14,
        overflow: 'hidden',
        boxShadow: '0 20px 50px -30px rgba(14,28,48,0.25)',
      }}>
        {/* Table header */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2.4fr 0.8fr 1fr 1.2fr 1.6fr',
          padding: '14px 22px',
          background: 'var(--paper-2)',
          borderBottom: '1px solid var(--rule)',
          fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--ink-soft)', fontWeight: 600,
        }}>
          <div>Program</div>
          <div style={{ textAlign: 'right' }}>Eligible</div>
          <div style={{ textAlign: 'right' }}>Will freeze</div>
          <div style={{ textAlign: 'right' }}>Blocked</div>
          <div style={{ textAlign: 'right' }}>Status</div>
        </div>
        {/* Rows */}
        {FREEZE_ROWS.map((r, i) => {
          const op = rowOps[i];
          const isFrozen = freezeFlash > 0 && r.willFreeze;
          return (
            <div key={r.code} style={{
              display: 'grid',
              gridTemplateColumns: '2.4fr 0.8fr 1fr 1.2fr 1.6fr',
              padding: '13px 22px',
              borderBottom: i < FREEZE_ROWS.length - 1 ? '1px solid var(--rule-soft)' : 'none',
              fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--ink)',
              alignItems: 'center',
              opacity: op,
              background: isFrozen
                ? `rgba(30,58,100, ${0.06 + freezeFlash * 0.10})`
                : 'transparent',
              transform: `translateY(${(1 - op) * 12}px)`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontFamily: 'var(--mono)', color: 'var(--ink-soft)', fontSize: 13 }}>{r.code}</span>
                <span>{r.name}</span>
              </div>
              <div style={{ textAlign: 'right', fontFamily: 'var(--mono)' }}>{r.eligible}</div>
              <div style={{ textAlign: 'right', fontFamily: 'var(--mono)', color: 'var(--willow-deep)', fontWeight: 600 }}>{r.willFreeze}</div>
              <div style={{ textAlign: 'right', fontFamily: 'var(--mono)' }}>
                {r.blocked > 0 ? (
                  <span style={{ color: 'var(--amber)' }}>{r.blocked} <span style={{ color: 'var(--ink-mute)', fontSize: 12 }}>{r.blockedReason}</span></span>
                ) : <span style={{ color: 'var(--ink-mute)' }}>—</span>}
              </div>
              <div style={{ textAlign: 'right' }}>
                {isFrozen
                  ? <Pill tone="ok" size="sm">frozen · evidence ✓</Pill>
                  : <Pill tone="willow" size="sm">projected</Pill>
                }
              </div>
            </div>
          );
        })}
      </div>

      {/* Right column: nightly job clock + evidence packet */}
      <div style={{ position: 'absolute', left: 1330, top: 470, width: 470 }}>
        <NightlyClock progress={nightlyTrigger} />

        {/* Evidence packet */}
        <div style={{
          marginTop: 22,
          opacity: evidenceOp,
          transform: `translateY(${(1 - evidenceOp) * 18}px)`,
          padding: '20px 22px',
          background: 'var(--willow-deep)', color: '#fff',
          borderRadius: 14,
        }}>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 11,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--willow-soft)', fontWeight: 600, marginBottom: 12,
          }}>Evidence packet · attached</div>
          <ul style={{
            margin: 0, padding: 0, listStyle: 'none',
            fontFamily: 'var(--mono)', fontSize: 13, lineHeight: 1.7,
          }}>
            <EvLine>signed consent · portal e-sig</EvLine>
            <EvLine>care-plan snapshot · v.active</EvLine>
            <EvLine>time slices · per-encounter</EvLine>
            <EvLine>interactive-comm log</EvLine>
            <EvLine>NPI · licensure attestation</EvLine>
            <EvLine>Ed25519 audit log · ndjson</EvLine>
          </ul>
        </div>
      </div>
    </div>
  );
}

const FREEZE_ROWS = [
  { code: 'CCM 99490',  name: '20 min · floor',     eligible: 248, willFreeze: 187, blocked: 12, blockedReason: 'short on min' },
  { code: 'CCM 99439',  name: 'each +20 add-on',    eligible: '—', willFreeze: 64,  blocked: 0 },
  { code: 'CCM 99491',  name: 'physician 30 min',   eligible: 4,   willFreeze: 4,   blocked: 0 },
  { code: 'RPM 99454',  name: 'device-days ≥ 16',   eligible: 64,  willFreeze: 58,  blocked: 6,  blockedReason: 'low days' },
  { code: 'RPM 99457',  name: 'interactive ≥ 20m',  eligible: 64,  willFreeze: 52,  blocked: 12, blockedReason: 'short on min' },
  { code: 'BHI 99484',  name: 'behavioral integ.',  eligible: 18,  willFreeze: 16,  blocked: 2,  blockedReason: 'no contact' },
  { code: 'PCM 99426',  name: 'principal care',     eligible: 6,   willFreeze: 6,   blocked: 0 },
  { code: 'ACP 99497',  name: 'advance care plan',  eligible: '—', willFreeze: 7,   blocked: 0 },
  // AWV freeze row DEACTIVATED alongside the AWV/ACP chapter (athena clients
  // complete the AWV inside athena). To restore: un-comment the line below and
  // re-enable SHOW_AWV_CHAPTER in case-study-1.jsx.
  // { code: 'AWV G0438/9',name: 'wellness visits',    eligible: '—', willFreeze: 23,  blocked: 0 },
];

function EvLine({ children }) {
  return (
    <li style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{
        width: 16, height: 16, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: 'rgba(255,255,255,0.10)', borderRadius: 3,
      }}>
        <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5 l 2 2 4 -5" stroke="#fff" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" /></svg>
      </span>
      {children}
    </li>
  );
}

function NightlyClock({ progress = 0 }) {
  // Clock face: hands sweep from 5pm to 11pm
  // hour hand: -90 + 30*5 to -90 + 30*11
  const hourStart = -90 + 30 * 5;
  const hourEnd = -90 + 30 * 11;
  const minStart = -90 + 0;
  const minEnd   = -90 + 0;
  const hour = hourStart + (hourEnd - hourStart) * progress;
  const min  = minStart + (360 * 6) * progress; // 6 full sweeps of minute hand
  const fired = progress > 0.95;
  return (
    <div style={{
      padding: '22px 24px',
      background: fired ? 'var(--wb-primary)' : 'var(--wb-paper)',
      color: fired ? 'var(--wb-paper)' : 'var(--wb-ink)',
      border: `1.5px solid ${fired ? 'var(--wb-primary)' : 'var(--wb-rule)'}`,
      borderRadius: 14,
      transition: 'background 200ms',
      display: 'flex', alignItems: 'center', gap: 22,
    }}>
      <svg width="92" height="92" viewBox="0 0 92 92">
        <circle cx="46" cy="46" r="42" fill="none" stroke={fired ? 'var(--paper)' : 'var(--ink)'} strokeWidth="1.6" />
        {/* ticks */}
        {[...Array(12)].map((_, i) => {
          const a = (i / 12) * Math.PI * 2 - Math.PI / 2;
          const x1 = 46 + Math.cos(a) * 38;
          const y1 = 46 + Math.sin(a) * 38;
          const x2 = 46 + Math.cos(a) * 42;
          const y2 = 46 + Math.sin(a) * 42;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={fired ? 'var(--paper)' : 'var(--ink)'} strokeWidth={i % 3 === 0 ? 1.8 : 1} />;
        })}
        <line x1="46" y1="46"
              x2={46 + Math.cos(hour * Math.PI / 180) * 22}
              y2={46 + Math.sin(hour * Math.PI / 180) * 22}
              stroke={fired ? 'var(--paper)' : 'var(--ink)'} strokeWidth="3" strokeLinecap="round" />
        <line x1="46" y1="46"
              x2={46 + Math.cos(min * Math.PI / 180) * 32}
              y2={46 + Math.sin(min * Math.PI / 180) * 32}
              stroke={fired ? 'var(--willow-soft)' : 'var(--willow)'} strokeWidth="2" strokeLinecap="round" />
        <circle cx="46" cy="46" r="3" fill={fired ? 'var(--paper)' : 'var(--ink)'} />
      </svg>
      <div>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: fired ? 'var(--willow-soft)' : 'var(--willow)', fontWeight: 600,
        }}>{fired ? 'Job fired' : 'Nightly job'}</div>
        <div style={{
          fontFamily: 'var(--serif)', fontStyle: 'italic',
          fontSize: 40, lineHeight: 1, marginTop: 6,
        }}>{fired ? '23:00' : '17:00 → 23:00'}</div>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 12, opacity: 0.7, marginTop: 4 }}>UTC · May 31</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// SCENE 7 — Charge handoff to athena (Week 4, Mara on sign-off queue)
// ───────────────────────────────────────────────────────────────────────────
function Scene7_Claims() {
  const t = useTime();
  const start = 63, end = 74;
  if (t < start || t > end) return null;
  const lt = t - start;
  const sceneOp = lt < 0.5 ? Easing.easeOutCubic(lt / 0.5) : (lt > end - start - 0.6 ? 1 - (lt - (end - start - 0.6)) / 0.6 : 1);

  // Phase plan:
  // 0.0 - 1.2 : 287 charges hero
  // 1.2 - 2.6 : eligibility (read from athena, already current), 11 ✓ 1 ⚠
  // 2.6 - 4.0 : Confirm sign-off → charges fly to athena's Charge API
  // 4.0 - 6.0 : athena returns charge ids: 287 accepted
  // 6.0 - 10.0: athena Posting fills in, dollars counter ramps to 21840

  const claimCount = Math.round(rampNumber(lt, 0.2, 1.0, 0, 287));
  const elig = animate({ from: 0, to: 1, start: 1.2, end: 1.8 })(lt);
  const eligCheck = animate({ from: 0, to: 12, start: 1.4, end: 2.4, ease: Easing.linear })(lt);
  const submitT = animate({ from: 0, to: 1, start: 2.6, end: 3.4, ease: Easing.easeOutBack })(lt);
  const flyT = animate({ from: 0, to: 1, start: 3.4, end: 4.4, ease: Easing.easeInOutCubic })(lt);
  const ackT = animate({ from: 0, to: 1, start: 4.6, end: 5.6, ease: Easing.easeOutCubic })(lt);
  const eraT = animate({ from: 0, to: 1, start: 6.0, end: 7.0, ease: Easing.easeOutCubic })(lt);
  const dollars = Math.round(rampNumber(lt, 6.0, 4.0, 0, 21840));
  const paidCount = Math.round(rampNumber(lt, 6.4, 3.4, 0, 263));

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />
      <BrandStamp caption="Week 4 · The 1st · Mara opens the sign-off queue" sceneNo={5} totalScenes={8} />

      {/* Hero count: 287 */}
      <div style={{ position: 'absolute', left: 110, top: 200 }}>
        <div style={{
          fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase',
          fontWeight: 600, color: 'var(--willow)', marginBottom: 16,
          fontFamily: 'var(--sans)',
        }}>Charges ready for athena</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 22 }}>
          <div style={{
            fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 220, color: 'var(--ink)', lineHeight: 0.9,
            fontVariantNumeric: 'tabular-nums',
          }}>{claimCount}</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 30, color: 'var(--ink-soft)', maxWidth: 360, lineHeight: 1.25 }}>
            charges hand off to <span style={{ fontFamily: 'var(--mono)' }}>athena</span> in one click.
          </div>
        </div>
      </div>

      {/* Eligibility strip */}
      <div style={{
        position: 'absolute', left: 110, top: 600, width: 760,
        opacity: elig,
        padding: '18px 22px',
        background: '#fff', border: '1px solid var(--rule)', borderRadius: 12,
      }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--willow)', fontWeight: 600, marginBottom: 12,
        }}>Eligibility · read from athena · always current</div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          {[...Array(12)].map((_, i) => {
            const checked = eligCheck > i + 0.5;
            const isFlag = i === 7; // arbitrary one
            return (
              <div key={i} style={{
                width: 50, height: 50, borderRadius: 8,
                background: checked
                  ? (isFlag ? 'var(--wb-steel-soft)' : 'var(--wb-primary-soft)')
                  : 'var(--wb-paper)',
                border: `1.5px solid ${checked ? (isFlag ? 'var(--wb-steel)' : 'var(--wb-primary-soft)') : 'var(--wb-rule)'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'all 120ms',
              }}>
                {checked && (isFlag
                  ? <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 3 v 8 M10 14 v 2" stroke="var(--wb-steel)" strokeWidth="2" strokeLinecap="round" /></svg>
                  : <svg width="22" height="22" viewBox="0 0 22 22"><path d="M5 11 l 4 4 8 -9" stroke="var(--willow-deep)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" /></svg>
                )}
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 12, fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink-soft)' }}>
          11 active · 1 flag: <span style={{ color: 'var(--ink)', fontWeight: 500 }}>now Medicare Advantage primary</span>
          {' '}<span style={{ color: 'var(--ink-mute)' }}>→ rerouted to MA payer.</span>
        </div>
      </div>

      {/* Right: Submit button → envelope flying */}
      <div style={{ position: 'absolute', right: 110, top: 250, width: 700 }}>
        <div style={{
          opacity: submitT,
          transform: `scale(${0.92 + 0.08 * submitT})`,
          padding: '18px 26px', borderRadius: 12,
          background: 'var(--willow-deep)', color: '#fff',
          fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 22,
          display: 'inline-flex', alignItems: 'center', gap: 14,
          boxShadow: '0 16px 40px -20px rgba(14,28,48,0.50)',
        }}>
          <svg width="22" height="22" viewBox="0 0 22 22"><path d="M11 3v12M6 10l5 5 5-5M3 19h16" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
          Confirm sign-off · 287
        </div>

        {/* Flight path */}
        {flyT > 0 && (
          <>
            <div style={{
              position: 'absolute',
              left: 30 + flyT * 540,
              top: 80 + flyT * 80,
              transform: `rotate(${flyT * 18}deg) scale(${1 + flyT * 0.2})`,
              opacity: 1 - flyT * 0.2,
            }}>
              <FileTag label="charges · athena Charge API" />
            </div>
            <FlightArc progress={flyT} />
          </>
        )}

        {/* athena acknowledgements */}
        {ackT > 0 && (
          <div style={{
            marginTop: 40,
            opacity: ackT, transform: `translateY(${(1 - ackT) * 12}px)`,
            padding: '20px 24px', background: '#fff', border: '1px solid var(--rule)', borderRadius: 12,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <Pill tone="dark" size="sm">athena · charge ids returned</Pill>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-mute)' }}>within minutes</span>
            </div>
            <div style={{ display: 'flex', gap: 22 }}>
              <AckStat n="287" l="accepted · handed off" tone="ok" />
            </div>
          </div>
        )}

        {/* athena Posting fills in */}
        {eraT > 0 && (
          <div style={{
            marginTop: 22,
            opacity: eraT, transform: `translateY(${(1 - eraT) * 12}px)`,
            padding: '22px 26px',
            background: 'var(--willow-deep)', color: '#fff',
            borderRadius: 14,
            boxShadow: '0 20px 50px -20px rgba(14,28,48,0.35)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <Pill tone="dark" size="sm">athena Posting · paid</Pill>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 12, opacity: 0.7 }}>+10 days</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 30 }}>
              <div>
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 10,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: 'var(--willow-soft)', marginBottom: 4,
                }}>paid in full</div>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 64, lineHeight: 1 }}>
                  ${dollars.toLocaleString()}
                </div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--willow-soft)', marginTop: 4 }}>
                  {paidCount} of 287 charges posted
                </div>
              </div>
              <div style={{ display: 'grid', gap: 6 }}>
                <span style={{ fontSize: 13 }}><span style={{ fontFamily: 'var(--mono)', color: 'var(--willow-soft)' }}>18</span> · paid w/ contractual write-off</span>
                <span style={{ fontSize: 13 }}><span style={{ fontFamily: 'var(--mono)', color: 'var(--willow-soft)' }}>4</span> · denials surfaced in athena</span>
                <span style={{ fontSize: 13 }}><span style={{ fontFamily: 'var(--mono)', color: 'var(--willow-soft)' }}>2</span> · not covered · written off</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function FileTag({ label }) {
  return (
    <div style={{
      padding: '10px 16px', background: '#fff', border: '1.5px solid var(--ink)', borderRadius: 6,
      fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 600, color: 'var(--ink)',
      boxShadow: '0 8px 22px -8px rgba(0,0,0,0.4)',
      display: 'inline-flex', alignItems: 'center', gap: 8,
    }}>
      <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 1h6l3 3v9H3z" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" /><path d="M9 1v3h3" fill="none" stroke="currentColor" strokeWidth="1.4" /></svg>
      {label}
    </div>
  );
}

function FlightArc({ progress }) {
  // dashed arc from button to ackback area
  const pathLen = 600;
  return (
    <svg style={{ position: 'absolute', left: 0, top: 70, pointerEvents: 'none' }} width="700" height="240">
      <path
        d="M 20 30 C 200 -30, 400 120, 620 130"
        fill="none"
        stroke="var(--willow)"
        strokeWidth="2"
        strokeDasharray="6 6"
        strokeDashoffset={pathLen - pathLen * progress}
        opacity="0.4"
      />
    </svg>
  );
}

function AckStat({ n, l, tone }) {
  const color = tone === 'ok' ? 'var(--ok)' : tone === 'danger' ? 'var(--danger)' : 'var(--ink)';
  return (
    <div>
      <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 50, lineHeight: 1, color }}>{n}</div>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 11,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--ink-soft)', marginTop: 4,
      }}>{l}</div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// SCENE 8 — End-of-month numbers + ROI hero
// ───────────────────────────────────────────────────────────────────────────
function Scene8_Numbers() {
  const t = useTime();
  const start = 74, end = 84;
  if (t < start || t > end) return null;
  const lt = t - start;
  const sceneOp = lt < 0.5 ? Easing.easeOutCubic(lt / 0.5) : (lt > end - start - 0.6 ? 1 - (lt - (end - start - 0.6)) / 0.6 : 1);

  const revT = animate({ from: 0, to: 1, start: 0.2, end: 1.4, ease: Easing.easeOutCubic })(lt);
  const invT = animate({ from: 0, to: 1, start: 1.8, end: 3.0, ease: Easing.easeOutCubic })(lt);
  const netT = animate({ from: 0, to: 1, start: 3.4, end: 4.6, ease: Easing.easeOutCubic })(lt);
  const roiT = animate({ from: 0, to: 1, start: 5.2, end: 6.4, ease: Easing.easeOutBack })(lt);
  const noteT = animate({ from: 0, to: 1, start: 7.4, end: 8.4, ease: Easing.easeOutCubic })(lt);

  const rev = Math.round(rampNumber(lt, 0.2, 1.2, 0, 22940));
  const before = Math.round(rampNumber(lt, 1.8, 1.2, 0, 0));
  const net = Math.round(rampNumber(lt, 3.4, 1.2, 0, 22940));
  const lift = (rampNumber(lt, 5.2, 1.2, 0, 22940));

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />
      <BrandStamp caption="End of month · the numbers" sceneNo={6} totalScenes={8} />

      {/* Title */}
      <SceneTitle
        kicker="Practice ledger · May 2026"
        title={<>What we did, <Em size={62}>finally counted.</Em></>}
        x={110} y={150}
      />

      {/* Three big numbers, ledger style */}
      <div style={{
        position: 'absolute', left: 110, top: 380, width: 1700,
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 36,
      }}>
        <BigNumber
          op={revT}
          kicker="Revenue captured via athena"
          n={`$${rev.toLocaleString()}`}
          accent="var(--willow-deep)"
          sub="263 paid in full · 18 w/ contractual write-off"
        />
        <BigNumber
          op={invT}
          kicker="Same month, before Willowbridge"
          n={`$${before.toLocaleString()}`}
          accent="var(--ink-soft)"
          sub="The CCM / RPM / BHI / PCM codes weren't being captured."
          subAccent={<><br/><span style={{ color: 'var(--willow-deep)', fontWeight: 500 }}>Willowbridge's only fee: a small per-billable-period charge — nothing for patients who don't qualify.</span></>}
        />
        <BigNumber
          op={netT}
          kicker="Net to the practice"
          n={`$${net.toLocaleString()}`}
          accent="var(--ink)"
          sub="all of it lands in the practice's existing athena account"
        />
      </div>

      {/* ROI banner */}
      <div style={{
        position: 'absolute', left: 110, right: 110, bottom: 90,
        opacity: roiT, transform: `translateY(${(1 - roiT) * 24}px) scale(${0.96 + 0.04 * roiT})`,
        padding: '36px 48px',
        background: 'var(--wb-primary)', color: 'var(--wb-paper)',
        borderRadius: 18,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        boxShadow: '0 28px 80px -28px rgba(14,28,48,0.55)',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 12,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: '#9ec5ff', fontWeight: 600, marginBottom: 8,
          }}>Revenue that didn't exist last quarter</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 38, color: 'var(--wb-paper)', lineHeight: 1.1, fontWeight: 400 }}>
            Care management, finally captured and billed
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{
            fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 160, color: 'var(--wb-paper)', lineHeight: 0.85,
            fontVariantNumeric: 'tabular-nums',
          }}>${Math.round(lift).toLocaleString()}</span>
        </div>
      </div>

      {/* note */}
      <div style={{
        position: 'absolute', left: 110, bottom: 36,
        opacity: noteT,
        fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-mute)',
        letterSpacing: '0.04em',
      }}>
        Names + dollar amounts illustrative · workflow + billing rules + audit posture exactly as deployed.
      </div>
    </div>
  );
}

function BigNumber({ op, kicker, n, accent, sub, subAccent }) {
  return (
    <div style={{
      opacity: op, transform: `translateY(${(1 - op) * 18}px)`,
      paddingTop: 22,
      borderTop: `2px solid var(--ink)`,
    }}>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 11,
        letterSpacing: '0.22em', textTransform: 'uppercase',
        color: 'var(--ink-soft)', fontWeight: 600, marginBottom: 12,
      }}>{kicker}</div>
      <div style={{
        fontFamily: 'var(--serif)', fontStyle: 'italic',
        fontSize: 92, color: accent, lineHeight: 1,
        fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em',
      }}>{n}</div>
      <div style={{
        fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--ink-soft)',
        marginTop: 12, lineHeight: 1.4, maxWidth: 460,
      }}>
        {sub}{subAccent}
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// SCENE 9 — Audit defense (MAC ADR → one-click packet → upheld)
// ───────────────────────────────────────────────────────────────────────────
function Scene9_Audit() {
  const t = useTime();
  const start = 84, end = 93;
  if (t < start || t > end) return null;
  const lt = t - start;
  const sceneOp = lt < 0.5 ? Easing.easeOutCubic(lt / 0.5) : (lt > end - start - 0.6 ? 1 - (lt - (end - start - 0.6)) / 0.6 : 1);

  // ADR letter slides in 0-1.2
  const adrT = animate({ from: 0, to: 1, start: 0.2, end: 1.2, ease: Easing.easeOutCubic })(lt);
  // Generate packet at 2.2
  const genT = animate({ from: 0, to: 1, start: 2.4, end: 3.2, ease: Easing.easeOutBack })(lt);
  // ZIP grows
  const zipT = animate({ from: 0, to: 1, start: 3.4, end: 4.4, ease: Easing.easeOutCubic })(lt);
  // Verdict stamp
  const stampT = animate({ from: 0, to: 1, start: 6.2, end: 7.0, ease: Easing.easeOutBack })(lt);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />
      <BrandStamp caption="Two weeks later · MAC documentation request" sceneNo={7} totalScenes={8} />

      <SceneTitle
        kicker="Audit defense · /audit"
        title={<>Twelve claims requested.<br/><Em size={62}>One packet. Twelve upheld.</Em></>}
        x={110} y={150}
      />

      {/* ADR letter */}
      <div style={{
        position: 'absolute', left: 110, top: 400, width: 540,
        opacity: adrT, transform: `translate(${(1 - adrT) * -30}px, ${(1 - adrT) * 16}px) rotate(${-1.2 + adrT * 0.3}deg)`,
        padding: '28px 32px',
        background: '#fff',
        border: '1px solid var(--rule)',
        borderRadius: 6,
        boxShadow: '0 24px 60px -24px rgba(14,28,48,0.35)',
        fontFamily: 'var(--sans)', color: 'var(--ink)',
      }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '0.2em', textTransform: 'uppercase',
          color: 'var(--ink-mute)', marginBottom: 8,
        }}>Medicare Administrative Contractor</div>
        <div style={{ fontSize: 28, fontWeight: 500, color: 'var(--ink)', lineHeight: 1.2, marginBottom: 14 }}>
          Documentation request — <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>12 CCM claims</span>
        </div>
        <div style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
          Provide: signed consents, immutable care plans, interactive-communication logs, performing-clinician attestations.
          <br /><br />
          Window: 14 days.
        </div>
        <div style={{
          marginTop: 18, paddingTop: 12, borderTop: '1px solid var(--rule-soft)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)',
        }}>
          <span>ref · ADR-2026-05-1184</span>
          <span>received · 2026-06-14</span>
        </div>
      </div>

      {/* Generate packet button + ZIP */}
      <div style={{ position: 'absolute', left: 740, top: 400, width: 480 }}>
        <div style={{
          opacity: genT, transform: `scale(${0.9 + 0.1 * genT})`,
          padding: '16px 24px',
          background: 'var(--wb-primary)', color: 'var(--wb-paper)',
          borderRadius: 10,
          display: 'inline-flex', alignItems: 'center', gap: 12,
          fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 17,
          boxShadow: '0 12px 30px -16px rgba(14,28,48,0.50)',
        }}>
          <svg width="18" height="18" viewBox="0 0 18 18"><path d="M3 3h12v12H3zM3 7h12M7 3v12" stroke="#fff" strokeWidth="1.5" /></svg>
          Generate documentation packet
        </div>

        {/* ZIP file */}
        {zipT > 0 && (
          <div style={{
            marginTop: 22,
            opacity: zipT, transform: `translateY(${(1 - zipT) * 14}px)`,
            padding: '20px 24px',
            background: 'var(--willow-deep)', color: '#fff',
            borderRadius: 14,
            boxShadow: '0 20px 60px -20px rgba(14,28,48,0.45)',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 14,
            }}>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 13, color: '#fff',
              }}>willowcare_adr-1184.zip</div>
              <Pill tone="dark" size="sm">5 files · 12 patients</Pill>
            </div>
            <ul style={{
              margin: 0, padding: 0, listStyle: 'none',
              fontFamily: 'var(--mono)', fontSize: 13, lineHeight: 1.7,
            }}>
              <EvLine>12 signed consent PDFs · portal e-sig · ts + IPs</EvLine>
              <EvLine>12 immutable care-plan snapshots · v.frozen</EvLine>
              <EvLine>12 monthly billing notes · PDF · SHA-256</EvLine>
              <EvLine>12 audit-log slices · ndjson · Ed25519-signed</EvLine>
              <EvLine>verification README · public key</EvLine>
            </ul>
          </div>
        )}
      </div>

      {/* Verdict stamp */}
      {stampT > 0 && (
        <div style={{
          position: 'absolute',
          right: 200, top: 480,
          opacity: stampT,
          transform: `rotate(-8deg) scale(${0.6 + 0.4 * stampT})`,
          transformOrigin: 'center',
          padding: '28px 44px',
          border: '3.5px solid var(--willow-deep)',
          borderRadius: 12,
          fontFamily: 'var(--sans)', color: 'var(--willow-deep)',
          textAlign: 'center',
          background: 'rgba(241,236,222,0.6)',
          boxShadow: '0 0 0 8px rgba(241,236,222,0.5)',
        }}>
          <div style={{
            fontSize: 13, letterSpacing: '0.32em', textTransform: 'uppercase',
            fontWeight: 700, marginBottom: 4,
          }}>2 weeks later</div>
          <div style={{
            fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 78, color: 'var(--willow-deep)', lineHeight: 1,
            letterSpacing: '-0.01em',
          }}>12 / 12 upheld</div>
          <div style={{
            fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase',
            fontWeight: 600, marginTop: 6, color: 'var(--ink-soft)',
          }}>no clawback</div>
        </div>
      )}
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// SCENE 10 — Closer
// ───────────────────────────────────────────────────────────────────────────
function Scene10_Closer() {
  const t = useTime();
  const start = 93, end = 100;
  if (t < start || t > end) return null;
  const lt = t - start;

  const op1 = animate({ from: 0, to: 1, start: 0.3, end: 1.2, ease: Easing.easeOutCubic })(lt);
  const op2 = animate({ from: 0, to: 1, start: 1.2, end: 2.1, ease: Easing.easeOutCubic })(lt);
  const op3 = animate({ from: 0, to: 1, start: 3.2, end: 4.2, ease: Easing.easeOutCubic })(lt);

  // slow drift
  const drift = animate({ from: 0, to: -10, start: 0, end: 7, ease: Easing.linear })(lt);

  const sceneOp = lt > end - start - 0.5 ? 1 - (lt - (end - start - 0.5)) / 0.5 : 1;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />

      {/* Big tagline */}
      <div style={{
        position: 'absolute', left: 110, top: 360, transform: `translateY(${drift}px)`,
      }}>
        <div style={{ opacity: op1 }}>
          <Hero size={150} lineHeight={0.98}>
            Capture the care.
          </Hero>
        </div>
        <div style={{ opacity: op2, marginTop: 8 }}>
          <Hero size={150} lineHeight={0.98} color="var(--willow-deep)">
            <Em size={170}>Defend the claim.</Em>
          </Hero>
        </div>
      </div>

      {/* Footer */}
      <div style={{
        position: 'absolute', left: 110, right: 110, bottom: 110,
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        opacity: op3,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <WillowMark size={42} />
          <div>
            <div style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 32, color: 'var(--ink)', letterSpacing: '-0.01em' }}>Willowbridge</div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>
              willowbridge.app · founder@willowbridge.app
            </div>
          </div>
        </div>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-mute)',
          letterSpacing: '0.06em', textAlign: 'right', maxWidth: 480, lineHeight: 1.5,
        }}>
          Demo cohort · athenahealth Marketplace
          <br/>Tenovi · BodyTrace · CCM · RPM · BHI · PCM · ACP
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  Scene6_Freeze, Scene7_Claims, Scene8_Numbers, Scene9_Audit, Scene10_Closer,
});