// scenes-a.jsx — Scenes 1–5
// 1. Title          0:00 → 0:07
// 2. Worklist       0:07 → 0:19
// 3. Encounter      0:19 → 0:32
// 4. RPM            0:32 → 0:42
// 5. AWV / ACP      0:42 → 0:52

// ───────────────────────────────────────────────────────────────────────────
// SCENE 1 — Title
// ───────────────────────────────────────────────────────────────────────────
function Scene1_Title() {
  const t = useTime();
  const start = 0, end = 7;

  // Reveal pacing
  const op1 = animate({ from: 0, to: 1, start: 0.2, end: 1.1, ease: Easing.easeOutCubic })(t);
  const op2 = animate({ from: 0, to: 1, start: 1.0, end: 2.0, ease: Easing.easeOutCubic })(t);
  const op3 = animate({ from: 0, to: 1, start: 2.0, end: 3.0, ease: Easing.easeOutCubic })(t);
  const op4 = animate({ from: 0, to: 1, start: 3.2, end: 4.2, ease: Easing.easeOutCubic })(t);
  const exit = animate({ from: 0, to: 1, start: 6.3, end: 7.0, ease: Easing.easeInQuad })(t);

  // Slow camera drift on hero
  const drift = animate({ from: 0, to: -14, start: 0, end: 7, ease: Easing.linear })(t);

  if (t > end) return null;

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

      {/* Edition stamp */}
      <div style={{
        position: 'absolute', top: 70, left: 110,
        display: 'flex', alignItems: 'center', gap: 14,
        opacity: op1,
      }}>
        <WillowMark size={28} />
        <div style={{
          fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 22,
          color: 'var(--ink)', letterSpacing: '-0.01em',
        }}>Willowbridge</div>
        <div style={{
          marginLeft: 10, paddingLeft: 18,
          borderLeft: '1px solid var(--rule)',
          fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-soft)',
          letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>Case Study №1</div>
      </div>

      {/* Hero */}
      <div style={{
        position: 'absolute', left: 110, top: 360,
        transform: `translateY(${drift}px)`,
      }}>
        <div style={{ opacity: op2 }}>
          <Hero size={150} lineHeight={0.98}>
            A month in
          </Hero>
        </div>
        <div style={{ opacity: op3, marginTop: 4 }}>
          <Hero size={150} lineHeight={0.98}>
            the life on <Em size={170}>Willowbridge.</Em>
          </Hero>
        </div>
      </div>

      {/* Subhead w/ practice */}
      <div style={{
        position: 'absolute', left: 112, bottom: 110,
        opacity: op4, fontFamily: 'var(--sans)',
        display: 'flex', alignItems: 'flex-end', gap: 60,
      }}>
        <div>
          <div style={{
            fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase',
            fontWeight: 600, color: 'var(--willow)', marginBottom: 10,
          }}>Willowcare Demo Practice</div>
          <div style={{ fontSize: 22, color: 'var(--ink-soft)', maxWidth: 760, lineHeight: 1.35 }}>
            Five providers. Two RN navigators. <span style={{ color: 'var(--ink)', fontWeight: 500 }}>~1,500 Medicare patients.</span>
            {' '}One worklist, one month — start to settled claim.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 32, marginBottom: 4 }}>
          <Stat n="248" l="CCM" />
          <Stat n="64" l="RPM" />
          <Stat n="18" l="BHI" />
          <Stat n="6" l="PCM" />
        </div>
      </div>
    </div>
  );
}

function Stat({ n, l }) {
  return (
    <div style={{ textAlign: 'left' }}>
      <div style={{
        fontFamily: 'var(--serif)', fontStyle: 'italic',
        fontSize: 44, color: 'var(--willow-deep)', lineHeight: 1,
      }}>{n}</div>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 11,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--ink-soft)', marginTop: 4,
      }}>{l}</div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// SCENE 2 — Worklist (marketing-style "Today's patients" mock)
// ───────────────────────────────────────────────────────────────────────────
const WORKLIST_PATIENTS = [
  {
    initials: 'EM', tone: 'peach',
    name: 'Eleanor Cromwell', age: 83,
    status: 'CALL DUE',         statusTone: 'alert',
    meta: 'HTN · HF · DM-II — overdue by 1 day',
    metric: '14',   metricUnit: '/ 20 min',
    progress: 0.7,  progressTone: 'alert',
    action: 'Place call',  actionTone: 'alert',
  },
  {
    initials: 'RT', tone: 'slate',
    name: 'Robert Halpern', age: 79,
    status: 'REVIEW DUE',       statusTone: 'steel',
    meta: 'Care plan annual review by May 22',
    metric: '8',    metricUnit: '/ 20 min',
    progress: 0.4,  progressTone: 'steel',
    action: 'Open chart',  actionTone: 'primary',
  },
  {
    initials: 'BL', tone: 'sage',
    name: 'Beatrice Liu', age: 69,
    status: 'RPM SETUP',        statusTone: 'teal',
    meta: 'BP cuff paired — needs 16 days of readings',
    metric: '3',    metricUnit: '/ 16 days',
    progress: 0.19, progressTone: 'teal',
    action: 'Pair device', actionTone: 'teal',
  },
  {
    initials: 'JF', tone: 'blue',
    name: 'Jorge Fuentes', age: 74,
    status: 'READY TO BILL',    statusTone: 'primary',
    meta: 'Signed by Dr. Velasquez · 22 min documented',
    metric: '22',   metricUnit: '/ 20 min',
    progress: 1.0,  progressTone: 'primary',
    action: 'Submit 99490',  actionTone: 'primary',
  },
];

