// case-study-1.jsx — scroll-driven page that pins each scene and drives its
// internal animation via scroll progress.

// ── Scroll mechanics ────────────────────────────────────────────────────────

function useScrollProgress(ref) {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    if (!ref.current) return;
    let raf = null;
    const compute = () => {
      raf = null;
      const el = ref.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const range = r.height - vh;
      if (range <= 0) { setP(r.top <= 0 ? 1 : 0); return; }
      const next = clamp(-r.top / range, 0, 1);
      setP(next);
    };
    const onScroll = () => {
      if (raf == null) raf = requestAnimationFrame(compute);
    };
    compute();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf != null) cancelAnimationFrame(raf);
    };
  }, [ref]);
  return p;
}

// Track overall page scroll for top progress bar
function useDocumentScrollProgress() {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    let raf = null;
    const compute = () => {
      raf = null;
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setP(max > 0 ? clamp(window.scrollY / max, 0, 1) : 0);
    };
    const onScroll = () => { if (raf == null) raf = requestAnimationFrame(compute); };
    compute();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf != null) cancelAnimationFrame(raf);
    };
  }, []);
  return p;
}

// ── ScaledCanvas — scales the 1920×1080 canvas to fit the sticky viewport ──
function ScaledCanvas({ width = 1920, height = 1080, children }) {
  const wrap = React.useRef(null);
  const [scale, setScale] = React.useState(0.5);
  React.useEffect(() => {
    if (!wrap.current) return;
    const el = wrap.current;
    const measure = () => {
      const r = el.getBoundingClientRect();
      const s = Math.min(r.width / width, r.height / height);
      setScale(Math.max(0.05, s));
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    return () => ro.disconnect();
  }, [width, height]);
  return (
    <div ref={wrap} style={{
      width: '100%', height: '100%',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        width, height,
        flexShrink: 0,
        position: 'relative',
        transform: `scale(${scale})`,
        transformOrigin: 'center',
        background: 'var(--paper)',
        boxShadow: '0 30px 80px -40px rgba(11,31,31,0.30)',
        borderRadius: 14,
        overflow: 'hidden',
      }}>
        {children}
      </div>
    </div>
  );
}

// ── ScrollScene — wraps a scene component in a pinned scroll container
// and feeds it a time value derived from scroll progress.
function ScrollScene({ sceneStart, sceneEnd, totalDuration = 100, height = '260vh', children, caption }) {
  const ref = React.useRef(null);
  const progress = useScrollProgress(ref);
  // Pad slightly inside the scene's time window so we land
  // a hair after the entry fade starts and a hair before the exit fade ends.
  const dur = sceneEnd - sceneStart;
  const padIn = Math.min(0.4, dur * 0.04);
  const padOut = Math.min(0.4, dur * 0.04);
  const time = (sceneStart + padIn) + progress * (dur - padIn - padOut);

  const ctxValue = React.useMemo(
    () => ({ time, duration: totalDuration, playing: false, setTime: () => {}, setPlaying: () => {} }),
    [time, totalDuration]
  );

  return (
    <section ref={ref} className="pinned" style={{ height }}>
      <div className="pinned-sticky">
        <div className="pinned-canvas-wrap">
          <ScaledCanvas width={W} height={H}>
            <TimelineContext.Provider value={ctxValue}>
              {children}
            </TimelineContext.Provider>
          </ScaledCanvas>
        </div>
      </div>
      {caption && <div className="pinned-caption">{caption}</div>}
    </section>
  );
}

// ── Page chrome ─────────────────────────────────────────────────────────────

function TopNav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="https://www.willowbridge.app" className="nav-brand">
          <WillowMark size={22} />
          <span>Willowbridge</span>
          <span className="nav-crumb">Case Study №1</span>
        </a>
        <div className="nav-links">
          <a href="https://www.willowbridge.app/#how" className="nav-link-text">How it works</a>
          <a href="https://www.willowbridge.app/#programs" className="nav-link-text">Programs</a>
          <a href="https://www.willowbridge.app/#audit" className="nav-link-text">Audit defense</a>
          <a href="https://www.willowbridge.app/#roi" className="nav-link-text">ROI</a>
          <a href="#demo" className="cta">Book a demo</a>
        </div>
      </div>
    </nav>
  );
}