function Scene2_Worklist() {
  const t = useTime();
  const start = 7, end = 19;
  if (t < start || t > end) return null;
  const lt = t - start;

  // Counter ramp 0 → 37
  const count = Math.round(rampNumber(lt, 0.4, 1.4, 0, 37));

  // Live encounter timer in the banner (Eleanor — running). Ticks slowly so
  // it reads as live without racing past the hour.
  const banTotalSec = 24 * 60 + 42 + Math.floor(lt * 1.4);
  const banM = Math.floor(banTotalSec / 60);
  const banS = banTotalSec % 60;
  const bannerTime = `${String(banM).padStart(2,'0')}:${String(banS).padStart(2,'0')}`;

  // Rows stagger
  const rowOps = WORKLIST_PATIENTS.map((_, i) =>
    animate({ from: 0, to: 1, start: 1.6 + i * 0.22, end: 2.0 + i * 0.22, ease: Easing.easeOutCubic })(lt)
  );

  // Highlight READY TO BILL row at ~6s
  const billHi = animate({ from: 0, to: 1, start: 6.4, end: 7.4, ease: Easing.easeOutCubic })(lt);
  // Envelope fly-out after highlight
  const fly = animate({ from: 0, to: 1, start: 7.8, end: 9.4, ease: Easing.easeInOutCubic })(lt);

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

  // Mock dimensions (browser-frame card, right-aligned next to story column)
  const mockX = 540, mockY = 170, mockW = 1300;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />
      <BrandStamp caption="Week 1 · Monday morning · /worklist" sceneNo={1} totalScenes={8} />

      {/* Left rail: the storytelling overlay */}
      <div style={{
        position: 'absolute', left: 80, top: 210, width: 420,
        fontFamily: 'var(--sans)',
      }}>
        <div style={{
          fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase',
          fontWeight: 600, color: 'var(--willow)', marginBottom: 16,
        }}>One worklist</div>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 20,
        }}>
          <div style={{
            fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 132, color: 'var(--ink)', lineHeight: 0.92,
            fontVariantNumeric: 'tabular-nums',
          }}>{count}</div>
          <div style={{
            fontFamily: 'var(--sans)', fontSize: 22,
            color: 'var(--ink-soft)', lineHeight: 1.2,
          }}>patients this<br />morning</div>
        </div>
        <div style={{
          fontSize: 18, color: 'var(--ink-soft)', lineHeight: 1.5,
          maxWidth: 380,
        }}>
          Mara's panel sorted, routed, and{' '}
          <span style={{ color: 'var(--ink)', fontWeight: 500 }}>ready</span>{' '}
          before she opens the app. One billable item is already past the floor.
        </div>
      </div>

      {/* Browser-framed mock */}
      <div style={{
        position: 'absolute', left: 540, top: 170, width: 1280,
        background: '#fff',
        borderRadius: 18,
        border: '1px solid var(--wb-rule)',
        boxShadow: '0 40px 90px -40px rgba(14,28,48,0.30)',
        overflow: 'hidden',
      }}>
        <BrowserChrome url="demo.willowbridge.app/patients/edith-marsh" />

        {/* Encounter banner */}
        <EncounterBanner
          timer={bannerTime}
          title="Encounter in progress · Eleanor Cromwell"
          subtitle="Phone · CCM · started 10:18a"
        />

        {/* Today's patients */}
        <div style={{ padding: '28px 32px 32px' }}>
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            marginBottom: 22, gap: 24,
          }}>
            <div style={{
              fontFamily: 'var(--serif)', fontSize: 30, color: 'var(--ink)',
              fontWeight: 400, letterSpacing: '-0.01em',
              whiteSpace: 'nowrap',
            }}>Today's patients</div>
            <div style={{
              fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-mute)',
              whiteSpace: 'nowrap',
            }}>
              12 on your panel · Mon · May 17
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {WORKLIST_PATIENTS.map((p, i) => (
              <PatientRow
                key={p.name}
                p={p}
                op={rowOps[i]}
                highlight={i === 3 ? billHi : 0}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Envelope fly: claim leaves on submit */}
      {fly > 0 && (
        <div style={{
          position: 'absolute',
          left: mockX + mockW - 220 + 320 * fly,
          top: mockY + 740 - 380 * fly,
          opacity: 1 - fly * 0.3,
          transform: `rotate(${-10 * fly}deg) scale(${1 + fly * 0.3})`,
          pointerEvents: 'none',
        }}>
          <S2FileTag label="charge · athena Charge API" />
        </div>
      )}

      {/* Right-side caption */}
      {billHi > 0.1 && lt < 11.5 && (
        <div style={{
          position: 'absolute', left: 80, top: 730, width: 380,
          opacity: billHi * (lt > 10.5 ? Math.max(0, 1 - (lt - 10.5)) : 1),
          fontFamily: 'var(--sans)',
        }}>
          <div style={{
            fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase',
            fontWeight: 600, color: 'var(--willow)', marginBottom: 10,
          }}>Sign off · 99490</div>
          <div style={{ fontSize: 20, lineHeight: 1.4, color: 'var(--ink-soft)' }}>
            One tap. A structured charge to athena and a signed evidence packet{' '}
            <span style={{ color: 'var(--ink)', fontWeight: 500 }}>leave together.</span>
          </div>
        </div>
      )}
    </div>
  );
}

function PatientRow({ p, op = 1, highlight = 0 }) {
  return (
    <div style={{
      opacity: op,
      transform: `translateY(${(1 - op) * 10}px)`,
      display: 'grid',
      gridTemplateColumns: '76px 1fr 260px 160px',
      alignItems: 'center',
      gap: 22,
      padding: '20px 24px',
      background: '#fff',
      border: `1px solid ${highlight > 0.1 ? 'rgba(25,41,74,0.30)' : '#e6ecf3'}`,
      borderRadius: 14,
      boxShadow: highlight > 0.1
        ? `0 12px 30px -16px rgba(25,41,74,${0.18 + highlight * 0.16})`
        : '0 1px 0 rgba(14,28,48,0.02)',
      transition: 'none',
    }}>
      <PatientAvatar initials={p.initials} tone={p.tone} size={52} />

      <div style={{ minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 6 }}>
          <span style={{
            fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink)',
            fontWeight: 400, letterSpacing: '-0.005em', whiteSpace: 'nowrap',
          }}>{p.name}</span>
          <span style={{
            fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink-mute)',
            whiteSpace: 'nowrap',
          }}>· {p.age}</span>
          <span style={{ marginLeft: 4 }}>
            <StatusPill tone={p.statusTone}>{p.status}</StatusPill>
          </span>
        </div>
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-soft)',
          marginTop: 6,
        }}>
          {p.meta}
        </div>
      </div>

      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, justifyContent: 'flex-end' }}>
          <span style={{
            fontFamily: 'var(--serif)', fontSize: 36, color: 'var(--ink)',
            fontWeight: 400, fontVariantNumeric: 'tabular-nums',
          }}>{p.metric}</span>
          <span style={{
            fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-mute)',
          }}>{p.metricUnit}</span>
        </div>
        <div style={{ marginTop: 6, display: 'flex', justifyContent: 'flex-end' }}>
          <MiniProgress value={p.progress} max={1} tone={p.progressTone} width={150} />
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <ActionButton tone={p.actionTone}>{p.action}</ActionButton>
      </div>
    </div>
  );
}