function ScrollProgressBar() {
  const p = useDocumentScrollProgress();
  return <div className="scroll-progress" style={{ transform: `scaleX(${p})`, width: '100%' }} />;
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-inner">
        <div className="kicker">Case Study №1 · A composite from the demo tenant</div>
        <h1 className="headline">
          A month in the life on <em>Willowbridge.</em>
        </h1>
        <p className="lede">
          One worklist, two RN navigators, ~1,500 Medicare patients — from Monday morning
          all the way to a settled claim and a clean audit. <em>Names and dollar amounts illustrative;</em>
          the workflow, billing rules, audit posture, and evidence requirements
          are exactly what every Willowbridge tenant uses.
        </p>
        <div className="hero-meta">
          <span className="pill">Read · 6 min</span>
          <span className="pill">7 chapters</span>
        </div>
        <div className="scroll-hint">
          <span>Scroll to begin</span>
          <svg width="12" height="14" viewBox="0 0 12 14" fill="none">
            <path d="M6 1 v 12 M1 8 l 5 5 5 -5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      </div>
    </section>
  );
}

function PracticeIntro() {
  return (
    <section className="editorial white">
      <div className="editorial-inner">
        <div className="practice">
          <div>
            <div className="kicker">The practice</div>
            <h2 className="headline" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '18px 0 40px', lineHeight: 1.18 }}>
              Willowcare <em>Demo Practice.</em>
            </h2>
            <div className="prose">
              <p>
                A typical five-provider primary-care clinic. Three physicians, one nurse practitioner,
                one physician assistant. Two RN navigators run the care-management caseload.
                <strong> Mara K.</strong> is the practice manager and the billing-side power user.
              </p>
              <p>
                Eight months on Willowbridge, installed from the athenahealth Marketplace.
                Charges hand off to athena at sign-off; athena bills as usual. Devices come
                from Tenovi and BodyTrace. What follows is one calendar month — May 2026 —
                through the eyes of the four people who actually do the work.
              </p>
            </div>
          </div>
          <aside className="practice-aside">
            <h3>The panel</h3>
            <dl>
              <div className="row"><dt>Patient panel</dt><dd>~1,500</dd></div>
              <div className="row"><dt>CCM caseload</dt><dd>248</dd></div>
              <div className="row"><dt>RPM</dt><dd>64</dd></div>
              <div className="row"><dt>BHI</dt><dd>18</dd></div>
              <div className="row"><dt>PCM</dt><dd>6</dd></div>
              <div className="row"><dt>EHR</dt><dd>athenahealth</dd></div>
              <div className="row"><dt>Billing</dt><dd>via athena (Charge API)</dd></div>
              <div className="row"><dt>On Willowbridge</dt><dd>8 months · athena Marketplace</dd></div>
            </dl>
          </aside>
        </div>

        <div className="cast-grid">
          <CastCard initials="AN" name="Aisha N., RN" role="Navigator · CCM, BHI"
            what="Owns ~140 chronic-care patients. Phones, charts, and bills the bulk of CCM and BHI minutes." />
          <CastCard initials="DT" name="Devon T., RN" role="Navigator · RPM, PCM"
            what="Owns the 64-patient RPM panel + 6 PCM cases. Triages every device alert." />
          <CastCard initials="JR" name="Dr. Janelle R., MD" role="Billing provider"
            what="Signs care plans, supervises navigators, performs ACP discussions." />
          <CastCard initials="MK" name="Mara K." role="Practice manager"
            what="Runs the worklist, watches the freeze, hands the month's charges to athena, owns the audit packet." />
        </div>
      </div>
    </section>
  );
}

function CastCard({ initials, name, role, what }) {
  return (
    <div className="cast-card">
      <div className="cast-avatar">{initials}</div>
      <div className="name">{name}</div>
      <div className="role">{role}</div>
      <div className="what">{what}</div>
    </div>
  );
}

// ── Chapter — a prose intro followed by a pinned visual ─────────────────────
function ChapterIntro({ num, kicker, title, lede, prose }) {
  return (
    <section className="chapter-intro">
      <div className="chapter-intro-inner">
        <div className="ch-num">Chapter {String(num).padStart(2, '0')} · {kicker}</div>
        <h2 className="headline">{title}</h2>
        <p className="lede">{lede}</p>
        {prose && <div className="prose" style={{ marginTop: 32, maxWidth: 720 }}>{prose}</div>}
      </div>
    </section>
  );
}