function S2FileTag({ label }) {
  return (
    <div style={{
      padding: '10px 16px', background: '#fff', border: '1.5px solid var(--ink)', borderRadius: 8,
      fontFamily: 'var(--mono)', fontSize: 13, fontWeight: 600, color: 'var(--ink)',
      boxShadow: '0 12px 30px -10px rgba(0,0,0,0.30)',
      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>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// SCENE 3 — Encounter timer + Document-call panel (Aisha & Eleanor)
// ───────────────────────────────────────────────────────────────────────────
function Scene3_Encounter() {
  const t = useTime();
  const start = 19, end = 32;
  if (t < start || t > end) return null;
  const lt = t - start;

  // Phase plan (local):
  // 0.0 – 1.0  : reveal chart with running encounter banner
  // 1.0 – 3.4  : timer ticks up to ~02:24 (recording, banner blue)
  // 3.4 – 5.4  : cursor leaves chart → timer FREEZES, banner flips to PAUSED
  // 5.4 – 7.4  : cursor returns, timer resumes to ~04:10
  // 7.4 – 12.0 : Document-call panel ticks: Yes → topic chips fill → encounter ≥ 20 confirm

  // Timer logic
  const baseTime = (() => {
    if (lt < 1.0) return 0;
    if (lt < 3.4) return (lt - 1.0) * 60;
    if (lt < 5.4) return 2.4 * 60;
    if (lt < 7.6) return 2.4 * 60 + (lt - 5.4) * 50;
    return 2.4 * 60 + 2.2 * 50;
  })();
  const isPaused = lt >= 3.4 && lt < 5.4;

  const fmtTime = (secs) => {
    const m = Math.floor(secs / 60);
    const s = Math.floor(secs % 60);
    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  };

  // Document-call panel timeline
  const panelPop = animate({ from: 0, to: 1, start: 0.6, end: 1.4, ease: Easing.easeOutCubic })(lt);
  const yesT     = animate({ from: 0, to: 1, start: 1.5, end: 1.9, ease: Easing.easeOutCubic })(lt);
  const chip1    = animate({ from: 0, to: 1, start: 2.4, end: 2.8, ease: Easing.easeOutCubic })(lt);
  const chip2    = animate({ from: 0, to: 1, start: 3.0, end: 3.4, ease: Easing.easeOutCubic })(lt);
  const chip3    = animate({ from: 0, to: 1, start: 6.0, end: 6.4, ease: Easing.easeOutCubic })(lt);
  const noteT    = animate({ from: 0, to: 1, start: 7.2, end: 8.2, ease: Easing.easeOutCubic })(lt);
  const confT    = animate({ from: 0, to: 1, start: 9.0, end: 9.8, ease: Easing.easeOutCubic })(lt);

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

  // Mock card geometry
  const mockX = 900, mockY = 350, mockW = 880;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />
      <BrandStamp caption="Week 1 · Tuesday · Aisha works her panel" sceneNo={2} totalScenes={8} />

      {/* Left column: storytelling */}
      <div style={{ position: 'absolute', left: 110, top: 200, width: 720 }}>
        <div style={{
          fontSize: 13, letterSpacing: '0.22em', textTransform: 'uppercase',
          fontWeight: 600, color: 'var(--willow)', marginBottom: 14,
        }}>Inside one encounter</div>
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 56, fontWeight: 500,
          color: 'var(--ink)', letterSpacing: '-0.02em', lineHeight: 1.05,
        }}>
          All three steps,{' '}
          <Em size={62}>during a single phone call.</Em>
        </div>
        <div style={{
          marginTop: 22, fontSize: 18, lineHeight: 1.5, color: 'var(--ink-soft)',
          maxWidth: 560,
        }}>
          The hardest part of CCM isn't the care — it's tracking the care in a way
          that's still defendable in November when the auditor asks about a claim
          from March. Here's what one encounter looks like from start to claim.
        </div>

        {/* Numbered steps */}
        <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 22, maxWidth: 600 }}>
          <NumberedStep n={1}
            title="Live timer attached to the work, not a Post-it."
            body={
              <>The timer starts when you click into a patient's chart, pauses when
              you switch contexts, and resumes when you return. Cumulative across
              the whole care team for the calendar month.</>
            }
            highlight={lt >= 3.4 && lt < 6} />
          <NumberedStep n={2}
            title="Topic chips that write the clinical narrative."
            body={
              <>Tap "medication adherence," "symptom check," "care coordination" —
              the note drafts itself from the patient's chart, vitals, and recent
              reading history. You edit prose, not blank pages.</>
            }
            highlight={lt >= 2.4 && lt < 7} />
          <NumberedStep n={3}
            title="Threshold awareness, always visible."
            body={
              <>A small reminder in the banner shows how close you are to 20 minutes
              for 99490, 40 for the +20 add-on, 60 for complex CCM. Never bill
              short. Never bill long without the modifier.</>
            }
            highlight={lt >= 9 && lt < 11} />
        </div>
      </div>

      {/* Right column: the Document-call mock card */}
      <div style={{
        position: 'absolute', left: mockX, top: mockY, width: mockW,
        opacity: panelPop, transform: `translateY(${(1 - panelPop) * 16}px)`,
        background: '#fff',
        border: '1px solid var(--wb-rule)',
        borderRadius: 18,
        boxShadow: '0 40px 90px -40px rgba(14,28,48,0.25)',
        overflow: 'hidden',
      }}>
        {/* Banner */}
        <EncounterBanner
          timer={fmtTime(baseTime)}
          title="Document call · Eleanor Cromwell"
          subtitle={`CCM 99490 · ${Math.floor(baseTime/60)} / 20 min`}
          paused={isPaused}
          action={isPaused ? 'Resume' : 'Save'}
        />

        {/* Body */}
        <div style={{ padding: '28px 32px 32px' }}>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)',
            letterSpacing: '0.04em', marginBottom: 18,
          }}>Time captured live · attached to encounter #EC-4421</div>

          {/* Outcome — full option set + labels match the product's
              CallPatientModal (and the index.html Call-outcome card). */}
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--ink-soft)', marginBottom: 10,
          }}>Outcome</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 22 }}>
            <RadioPill selected={yesT > 0.5}>Spoke with patient · counted</RadioPill>
            <RadioPill>Spoke with caregiver</RadioPill>
            <RadioPill>Left voicemail</RadioPill>
            <RadioPill>No answer</RadioPill>
            <RadioPill>Patient unavailable</RadioPill>
            <RadioPill>Wrong number</RadioPill>
            <RadioPill>Abandoned</RadioPill>
          </div>

          {/* Participants — matches the product's CallPatientModal */}
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--ink-soft)', marginBottom: 10,
          }}>Participants</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22 }}>
            <TopicChip checked={yesT > 0.5}>Patient</TopicChip>
            <TopicChip>+ Caregiver</TopicChip>
            <TopicChip>+ Family member</TopicChip>
            <TopicChip>+ Other clinician</TopicChip>
            <TopicChip>+ Interpreter</TopicChip>
          </div>

          {/* Topics */}
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--ink-soft)', marginBottom: 10,
          }}>Topics discussed</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22 }}>
            <TopicChip checked={chip1 > 0.5}>Medication adherence</TopicChip>
            <TopicChip checked={chip2 > 0.5}>Symptom check</TopicChip>
            <TopicChip>+ New labs</TopicChip>
            <TopicChip checked={chip3 > 0.5}>Care plan review</TopicChip>
            <TopicChip>+ Education</TopicChip>
            <TopicChip>+ Care coordination</TopicChip>
            <TopicChip>+ SDOH</TopicChip>
          </div>

          {/* Clinical note */}
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            marginBottom: 8,
          }}>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--ink-soft)',
            }}>Clinical note</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 12, color: 'var(--ink-mute)' }}>
              auto-templated · edit freely
            </div>
          </div>
          <div style={{
            border: '1px solid var(--wb-rule)',
            borderRadius: 8,
            padding: '14px 16px',
            fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink)',
            lineHeight: 1.55, minHeight: 90,
            background: '#fafbfd',
            opacity: 0.4 + 0.6 * noteT,
          }}>
            Medication adherence: Pt reports taking metformin 500mg BID and lisinopril
            10mg daily as prescribed.<br /><br />
            Symptom check: Mild ankle swelling improving since increased furosemide on 5/2.
            BP avg 141/85 over last 7 days, above goal 135/80 — discussed AM dosing. Daily
            weights; call if up 3 lb in 2 days.<br /><br />
            Care plan review: Reviewed and reaffirmed.
          </div>

          {/* Threshold confirmation */}
          <div style={{
            marginTop: 18, padding: '14px 18px',
            background: confT > 0.5 ? '#dbe5f2' : '#eef3fa',
            borderRadius: 10,
            display: 'flex', alignItems: 'center', gap: 14,
            opacity: 0.5 + 0.5 * Math.max(noteT, confT),
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: 28,
              background: '#19294a', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 7l3 3 5-6" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" /></svg>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--wb-primary)', lineHeight: 1.45 }}>
              {confT > 0.5
                ? <>This encounter will count toward <b>CCM 99490 (≥ 20 min)</b>. At <b>{fmtTime(baseTime)}</b> you've crossed the floor — claim is ready to queue.</>
                : <>This encounter will count toward <b>CCM 99490 (≥ 20 min)</b>. At <b>{fmtTime(baseTime)}</b> you're {Math.max(0, 20 - Math.floor(baseTime/60))} away — keep going or pick up next session.</>
              }
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Step row used in Scene 3 (numbered, body text, soft highlight) ──────────
function NumberedStep({ n, title, body, highlight = false }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '44px 1fr', gap: 18,
      padding: '8px 12px',
      borderRadius: 10,
      background: highlight ? 'rgba(30,58,100,0.06)' : 'transparent',
      transition: 'none',
    }}>
      <StepNum n={n} />
      <div>
        <div style={{
          fontFamily: 'var(--serif)', fontSize: 22,
          color: 'var(--ink)', letterSpacing: '-0.005em', marginBottom: 6,
        }}>{title}</div>
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 14.5,
          color: 'var(--ink-soft)', lineHeight: 1.5, maxWidth: 540,
        }}>{body}</div>
      </div>
    </div>
  );
}

// ── Radio-pill (outcome options; selected = navy bg w/ checkmark) ────────────
function RadioPill({ children, selected = false }) {
  return (
    <span style={{
      padding: '8px 16px',
      borderRadius: 999,
      border: `1px solid ${selected ? '#19294a' : 'var(--wb-rule)'}`,
      background: selected ? '#dbe5f2' : '#fff',
      color: selected ? '#19294a' : 'var(--ink-soft)',
      fontFamily: 'var(--sans)', fontSize: 13.5, fontWeight: 500,
      display: 'inline-flex', alignItems: 'center', gap: 6,
      whiteSpace: 'nowrap',
      transition: 'none',
    }}>
      {selected && <span style={{ fontFamily: 'var(--mono)' }}>√</span>}
      {children}
    </span>
  );
}

// ── Topic chip (checked = navy bg w/ checkmark; unchecked = bordered "+ X") ─
function TopicChip({ children, checked = false }) {
  return (
    <span style={{
      padding: '7px 14px',
      borderRadius: 999,
      border: `1px solid ${checked ? '#19294a' : 'var(--wb-rule)'}`,
      background: checked ? '#dbe5f2' : '#fff',
      color: checked ? '#19294a' : 'var(--ink-soft)',
      fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500,
      display: 'inline-flex', alignItems: 'center', gap: 6,
      whiteSpace: 'nowrap',
    }}>
      {checked && <span style={{ fontFamily: 'var(--mono)' }}>√</span>}
      {children}
    </span>
  );
}

function NoteBlock({ title, body, mono }) {
  return (
    <div style={{
      padding: '16px 20px',
      background: 'rgba(255,255,255,0.55)',
      border: '1px solid var(--rule-soft)',
      borderRadius: 10,
    }}>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 11,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--willow)', fontWeight: 600, marginBottom: 6,
      }}>{title}</div>
      <div style={{
        fontFamily: mono ? 'var(--mono)' : 'var(--sans)',
        fontSize: mono ? 13 : 15,
        color: 'var(--ink)', lineHeight: 1.4,
      }}>{body}</div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// SCENE 4 — RPM alerts + licensure gate (Devon)