// ── Why it matters ──────────────────────────────────────────────────────────
function WhyItMatters() {
  return (
    <section className="editorial white" style={{ paddingTop: 140, paddingBottom: 140 }}>
      <div className="editorial-inner">
        <div className="kicker">Why this matters</div>
        <h2 className="headline" style={{ fontSize: 'clamp(44px, 5.5vw, 80px)', margin: '24px 0 32px', maxWidth: 900 }}>
          What this enables, <em>and what it makes impossible.</em>
        </h2>
        <p className="lede" style={{ maxWidth: 760 }}>
          The same machinery that lets Willowcare close a clean month also forecloses
          three classes of mistake that practices on spreadsheets and screenshots
          live with by default.
        </p>

        <div className="why-cols">
          <div className="why-col dont">
            <h3>Three things that <em>don't happen.</em></h3>
            <ul>
              <li>
                <span className="glyph">✕</span>
                <div>
                  <strong>Bill for time you didn't spend.</strong>
                  <div className="body">The encounter timer hard-pauses outside the chart. There is no manual "log minutes" field for navigators to fudge.</div>
                </div>
              </li>
              <li>
                <span className="glyph">✕</span>
                <div>
                  <strong>Freeze without complete evidence.</strong>
                  <div className="body">If the care plan is below the comprehensiveness floor, or the short-encounter acknowledgement is missing, the freeze refuses.</div>
                </div>
              </li>
              <li>
                <span className="glyph">✕</span>
                <div>
                  <strong>Edit or delete an audit log entry.</strong>
                  <div className="body">The chain is append-only and Ed25519-signed. A MAC can independently verify the export against our published public key.</div>
                </div>
              </li>
            </ul>
          </div>
          <div className="why-col do">
            <h3>Three things that <em>happen automatically.</em></h3>
            <ul>
              <li>
                <span className="glyph">✓</span>
                <div>
                  <strong>Every patient on the right cadence.</strong>
                  <div className="body">The worklist surfaces who is due, on which program, in which day of the cycle. Navigators don't have to remember.</div>
                </div>
              </li>
              <li>
                <span className="glyph">✓</span>
                <div>
                  <strong>Every claim ships with its evidence.</strong>
                  <div className="body">Signed consent, care-plan snapshot, time slices, interactive-comm log, NPI + licensure attestation. One zip away when the MAC asks.</div>
                </div>
              </li>
              <li>
                <span className="glyph">✓</span>
                <div>
                  <strong>The practice gets paid for what it did.</strong>
                  <div className="body">No more "we did 30 CCM visits and billed 12 because we forgot to track minutes." If the work happened, it freezes.</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function DemoCTA() {
  return (
    <section id="demo" className="demo-cta">
      <div className="editorial-inner">
        <div className="kicker" style={{ color: 'var(--sage)' }}>Book a demo</div>
        <h2 className="headline" style={{ marginTop: 24, maxWidth: 1000 }}>
          See Willowbridge in action. <em>20 minutes, no prep required.</em>
        </h2>
        <p className="lede">
          A live walkthrough with a Willowbridge clinical lead. We'll show you the
          worklist, the audit packet, and the billing flow on a demo tenant — no data
          of yours, no setup on your end. Bring your questions about programs,
          workflow, or fit.
        </p>
        <div className="actions">
          {/* Single source of truth for the demo form lives on the main
              site — link there instead of duplicating the form + Turnstile
              + JS handler on this page (which would risk the two drifting).
              The main site's #cta anchor scrolls straight to the form. */}
          <a href="https://willowbridge.app/#cta" className="cta-big">
            Book a 20-min demo →
          </a>
          <a href="https://www.willowbridge.app" className="secondary">or back to willowbridge.app</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="inner">
        <div>
          <div className="brand">
            <WillowMark size={22} color="var(--cream)" />
            Willowbridge
          </div>
          <p style={{ margin: 0, maxWidth: 360 }}>
            Care-management billing capture for Medicare practices. Built to capture
            the cognitive work of care — and to defend every minute of it.
          </p>
        </div>
        <div>
          <h4>Product</h4>
          <ul>
            <li><a href="https://www.willowbridge.app/#how">How it works</a></li>
            <li><a href="https://www.willowbridge.app/#programs">Programs</a></li>
            <li><a href="https://www.willowbridge.app/#audit">Audit defense</a></li>
            <li><a href="https://www.willowbridge.app/#roi">ROI</a></li>
          </ul>
        </div>
        <div>
          <h4>Case studies</h4>
          <ul>
            <li><a href="case-study-1.html">№1 · A month in the life</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="https://www.willowbridge.app/#security">Security</a></li>
            <li><a href="https://status.willowbridge.app">Status</a></li>
            <li><a href="mailto:founder@willowbridge.app">Contact</a></li>
          </ul>
        </div>
      </div>
      <div className="colophon">
        <span>© 2026 Willowcare, LLC · Made for Medicare practices.</span>
        <span>v4.2.1 · uptime 99.98%</span>
      </div>
    </footer>
  );
}

// ── Page composition ────────────────────────────────────────────────────────
//
// AWV (Annual Wellness Visit) chapter — TEMPORARILY DEACTIVATED.
// Every current client is on athenahealth, where the AWV is already completed
// inside athena, so the AWV/ACP chapter is hidden from the public case study
// for now. It may be re-added later. To RESTORE it:
//   1. Set SHOW_AWV_CHAPTER = true below (re-enables the Chapter 4 ChapterIntro
//      + its <ScrollScene><Scene5_AWV/></ScrollScene>; the Scene5_AWV component
//      is still fully defined in scenes-a.jsx, just unused while this is false).
//   2. In scenes-b.jsx, un-comment the `AWV G0438/9 · wellness visits` row in
//      FREEZE_ROWS (search "AWV G0438/9").
//   3. Bump the chapter/scene numbering of the chapters AFTER AWV back UP by 1
//      to their prior values (the deactivated AWV block keeps num={4}/sceneNo={4}):
//        - ChapterIntro num: Freeze 4→5, Handoff 5→6, Numbers 6→7, Audit 7→8.
//        - BrandStamp sceneNo: Freeze 4→5, Claims 5→6, Numbers 6→7, Audit 7→8.
//        - BrandStamp totalScenes: 8→9 everywhere (all 8 numbered stamps).
//   4. Update the Hero "chapters" pill / "8 chapters" copy back to "9".
const SHOW_AWV_CHAPTER = false;

function CaseStudyPage() {
  return (
    <>
      <ScrollProgressBar />
      <TopNav />

      <Hero />
      <PracticeIntro />

      {/* Chapter 1 — Worklist */}
      <ChapterIntro
        num={1}
        kicker="Week 1 · Monday morning"
        title={<>Mara opens <em>the worklist.</em></>}
        lede={<>One prioritized list absorbs the four old work-drivers — call-due, RPM setup, care-plan review, ready-to-submit. This Monday it shows thirty-seven items.</>}
        prose={<>
          <p>
            Twenty-one are <code>call_due</code> — CCM patients who haven't been touched
            this calendar month. Four are RPM setups still missing their 99453 initial
            encounter. Eight care plans cross their 90-day review window this week.
            Four are last month's leftovers — frozen periods sitting in
            <code> period_pending_signoff</code> waiting for Dr. Janelle.
          </p>
          <p>
            She routes the calls to Aisha and Devon, the setups to Devon, and pings
            Dr. Janelle on the four ready-to-sign periods. <em>Ninety seconds.</em>
            The signed periods will hand their charges to athena automatically the
            moment her signature lands.
          </p>
        </>}
      />
      <ScrollScene sceneStart={7} sceneEnd={19}>
        <Scene2_Worklist />
      </ScrollScene>

      {/* Chapter 2 — Encounter timer */}
      <ChapterIntro
        num={2}
        kicker="Week 1 · Tuesday"
        title={<>The timer runs <em>only when she's in the chart.</em></>}
        lede={<>Aisha clicks into Eleanor Cromwell's chart and the encounter timer starts. Two minutes later her email pings — she pops out to look. The timer freezes mid-second.</>}
        prose={<>
          <p>
            Eleanor is 83, CHF + HTN, last contact 22 days ago. Care plan signed by
            Dr. Janelle on April 12. Comprehensiveness floor: passed. Aisha calls;
            Eleanor is well; weights have been stable on the home scale.
            Aisha closes the encounter at 14 minutes — six short of the 20-minute
            99490 floor. The worklist will surface Eleanor again at day 28 if she
            hasn't been called.
          </p>
          <p>
            Two of today's calls were leave-a-voicemail attempts. Willowbridge's
            <strong> F-12 short-encounter gate</strong> caught both — any closed encounter
            under three minutes requires an explicit acknowledgement. <em>Yes, I really
            only spent two minutes.</em> The acknowledgement reason is captured in the
            audit log; the minutes still count toward the monthly total.
          </p>
        </>}
      />
      <ScrollScene sceneStart={19} sceneEnd={32} height="300vh">
        <Scene3_Encounter />
      </ScrollScene>

      {/* Chapter 3 — RPM */}
      <ChapterIntro
        num={3}
        kicker="Week 1 · Wednesday"
        title={<>Three readings out of range. <em>One block by structure.</em></>}
        lede={<>Devon's chart-open screen shows three new high-priority RPM alerts. He calls Frank first — and learns Frank ran out of lisinopril two days ago.</>}
        prose={<>
          <p>
            Frank R., 78, systolic 168 over a configured 160 threshold. Margaret O., 71,
            fasting glucose 312 over her 250 line. Anita V., 69, up 4.3 lb in 48 hours —
            the CHF decompensation rule on her RPM care plan.
          </p>
          <p>
            Devon documents the medication-reconciliation call in the structured
            interactive-communication field. Eight minutes, counting toward the rolling-30
            99457 floor. The platform's <strong>licensure gate</strong> checks Devon's RN against
            the patient's state of residence before letting the billable record post. <em>Match
            on file.</em> If it weren't, the platform would refuse — structurally, not by policy.
          </p>
        </>}
      />
      <ScrollScene sceneStart={32} sceneEnd={42}>
        <Scene4_RPM />
      </ScrollScene>

      {/* Chapter 4 — AWV / ACP — DEACTIVATED (see SHOW_AWV_CHAPTER above).
          Hidden because every current client is on athenahealth, where the AWV
          is completed inside athena. Code preserved verbatim; flip the flag to
          restore. When restoring, keep this block at num={4}/sceneNo={4} and
          bump the chapters below it back up by 1 (and totalScenes 8→9). */}
      {SHOW_AWV_CHAPTER && (
        <>
          <ChapterIntro
            num={4}
            kicker="Week 2 · Tuesday"
            title={<>The annual visit, <em>every element captured.</em></>}
            lede={<>Dr. Janelle has five Annual Wellness Visits on Tuesday. The HRA checklist knows which kind each one is — IPPE, Initial, or Subsequent — and enforces the right required elements.</>}
            prose={<>
              <p>
                Patricia W. is on her eighth annual: <code>G0439</code>, Subsequent AWV.
                Eleven items on the checklist. Health risk assessment, medication review,
                cognitive screening, fall risk, depression screen, preventive-service
                schedule, end-of-life preferences. Dr. Janelle ticks them off as the visit
                unfolds.
              </p>
              <p>
                Patricia mentions her husband died last summer; her advance directive is out
                of date. Dr. Janelle pivots into the ACP discussion — 22 minutes, captured as
                a billable <code>99497</code> with the content, who was present, and the patient's
                decision. The signed POLST Patricia brought in is uploaded; the chart now
                shows the legal artifact, the clinician attestation, and the structured ACP
                form — <em>explicitly disclaimered as distinct from the POLST itself.</em>
              </p>
            </>}
          />
          <ScrollScene sceneStart={42} sceneEnd={52}>
            <Scene5_AWV />
          </ScrollScene>
        </>
      )}

      {/* Chapter 4 — Freeze (was Chapter 5; renumbered after AWV deactivation) */}
      <ChapterIntro
        num={4}
        kicker="Week 3 · Friday afternoon"
        title={<>The month closes <em>on its own.</em></>}
        lede={<>It's the 27th. Mara opens the freeze report — a projected month-end state, per program, per patient, with the patients who are short of threshold called out by name.</>}
        prose={<>
          <p>
            Twelve CCM patients are short on minutes. Six RPM patients have device-days
            below 16. Two BHI patients have no contact this month. There are three days
            left; Aisha and Devon can still get most of them over the line.
          </p>
          <p>
            At <strong>23:00 UTC on the 31st</strong>, the nightly job fires. Every calendar-month
            period closes. RPM rolling-30 cycles freeze in their own per-patient windows.
            Every frozen period carries its evidence packet, ready for sign-off and
            the athena handoff. <em>The month is done before anyone arrives Monday.</em>
          </p>
        </>}
      />
      <ScrollScene sceneStart={52} sceneEnd={63}>
        <Scene6_Freeze />
      </ScrollScene>

      {/* Chapter 5 — Handoff to athena (was Chapter 6; renumbered after AWV deactivation) */}
      <ChapterIntro
        num={5}
        kicker="Week 4 · The 1st"
        title={<>Two hundred and eighty-seven charges, <em>one handoff.</em></>}
        lede={<>Mara opens her sign-off queue. Two hundred eighty-seven frozen billing periods sit ready — the month's CCM, RPM, BHI, PCM stacks plus the ACP visits that froze event-driven earlier.</>}
        prose={<>
          <p>
            Eligibility is already current — Willowbridge reads it from athena, so the
            twelve patients whose coverage Mara would have re-verified by hand are
            already showing active. One came back showing Medicare Advantage as
            primary — was traditional fee-for-service when last checked. Willowbridge
            surfaces the discrepancy and routes the charge to the MA payer through athena.
          </p>
          <p>
            <strong>Confirm sign-off.</strong> Two hundred eighty-seven structured charges flow
            to athena's Charge API — CPT, units, dx pointers, rendering provider, place
            of service, all already on each line. Within minutes, athena returns the
            charge ids and the billing periods flip to <em>handed off</em>. From there
            athena's existing payer connections, posting, and reconciliation do what
            they do every day. <em>Over the next ten days, the practice's athena Posting
            dashboard fills with $21,840 paid in full.</em>
          </p>
        </>}
      />
      <ScrollScene sceneStart={63} sceneEnd={74} height="280vh">
        <Scene7_Claims />
      </ScrollScene>

      {/* Chapter 6 — Numbers (was Chapter 7; renumbered after AWV deactivation) */}
      <ChapterIntro
        num={6}
        kicker="End of month"
        title={<>What we did, <em>finally counted.</em></>}
        lede={<>The practice booked $22,940 in CMS revenue this month — care-management codes that simply weren't being captured before. athena handles the billing exactly as it already does; Willowbridge's fee is a small per-billable-period charge on top, only on the patients that qualified.</>}
        prose={<>
          <p>
            athena collects and posts the reimbursement — the CCM dollars land in the same
            account every other dollar already does, through the billing setup the practice
            already runs. The one thing that's new is Willowbridge's fee: a small per-patient
            charge that applies only when a patient qualifies and the period is signed off —
            a small slice of each billable claim, never a cut of the reimbursement.
          </p>
          <p>
            The case for the platform is the revenue itself — the CCM, RPM, BHI, and PCM
            lines that most practices leave on the table because the documentation lift is too
            heavy to do by hand. Willowbridge captures the work, athena bills it, the practice
            keeps it.
          </p>
        </>}
      />
      <ScrollScene sceneStart={74} sceneEnd={84} height="260vh">
        <Scene8_Numbers />
      </ScrollScene>

      {/* Chapter 7 — Audit (was Chapter 8; renumbered after AWV deactivation) */}
      <ChapterIntro
        num={7}
        kicker="Two weeks later"
        title={<>The MAC asked. <em>We answered in one click.</em></>}
        lede={<>A Medicare Administrative Contractor sends a documentation request on twelve of last month's CCM claims. Signed consents, care plans, interactive-communication logs.</>}
        prose={<>
          <p>
            Mara opens <code>/audit → Generate documentation packet</code>. She selects the twelve
            patient IDs and the relevant billing periods. Willowbridge produces a single
            zip: twelve signed consent PDFs with portal e-signature timestamps and IPs,
            twelve immutable care-plan snapshots pinned to the freeze date, twelve monthly
            billing notes SHA-256 fingerprinted, twelve audit-log slices in ndjson signed
            with Ed25519, and a README explaining how to verify the signatures against
            the published public key.
          </p>
          <p>
            She forwards the packet. Two weeks later, all twelve claims are <em>upheld.
            No clawback.</em>
          </p>
        </>}
      />
      <ScrollScene sceneStart={84} sceneEnd={93} height="240vh">
        <Scene9_Audit />
      </ScrollScene>

      <WhyItMatters />
      <DemoCTA />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CaseStudyPage />);