// ───────────────────────────────────────────────────────────────────────────
function Scene4_RPM() {
  const t = useTime();
  const start = 32, end = 42;
  if (t < start || t > end) return null;
  const lt = t - start;

  // Alerts cascade in
  const alertOps = [0.6, 1.0, 1.4].map(s => animate({ from: 0, to: 1, start: s, end: s + 0.4, ease: Easing.easeOutBack })(lt));
  // Click Frank → expand
  const expand = animate({ from: 0, to: 1, start: 3.0, end: 3.8, ease: Easing.easeOutCubic })(lt);
  // Resolve flip
  const resolve = animate({ from: 0, to: 1, start: 5.4, end: 6.0, ease: Easing.easeOutCubic })(lt);
  // Licensure gate flash
  const licensure = animate({ from: 0, to: 1, start: 6.6, end: 7.2, ease: Easing.easeOutBack })(lt);
  const hardBlock = animate({ from: 0, to: 1, start: 7.6, end: 8.1, ease: Easing.easeOutCubic })(lt);

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

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />
      <BrandStamp caption="Week 1 · Wednesday · Devon triages RPM" sceneNo={3} totalScenes={8} />

      <SceneTitle
        kicker="The RPM panel"
        title={<>Three reds in the queue.<br/><Em size={62}>One licensure gate.</Em></>}
        x={110} y={150}
      />

      {/* Alert queue panel — mirrors demo.willowbridge.app/rpm/alerts */}
      <div style={{
        position: 'absolute', left: 110, top: 390, width: 1080,
        background: 'var(--wb-bg)',
        border: '1px solid var(--wb-rule)',
        borderRadius: 14,
        padding: '22px 26px 24px',
        boxShadow: '0 30px 70px -40px rgba(14,28,48,0.25)',
      }}>
        {/* Header */}
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--wb-ink-3)', marginBottom: 6,
        }}>Remote patient monitoring</div>
        <div style={{
          fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 28,
          color: 'var(--wb-ink)', letterSpacing: '-0.01em', marginBottom: 4,
        }}>Alert queue</div>
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--wb-ink-3)',
          marginBottom: 14,
        }}>
          Daily-monitoring inbox. Severity-sorted: <strong style={{ color: 'var(--wb-alert)' }}>red</strong> requires immediate response,{' '}
          <strong style={{ color: '#9a7d4a' }}>yellow</strong> is same-business-day, <strong style={{ color: 'var(--wb-ink-3)' }}>gray</strong> is trend-only.
        </div>

        {/* Filter chip row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
          <FilterChip active>Open + Acknowledged</FilterChip>
          <FilterChip>Open only</FilterChip>
          <FilterChip>Resolved</FilterChip>
          <FilterChip active>All severities</FilterChip>
          <FilterChip dotColor="var(--wb-alert)">Red</FilterChip>
          <FilterChip dotColor="#c9a85a">Yellow</FilterChip>
          <FilterChip dotColor="var(--wb-ink-4)">Gray</FilterChip>
          <div style={{
            marginLeft: 'auto',
            padding: '7px 14px',
            background: '#fff',
            border: '1px solid var(--wb-rule-strong)',
            borderRadius: 8,
            fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--wb-ink-2)',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            All billing providers · whole practice
            <svg width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        </div>

        {/* Severity bucket cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 14 }}>
          <SeverityBucket label="RED" count={3} bg="var(--wb-alert-soft)" fg="var(--wb-alert)" />
          <SeverityBucket label="YELLOW" count={0} bg="#eceae2" fg="#9a7d4a" />
          <SeverityBucket label="GRAY" count={0} bg="#e6e9ee" fg="var(--wb-ink-3)" />
        </div>

        {/* Alert cards — screenshot-style rows */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <QueueAlertCard
            op={alertOps[0]}
            name="Robles, Frank"
            mrn="SHOW-0042"
            stateLabel="monitoring in TX"
            headline="Blood pressure 168/94 above target"
            reading="168/94 mmHg"
            readingAt="5/13/2026, 7:14:00 AM"
            ackAt="5/13/2026, 7:28:12 AM"
            ackBy="Devon Navigator"
            resolved={resolve}
            expanded={expand}
          />
          <QueueAlertCard
            op={alertOps[1]}
            name="Okafor, Margaret"
            mrn="SHOW-0043"
            stateLabel="monitoring in TX"
            headline="Fasting glucose 312 mg/dL above target"
            reading="312 mg/dL"
            readingAt="5/13/2026, 6:42:00 AM"
            ackAt="5/13/2026, 7:31:04 AM"
            ackBy="Devon Navigator"
          />
          <QueueAlertCard
            op={alertOps[2]}
            name="Velasquez, Anita"
            mrn="SHOW-0044"
            stateLabel="monitoring in TX"
            headline="Weight +4.3 lb in 48h · CHF decomp rule"
            reading="+4.3 lb"
            readingAt="5/12/2026 → 5/14/2026"
            ackAt="5/13/2026, 7:33:21 AM"
            ackBy="Devon Navigator"
          />
        </div>
      </div>

      {/* Right column: licensure gate (overlay card that slides in over the queue's right edge) */}
      <div style={{ position: 'absolute', left: 1220, top: 470, width: 580, zIndex: 5 }}>
        {/* Interactive communication form (visible after expand) */}
        <div style={{
          opacity: expand,
          padding: '24px 28px',
          background: '#fff',
          border: '1.5px solid var(--rule)',
          borderRadius: 14,
          boxShadow: '0 20px 50px -28px rgba(14,28,48,0.30)',
        }}>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 11,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--willow)', fontWeight: 600, marginBottom: 12,
          }}>RPM · Interactive communication</div>
          <div style={{ fontSize: 20, fontWeight: 500, color: 'var(--ink)', marginBottom: 14 }}>
            Robles, Frank · medication reconciliation
          </div>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.5,
            background: 'var(--paper)', padding: '14px 16px', borderRadius: 8,
          }}>
            <div>cuff_position: confirmed</div>
            <div>rested_5min: yes</div>
            <div>adherence: <span style={{ color: 'var(--danger)' }}>out of lisinopril × 2 days</span></div>
            <div>action: refill order → PCP · follow-up BP tomorrow AM</div>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--rule-soft)',
          }}>
            <Pill tone="willow">8 min · rolling-30 → 99457</Pill>
            <div style={{ display: 'flex', gap: 8 }}>
              <Pill tone={resolve > 0.5 ? 'ok' : 'amber'} size="sm">
                {resolve > 0.5 ? 'resolved' : 'acknowledged'}
              </Pill>
            </div>
          </div>

          {/* Licensure attestation strip */}
          <div style={{
            marginTop: 16,
            padding: '12px 16px',
            background: 'var(--willow-bg)',
            border: `1.5px solid ${licensure > 0.5 ? 'var(--willow)' : 'var(--willow-soft)'}`,
            borderRadius: 10,
            display: 'flex', alignItems: 'center', gap: 14,
            opacity: licensure,
            transform: `scale(${0.96 + 0.04 * licensure})`,
          }}>
            <Shield size={28} color="var(--willow-deep)" />
            <div style={{ fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--willow-deep)' }}>
              <strong>Licensure attestation:</strong> Devon T. · RN · TX active ·
              <span style={{ fontFamily: 'var(--mono)', fontSize: 12, marginLeft: 8 }}>NPI 1467******</span>
            </div>
          </div>
        </div>

        {/* Hard block illustration */}
        {hardBlock > 0 && (
          <div style={{
            opacity: hardBlock,
            transform: `translateX(${(1 - hardBlock) * 30}px)`,
            marginTop: 22,
            padding: '20px 24px',
            background: 'var(--wb-alert-soft)',
            border: '1.5px dashed var(--wb-alert)',
            borderRadius: 12,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
              <Pill tone="danger" size="sm">if licensure missing</Pill>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 17, color: 'var(--ink)', lineHeight: 1.35 }}>
              Platform refuses the billable interactive communication.
              <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--danger)' }}>
                {' '}Hard block — structurally, not by policy.
              </span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function AlertCard({ op = 1, name, metric, value, unit, threshold, since, tone = 'amber', expanded = 0, resolved = 0, deviceDays }) {
  const toneMap = {
    danger: { bg: 'var(--wb-alert-soft)', border: 'var(--wb-alert)', accent: 'var(--wb-alert)' },
    amber:  { bg: 'var(--wb-steel-soft)', border: 'var(--wb-steel)', accent: 'var(--wb-steel)' },
  };
  const c = toneMap[tone];
  // Chart points (synthetic)
  const pts = tone === 'danger' ? [128, 132, 140, 138, 145, 152, 159, 168]
                                : [240, 232, 254, 248, 268, 290, 305, 312];
  return (
    <div style={{
      opacity: op,
      transform: `scale(${0.92 + 0.08 * op})`,
      padding: '20px 24px',
      background: c.bg,
      border: `1.5px solid ${c.border}`,
      borderRadius: 12,
      display: 'grid',
      gridTemplateColumns: '1fr 220px',
      gap: 18,
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
          <Pill tone={tone === 'danger' ? 'danger' : 'amber'} size="sm">{metric}</Pill>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)' }}>{since}</div>
        </div>
        <div style={{ fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 22, color: 'var(--ink)' }}>{name}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 8 }}>
          <span style={{
            fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 56, color: c.accent, lineHeight: 1,
          }}>{value}</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 14, color: 'var(--ink-soft)' }}>{unit}</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)', marginLeft: 10 }}>
            threshold {threshold}
          </span>
        </div>
        {deviceDays && (
          <div style={{ marginTop: 10 }}>
            <Pill tone="willow" size="sm">device-days {deviceDays}</Pill>
          </div>
        )}
      </div>
      <div style={{ alignSelf: 'center' }}>
        <MiniChart width={220} height={80} points={pts} color={c.accent} dotIndex={pts.length - 1} />
      </div>
    </div>
  );
}

// ── Alert queue helpers (Scene 4) — match the demo /rpm/alerts view ─────────
function FilterChip({ active = false, dotColor, children }) {
  return (
    <div style={{
      padding: '6px 12px',
      borderRadius: 7,
      background: active ? '#fff' : 'transparent',
      border: active ? '1.5px solid var(--wb-primary)' : '1px solid var(--wb-rule-strong)',
      fontFamily: 'var(--sans)', fontSize: 12.5,
      color: active ? 'var(--wb-primary)' : 'var(--wb-ink-2)',
      fontWeight: active ? 600 : 500,
      display: 'inline-flex', alignItems: 'center', gap: 6,
      whiteSpace: 'nowrap',
    }}>
      {dotColor && (
        <span style={{
          width: 8, height: 8, borderRadius: 8, background: dotColor,
          display: 'inline-block',
        }} />
      )}
      {children}
    </div>
  );
}

function SeverityBucket({ label, count, bg, fg }) {
  return (
    <div style={{
      background: bg,
      borderRadius: 10,
      padding: '14px 18px 16px',
    }}>
      <div style={{
        fontFamily: 'var(--sans)', fontSize: 11, fontWeight: 600,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: fg, opacity: 0.75, marginBottom: 6,
      }}>{label}</div>
      <div style={{
        fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 32,
        color: fg, lineHeight: 1, fontVariantNumeric: 'tabular-nums',
      }}>{count}</div>
    </div>
  );
}

function QueueAlertCard({
  op = 1, name, mrn, stateLabel, headline,
  reading, readingAt, ackAt, ackBy,
  resolved = 0, expanded = 0,
}) {
  // The top (first) card subtly highlights when Devon clicks it.
  const isActive = expanded > 0.1;
  return (
    <div style={{
      opacity: op,
      transform: `translateY(${(1 - op) * 6}px)`,
      background: '#fff',
      border: isActive
        ? `1.5px solid var(--wb-primary)`
        : `1px solid var(--wb-rule)`,
      borderRadius: 10,
      padding: '14px 18px',
      display: 'flex', alignItems: 'center', gap: 16,
      boxShadow: isActive
        ? `0 12px 28px -16px rgba(25,41,74,${0.18 + expanded * 0.18})`
        : 'none',
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        {/* line 1: RED badge · Name · MRN · state */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, flexWrap: 'wrap' }}>
          <span style={{
            padding: '2px 8px',
            background: 'var(--wb-alert-soft)',
            color: 'var(--wb-alert)',
            border: '1px solid rgba(185,79,93,0.3)',
            borderRadius: 5,
            fontFamily: 'var(--sans)', fontSize: 10.5, fontWeight: 700,
            letterSpacing: '0.12em',
          }}>RED</span>
          <span style={{
            fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 15.5, color: 'var(--wb-ink)',
          }}>{name}</span>
          <span style={{
            fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--wb-ink-3)',
          }}>MRN {mrn} · {stateLabel}</span>
        </div>
        {/* line 2: headline */}
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 500,
          color: 'var(--wb-ink)', marginBottom: 4,
        }}>{headline}</div>
        {/* line 3: reading */}
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--wb-ink-2)', marginBottom: 2,
        }}>
          <span style={{ fontWeight: 600 }}>Reading:</span>{' '}
          <span style={{ fontFamily: 'var(--mono)' }}>{reading}</span>{' '}
          at <span style={{ fontFamily: 'var(--mono)' }}>{readingAt}</span>
        </div>
        {/* line 4: acknowledged */}
        <div style={{
          fontFamily: 'var(--sans)', fontSize: 12, color: 'var(--wb-ink-3)',
        }}>
          Acknowledged <span style={{ fontFamily: 'var(--mono)' }}>{ackAt}</span> by {ackBy}
        </div>
      </div>

      {/* Resolve button */}
      <button style={{
        padding: '8px 18px',
        background: resolved > 0.5 ? 'var(--wb-steel-soft)' : 'var(--wb-primary)',
        color: resolved > 0.5 ? 'var(--wb-ink-2)' : '#fff',
        border: 'none',
        borderRadius: 7,
        fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500,
        cursor: 'pointer',
        whiteSpace: 'nowrap',
        transform: isActive && resolved < 0.5 ? `scale(${1 + Math.min(expanded, 1) * 0.04})` : 'scale(1)',
      }}>
        {resolved > 0.5 ? 'Resolved' : 'Resolve'}
      </button>
    </div>
  );
}

function Shield({ size = 24, color = 'var(--ink)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 2 L 4 5 V 12 C 4 17, 8 21, 12 22 C 16 21, 20 17, 20 12 V 5 Z"
            stroke={color} strokeWidth="1.6" strokeLinejoin="round" fill="none" />
      <path d="M8 12 l 3 3 5 -6" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ───────────────────────────────────────────────────────────────────────────
// SCENE 5 — AWV checklist + ACP (Dr. Janelle, Patricia W.)
// NOTE: Currently DORMANT — the AWV/ACP chapter is deactivated in
// case-study-1.jsx (SHOW_AWV_CHAPTER = false) because all clients are on
// athenahealth, where the AWV is completed inside athena. This component is
// intentionally left defined (and unused) so the chapter can be restored by
// flipping that flag. sceneNo stays 4; totalScenes tracks the live total (8).
// ───────────────────────────────────────────────────────────────────────────
function Scene5_AWV() {
  const t = useTime();
  const start = 42, end = 52;
  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);

  // Checklist items tick on staggered schedule between 0.8s and 5.0s
  const HRA = [
    'Health risk assessment update',
    'Medication review',
    'Cognitive screening',
    'Fall-risk assessment',
    'Depression screen (PHQ-2)',
    'Preventive-service schedule',
    'Functional status',
    'BMI / vitals',
    'Substance use review',
    'End-of-life preferences',
    'Personalized prevention plan',
  ];
  const tickStart = 0.9;
  const tickStep = 0.30;

  // ACP card lifts up at 5.6s
  const acpPop = animate({ from: 0, to: 1, start: 5.5, end: 6.3, ease: Easing.easeOutBack })(lt);
  // ACP minutes counter 0→22 from 6.0 to 7.6
  const acpMin = Math.round(rampNumber(lt, 6.0, 1.6, 0, 22));
  // POLST upload at 7.8s
  const polstPop = animate({ from: 0, to: 1, start: 7.6, end: 8.4, ease: Easing.easeOutBack })(lt);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: sceneOp }}>
      <PaperBG />
      <BrandStamp caption="Week 2 · Tuesday · Dr. Janelle's AWV schedule" sceneNo={4} totalScenes={8} />

      <SceneTitle
        kicker="Annual wellness visit · Patricia W., 76"
        title={<><Em size={62}>Subsequent</Em> AWV · G0439 · 8th annual.</>}
        x={110} y={150}
      />

      {/* Checklist card */}
      <div style={{
        position: 'absolute', left: 110, top: 380, width: 920,
        padding: '28px 32px',
        background: '#fff',
        border: '1px solid var(--rule)',
        borderRadius: 14,
        boxShadow: '0 20px 50px -30px rgba(14,28,48,0.25)',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 16,
        }}>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 11,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--willow)', fontWeight: 600,
          }}>HRA checklist · 11 items</div>
          <Pill tone="willow">G0439 · subsequent</Pill>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 28, rowGap: 12 }}>
          {HRA.map((item, i) => {
            const at = tickStart + i * tickStep;
            const checked = lt > at ? 1 : 0;
            const fade = clamp((lt - (at - 0.1)) / 0.3, 0, 1);
            return (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, opacity: 0.4 + 0.6 * fade }}>
                <Check size={20} checked={checked} />
                <span style={{ fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--ink)' }}>
                  {item}
                </span>
              </div>
            );
          })}
        </div>
        <div style={{
          marginTop: 18, paddingTop: 14,
          borderTop: '1px solid var(--rule-soft)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-mute)' }}>
            performed_by: Dr. Janelle R., MD · NPI 1538******
          </div>
          <Pill tone="ok" size="sm">11 / 11 captured</Pill>
        </div>
      </div>

      {/* ACP card (right column) */}
      <div style={{
        position: 'absolute', left: 1080, top: 380, width: 520,
        opacity: acpPop,
        transform: `translateY(${(1 - acpPop) * 26}px)`,
        padding: '24px 26px',
        background: 'var(--willow-deep)',
        color: '#fff',
        borderRadius: 14,
        boxShadow: '0 20px 60px -20px rgba(14,28,48,0.45)',
      }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--willow-soft)', fontWeight: 600, marginBottom: 12,
        }}>Advance care planning · 99497</div>
        <div style={{ fontSize: 22, lineHeight: 1.35, fontWeight: 400 }}>
          “My husband died last summer. I never updated my advance directive.”
        </div>
        <div style={{
          marginTop: 18, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.18)',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18,
        }}>
          <ACPField label="Minutes" value={
            <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 38 }}>{acpMin}</span>
          } />
          <ACPField label="Code status" value="DNR" />
          <ACPField label="Proxy" value="Daughter — Lila W." />
          <ACPField label="Present" value="Patient, MD" />
        </div>
      </div>

      {/* POLST artifact */}
      {polstPop > 0 && (
        <div style={{
          position: 'absolute', left: 1080, top: 760, width: 520,
          opacity: polstPop,
          transform: `translateY(${(1 - polstPop) * 16}px)`,
          padding: '16px 22px',
          background: '#fff',
          border: '1.5px solid var(--rule)',
          borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 16,
        }}>
          <div style={{
            width: 52, height: 64, borderRadius: 4,
            background: 'var(--paper)', border: '1px solid var(--rule)',
            position: 'relative', flexShrink: 0,
          }}>
            <div style={{ position: 'absolute', top: 6, right: 6, fontFamily: 'var(--mono)', fontSize: 8, color: 'var(--ink-mute)' }}>PDF</div>
            <div style={{ position: 'absolute', top: 18, left: 8, right: 8, height: 2, background: 'var(--rule-soft)' }} />
            <div style={{ position: 'absolute', top: 24, left: 8, right: 14, height: 2, background: 'var(--rule-soft)' }} />
            <div style={{ position: 'absolute', top: 30, left: 8, right: 10, height: 2, background: 'var(--rule-soft)' }} />
          </div>
          <div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 16, color: 'var(--ink)', fontWeight: 500 }}>
              POLST · signed
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-mute)', marginTop: 3 }}>
              uploaded · front desk scan · SHA-256 fingerprinted
            </div>
          </div>
          <div style={{ marginLeft: 'auto' }}>
            <Pill tone="ok" size="sm">legal artifact</Pill>
          </div>
        </div>
      )}
    </div>
  );
}

function ACPField({ label, value }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 10,
        letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'var(--willow-soft)', marginBottom: 4,
      }}>{label}</div>
      <div style={{ fontFamily: 'var(--sans)', fontSize: 18, color: '#fff' }}>{value}</div>
    </div>
  );
}

function Check({ size = 18, checked = 0 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18">
      <rect x="1" y="1" width="16" height="16" rx="4" fill={checked > 0.5 ? 'var(--willow)' : '#fff'} stroke={checked > 0.5 ? 'var(--willow)' : 'var(--rule)'} strokeWidth="1.4" />
      {checked > 0.5 && (
        <path d="M4.5 9 l 3 3 6 -7" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      )}
    </svg>
  );
}

Object.assign(window, {
  Scene1_Title, Scene2_Worklist, Scene3_Encounter, Scene4_RPM, Scene5_AWV,
});