/* global React */
// PDF / print artboard — The Medical Decision Roadmap.
// 8.5x11" pages (612x792 @72dpi). Full document: cover, contents, intro,
// all seven questions (each an opener page + a case page), and conclusion.
// Copy source of truth: RoadmapReadOnWeb.jsx / uploads/Lead Magnet 1 - The Medical Decision Roadmap v2.md

const PAGE_W = 612;
const PAGE_H = 792;
const INK = "var(--carte-text)";
const MUTE = "var(--carte-text-muted)";

const CHAPTERS = [
  {
    n: "I", tag: "On diagnosis",
    title: "Has the true underlying condition been diagnosed, or is the treatment based on faulty assumptions?",
    body: [
      "A treatment plan is only as sound as the diagnosis it sits on. And diagnoses, in practice, often arrive faster than they&rsquo;re earned: a specialist focuses on the part of the picture they were asked to look at; a report sounds authoritative; a default pathway gets initiated. From that point forward, every subsequent decision builds on a foundation no one re-tests.",
      "If the foundation is wrong, the whole stack tips.",
    ],
    caseTitle: "Marilyn",
    caseLine: "LATE SIXTIES &middot; GALLBLADDER POLYP &middot; SURGERY SCHEDULED",
    caseBody: [
      "Marilyn was scheduled for gallbladder surgery. The reason her surgeon gave: a polyp in her gallbladder had grown from 8 millimeters to 10 millimeters across three years of imaging, and growth is the radiographic feature that pushes a polyp toward concern for malignancy and thus toward surgical removal.",
      "The argument was framed to her as universal best practice. The surgeon was experienced and gallbladder removal relatively low risk; late stage gallbladder cancer catastrophic. Marilyn didn&rsquo;t want surgery, but the case for it had been made. When Carte reviewed her ultrasound reports, something didn&rsquo;t fit. The most recent report — the one with the 10-millimeter measurement — also contained the phrase <em>stable in appearance.</em> Stable, yet grown by 2 millimeters?",
      "We pulled the original images and asked the radiologist to re-measure all three years side by side. Once imaging technique and plane of the mass had been taken into account, all three years showed a polyp at 10 millimeters. The earlier &ldquo;8 millimeter&rdquo; measurements had been taken in different planes, by different radiologists, on different machines. The polyp had not grown. It had simply been measured differently. A gallbladder mass that hasn&rsquo;t grown at all in 3 years is overwhelmingly not consistent with cancer. The recommendation for surgery dissolved.",
    ],
    lesson: "Before agreeing to any treatment plan, ask whether the diagnosis driving it is built on evidence or on a chain of plausible assumptions. The report is a summary of someone else&rsquo;s interpretation. The data is what the report is summarizing. Ask to see the data.",
  },
  {
    n: "II", tag: "On integration",
    title: "In a setting of multiple specialists providing input, is anyone explicitly responsible for seeing and reconciling the whole picture?",
    body: [
      "Specialists are extraordinary at the parts of medicine they specialize in. They are not, by training or by incentive, in the business of integrating their answer with the answers other specialists are giving the same patient at the same time.",
      "The patient sits at the center of a wheel of specialists, each looking inward at her from their own angle. Someone has to step back from the wheel.",
    ],
    caseTitle: "Richard",
    caseLine: "SIXTIES &middot; LAWYER &middot; LIMITED TO A WALKER AFTER A FALL",
    caseBody: [
      "Richard had obesity, leg edema, and back pain that had worsened since a fall. He had been referred to two surgical specialists. The spinal surgeon recommended spinal surgery. The bariatric surgeon recommended bariatric surgery. Each was acting reasonably within his domain.",
      "What neither had told him was the answer to the question that actually mattered to Richard: would surgery, either surgery, meaningfully restore his mobility?",
      "When Carte interviewed each surgeon directly, both said the same thing: probably not. That answer didn&rsquo;t appear in either consult note because neither had been asked the integrating question.",
      "We built a non-surgical plan instead: optimized GLP-1 therapy, a tailored physical therapy regimen, diuretic management. Richard lost more than 70 pounds, regained the ability to walk with a cane, and is on track to walk unassisted again. The two operations he was about to consent to — neither would have done that for him.",
    ],
    lesson: "When you are seeing multiple specialists, ask explicitly: <em>who, in this group, is responsible for integrating your specific answers into a single coherent recommendation for me?</em> If everyone you ask points at someone else — no one is.",
  },
  {
    n: "III", tag: "On the original data",
    title: "Have we rigorously re-examined the original data, such as images, pathology slides, and lab data, or are we relying on someone else’s reviews?",
    body: [
      "The medical record runs on summaries. A radiologist looks at an MRI and writes a report. The next physician looks at the report. The third looks at a note that mentions the report. By the third level, the underlying data is two abstractions away from the decision being made.",
      "Most of the time this is fine. But when something doesn&rsquo;t fit — a contradiction in the chart, a measurement at the threshold of an action, a borderline pathology read — the worst thing you can do is trust the summary instead of investigating.",
    ],
    caseTitle: "Marilyn, again",
    caseLine: "THE CASE QUESTION III RESOLVED",
    caseBody: [
      "Three years of ultrasound reports. Three radiologists. Three numbers: 8mm, 8mm, 10mm. A surgical recommendation built on the apparent jump from 8 to 10.",
      "The reports were the abstraction. The images were the data. When we asked the radiologist to set aside the reports and re-measure the actual images side by side using identical technique, the data said the polyp had not grown.",
      "The chart had been wrong for a year, and nobody was at fault. Each radiologist had measured carefully on the day of the study. Every report was, on its own, defensible work. The error was that no one had ever set the three reports and the three image sets side by side to ask whether the trend was actually a trend.",
      "Surgery would have been an entirely reasonable decision based on the chart. It would also have been an unnecessary procedure, with all the real risks of surgery, in a patient whose anatomy had not changed.",
    ],
    lesson: "Whenever a major decision is driven by a specific number, such as a tumor measurement, a lab value, or a biopsy classification, ask whether someone has actually re-examined the original data, in the context of the prior data, in a single sitting, by a single observer. If the answer is &ldquo;no one has done that,&rdquo; ask what it would take to have it done before you proceed.",
  },
  {
    n: "IV", tag: "On the right expert",
    title: "Has the list of options been developed by the right experts, or has it been constrained by the specialists who are easily accessible?",
    body: [
      "Two physicians with identical board certifications can practice radically different medicine. Their expertise is shaped by the cases that flow into their practice.",
      "A patient with a rare presentation may go her entire treatment course without ever encountering the physician for whom her presentation is routine. She gets the standard answer to a non-standard question. Specialty access is not specialist match.",
    ],
    caseTitle: "Robert",
    caseLine: "SIXTIES &middot; CEO &middot; THYROID CANCER, PRIOR NERVE INJURY",
    caseBody: [
      "Robert had a partial thyroidectomy at a top academic center. During the operation the surgeon inadvertently severed his recurrent laryngeal nerve. The team aborted the second half, knowing that severing the other nerve would mean a permanent tracheostomy.",
      "The team&rsquo;s recommendation: once the first nerve heals, go back in and finish the surgery. Robert understood that &ldquo;go back in&rdquo; meant another operation in which a nerve injury might still happen — and that meant breathing through a tracheostomy tube for the rest of his life.",
      "The Carte search was for someone whose practice centered on patients exactly like Robert: thyroid cancer, prior nerve injury, contralateral surgery contemplated. We found him at a leading Boston institution — an endocrinologist who had spent two decades publishing on non-surgical management of exactly this presentation.",
      "His view: for this patient, attempting surgery on the other side is not necessary. Radioactive iodine is the standard of care here. Robert was treated near home with radioactive iodine. He kept his voice. He returned to his life.",
    ],
    lesson: "When a major procedure is recommended, the question is not <em>is this surgeon good at this surgery.</em> It is: <em>are you the specialist whose practice centers on patients with my specific presentation?</em> If the answer is &ldquo;I treat plenty of patients like you,&rdquo; ask how many — annually, last year, now.",
  },
  {
    n: "V", tag: "On your biology",
    title: "Is this recommendation based on your specific biology and risk profile, or on population-wide guidelines?",
    body: [
      "Guidelines are designed for the median patient. They are valuable — clinical medicine without them would be chaos — but they are not designed for patients who fall outside the statistical center of the curve they were built around.",
      "The fact that a recommendation is &ldquo;the standard of care&rdquo; is not, by itself, an argument that it applies to you. It is an argument that it applies to the median patient with your headline diagnosis. Whether you are that patient is a separate question.",
    ],
    caseTitle: "Richard, returned to",
    caseLine: "THE LAWYER WITH THE WALKER",    caseBody: [
      "Both of his surgical recommendations were guideline-supported. The orthopedic recommendation was reasonable for someone with his MRI findings. The bariatric recommendation was reasonable for someone with his BMI and metabolic profile.",
      "Neither guideline was written for someone with his specific combination: severe edema, deconditioned to a walker, in his sixties, facing recovery from surgery on top of all of it. The probability of meaningful functional recovery from either operation was a question the guidelines weren&rsquo;t designed to answer.",
      "When we put that question to the surgeons directly — <em>given his whole picture, do you expect this surgery to restore his mobility?</em> — both said no. Guidelines had said yes to two operations. The surgeons themselves, asked the right question, said no to both.",
    ],
    lesson: "When a recommendation is described as &ldquo;the standard of care,&rdquo; ask: <em>does the standard of care apply to someone with my specific combination of risk factors?</em> Standards apply to populations. Decisions are made for individuals. Both are needed; neither is sufficient on its own.",
  },
  {
    n: "VI", tag: "On the long term",
    title: "Has the team carefully considered the long-term consequences of this decision, or just the next step?",
    body: [
      "Specialists are paid to solve the problem in front of them, and that problem is almost always an immediate one: this surgery, this medication, this referral, this admission.",
      "But every major medical decision has a downstream that extends years or decades — recovery, function, complications, side-effect profiles, and the counterfactual of your life without the intervention. The downstream is rarely the responsibility of the specialist making the immediate recommendation. Sometimes it is no one&rsquo;s responsibility at all.",
    ],
    caseTitle: "Robert, again",
    caseLine: "THE CUMULATIVE-RISK MATH",
    caseBody: [
      "The recommendation Robert was given was, in isolation, defensible: complete the thyroidectomy, accept the small risk that the second nerve would also be injured, treat the cancer surgically.",
      "The downstream, in the small fraction of cases where the second nerve was injured, was a tracheostomy for the rest of his life. Small probability, catastrophic consequence — the kind of math weighted very differently by the surgeon completing the procedure than by the patient breathing through the tube.",
      "Robert&rsquo;s surgical team had not been asked to think about the downstream. His job, with our help, was to insist the conversation get there before he consented. Once it did, the operation was no longer the obvious choice.",
      "The downstream is not the surgeon&rsquo;s job to weight. It is the patient&rsquo;s life. Someone has to make sure it gets weighted.",
    ],
    lesson: "For any major decision, ask: <em>what does the worst plausible downstream look like, and how are we weighting it against the upside?</em> If the answer is &ldquo;we don&rsquo;t usually think that way,&rdquo; you have your answer.",
  },
  {
    n: "VII", tag: "On accountability",
    title: "Is anyone truly accountable for making sure the plan makes sense for you, and is executed appropriately?",
    body: [
      "This is the question all the others build to. In practice, the answer is almost always: no one. Each physician is accountable for her own visit, her own note, her own piece of the chart. Integration is presumed to happen, but it is not assigned to anyone.",
      "When integration is not assigned, integration does not happen — and serious decisions get made without anyone responsible for whether the whole stack of them makes sense.",
    ],
    caseTitle: "Misha",
    caseLine: "EIGHTEEN SPECIALISTS, NO ONE LOOKING",
    caseBody: [
      "Misha, a young woman with Crohn&rsquo;s disease and prior abdominal surgery, came to Carte after seeing eighteen specialists, multiple ER visits, an overnight admission, an opioid prescription, and a prior spinal surgery that had made her pain worse. The most recent advice she&rsquo;d received was that nothing more could be done until she was &ldquo;paralyzed enough&rdquo; to qualify for further intervention.",
      "What she didn&rsquo;t have, despite hundreds of appointments, was a single physician whose job was to look at all the data and ask whether the picture they painted made sense.",
      "When we did look, Dr. Alwood, Carte&rsquo;s lead physician, concluded the picture didn&rsquo;t make sense. Two doctors had told Misha she didn&rsquo;t have hypermobility; a specialist concluded she did. That prompted a re-imaging her surgical team had called unnecessary — which showed her disc had re-herniated in the same area, a finding common in patients with hypermobility.",
      "Two diagnoses everyone had said she didn&rsquo;t have were the major components of what was actually wrong. Each individual error was defensible. None had been caught sooner because no physician inside her care had been responsible for noticing they needed to happen.",
    ],
    lesson: "The most important question — and the hardest to ask — is: <em>who, in this group of physicians, is responsible for making sure the whole plan makes sense for me?</em> If the answer is silence, or &ldquo;I assume someone is,&rdquo; that role is unfilled. In a serious medical situation, an unfilled role is a serious problem.",
  },
];

function PageFrame({ folio, runner, children, dark }) {
  return (
    <div style={{
      width: PAGE_W, height: PAGE_H,
      background: dark ? "var(--carte-navy-deep)" : "var(--carte-white)",
      color: dark ? "var(--carte-cream)" : INK,
      border: "1px solid var(--carte-rule)",
      position: "relative",
      fontFamily: "var(--carte-font-body)",
      overflow: "hidden",
      boxSizing: "border-box",
    }}>
      {runner && (
        <div style={{
          position: "absolute", top: 28, left: 44, right: 44,
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
          textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 9,
          color: dark ? "rgba(250,250,250,0.6)" : MUTE,
          paddingBottom: 10, borderBottom: dark ? "1px solid rgba(250,250,250,0.2)" : "1px solid var(--carte-rule)",
        }}>
          <span>{runner.left}</span>
          <span>{runner.right}</span>
        </div>
      )}
      {children}
      {folio && (
        <div style={{
          position: "absolute", bottom: 28, left: 44, right: 44,
          display: "flex", justifyContent: "space-between",
          fontFamily: "var(--carte-font-body)", fontSize: 10, letterSpacing: "0.06em",
          color: dark ? "rgba(250,250,250,0.5)" : MUTE,
        }}>
          <span>{folio.left || ""}</span>
          <span>{folio.right || ""}</span>
        </div>
      )}
    </div>
  );
}

function Cover({ authorUpper }) {
  return (
    <PageFrame dark>
      <div style={{ position: "absolute", top: 56, left: 56, right: 56 }}>
        <img src="../../assets/carte-wordmark-cream.png" alt="Carte" style={{ height: 30, width: "auto", display: "block" }} />
        <div style={{ width: 44, height: 1, background: "var(--carte-accent-green)", marginTop: 16 }} />
      </div>

      <div style={{ position: "absolute", left: 56, right: 56, bottom: 200 }}>
        <div style={{
          fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
          textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 11,
          color: "var(--carte-accent-green)", marginBottom: 28,
        }}>Field Guide &middot; No. 01</div>
        <div style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400,
          fontSize: 64, lineHeight: 1.02, letterSpacing: "-0.01em", color: "var(--carte-cream)",
          marginBottom: 28,
        }}>
          The Medical<br/>Decision<br/>Roadmap
        </div>
        <div style={{
          fontFamily: "var(--carte-font-display)", fontStyle: "italic",
          fontSize: 17, lineHeight: 1.45, color: "var(--carte-cream)", opacity: 0.85,
          maxWidth: "30ch",
        }}>
          Seven questions to ask before agreeing to any major medical procedure, treatment, or specialist referral.
        </div>
      </div>

      <div style={{
        position: "absolute", left: 56, right: 56, bottom: 56,
        borderTop: "1px solid rgba(250,250,250,0.3)", paddingTop: 18,
        display: "flex", justifyContent: "space-between",
        fontFamily: "var(--carte-font-body)", fontSize: 10.5, letterSpacing: "0.06em",
        color: "var(--carte-cream)", opacity: 0.7,
      }}>
        <span>EDITION 2026.05</span>
      </div>
    </PageFrame>
  );
}

function ContentsPage() {
  return (
    <PageFrame
      runner={{ left: "The Medical Decision Roadmap", right: "Contents" }}
      folio={{ right: "iii" }}
    >
      <div style={{ position: "absolute", top: 110, left: 56, right: 56 }}>
        <div style={{
          fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
          textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 12, fontWeight: 500, marginBottom: 24,
        }}>Contents</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 32,
          lineHeight: 1.2, letterSpacing: "-0.005em", margin: "0 0 30px",
        }}>The seven questions.</h2>

        <div style={{ borderTop: "1px solid " + INK }} />
        <div style={{ fontSize: 10.5, letterSpacing: "0.06em", color: MUTE, padding: "10px 0", display: "flex", justifyContent: "space-between", borderBottom: "1px solid var(--carte-rule)" }}>
          <span>INTRODUCTION</span><span>01</span>
        </div>
        {CHAPTERS.map((c, i) => (
          <div key={c.n} style={{
            display: "grid", gridTemplateColumns: "32px 1fr 36px",
            gap: 14, padding: "11px 0",
            borderBottom: "1px solid var(--carte-rule)",
            alignItems: "baseline",
          }}>
            <span style={{
              fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
              letterSpacing: "0.16em", fontSize: 11, color: MUTE,
            }}>{c.n}.</span>
            <span style={{ fontFamily: "var(--carte-font-display)", fontSize: 14, lineHeight: 1.35 }}>{c.tag}</span>
            <span style={{ fontSize: 10.5, color: MUTE, textAlign: "right", letterSpacing: "0.06em" }}>{String(3 + i * 2).padStart(2, "0")}</span>
          </div>
        ))}
        <div style={{ fontSize: 10.5, letterSpacing: "0.06em", color: MUTE, padding: "10px 0", display: "flex", justifyContent: "space-between" }}>
          <span>CONCLUSION</span><span>{String(3 + CHAPTERS.length * 2).padStart(2, "0")}</span>
        </div>
      </div>

      <div style={{ position: "absolute", left: 56, right: 56, bottom: 70, fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 12.5, lineHeight: 1.55, color: MUTE, paddingTop: 16, borderTop: "1px solid var(--carte-rule)" }}>
        Each question is paired with a real Carte case where asking it — and following it to its end — changed the outcome.
      </div>
    </PageFrame>
  );
}

function IntroPage() {
  return (
    <PageFrame
      runner={{ left: "The Medical Decision Roadmap", right: "Introduction" }}
      folio={{ left: "01", right: "Carte Medical" }}
    >
      <div style={{ position: "absolute", top: 110, left: 56, right: 56 }}>
        <div style={{
          fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
          textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 11, fontWeight: 500, marginBottom: 18,
        }}>Introduction</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 28,
          lineHeight: 1.2, margin: "0 0 26px", letterSpacing: "-0.005em",
        }}>The errors we catch most often aren&rsquo;t dramatic.</h2>

        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: "0 0 0.9em" }}>
          <span style={{ float: "left", fontFamily: "var(--carte-font-display)", fontSize: 56, lineHeight: 0.85, padding: "6px 10px 0 0" }}>M</span>
          odern medicine is extraordinary. It is also fragmented, time-pressured, and deeply specialized — and those qualities, taken together, are how patients end up agreeing to procedures and treatments that on closer inspection don&rsquo;t make sense for them.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: "0 0 0.9em" }}>
          A surgeon recommends an operation based on a report that nobody re-read against the original images. A specialist proposes a plan that wouldn&rsquo;t survive five minutes of integration with a different specialist&rsquo;s plan. A guideline gets applied to a patient whose specific risk profile took her out of the guideline&rsquo;s denominator months ago.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: "0 0 0.9em" }}>
          These errors aren&rsquo;t anyone&rsquo;s fault, exactly. They&rsquo;re what happens when no single physician has the time or the mandate to be responsible for the way decisions are being made across a patient&rsquo;s whole picture.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: "0 0 0.9em" }}>
          That&rsquo;s the role we built Carte to fill — and these are the seven questions we ask on every Forensic Review, before any recommendation is finalized. We&rsquo;re publishing them so you can ask them too.
        </p>

      </div>
    </PageFrame>
  );
}

function QuestionOpener({ chapter, num, side }) {
  return (
    <PageFrame
      runner={{ left: `Question ${chapter.n}`, right: chapter.tag }}
      folio={{ left: side === "L" ? num : "", right: side === "R" ? num : "" }}
    >
      <div style={{ position: "absolute", top: 104, left: 56, right: 56 }}>
        <div style={{
          fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
          textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 11, fontWeight: 500,
          color: MUTE, marginBottom: 22,
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <span style={{ width: 22, height: 1, background: INK }} />
          Question {chapter.n}
        </div>
        <div style={{
          fontFamily: "var(--carte-font-display)", fontSize: 92, fontWeight: 400,
          lineHeight: 1, color: INK, letterSpacing: "-0.02em", margin: "0 0 20px",
        }}>{chapter.n.toLowerCase()}.</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 25,
          lineHeight: 1.24, letterSpacing: "-0.005em", margin: "0 0 30px", maxWidth: "24ch",
        }}>&ldquo;{chapter.title}&rdquo;</h2>
        {chapter.body.map((p, i) => (
          <p key={i} style={{
            fontFamily: "var(--carte-font-display)",
            fontSize: 14, lineHeight: 1.6,
            fontStyle: i === chapter.body.length - 1 && chapter.body.length > 1 ? "italic" : "normal",
            color: INK, margin: "0 0 0.85em", maxWidth: "46ch",
          }} dangerouslySetInnerHTML={{ __html: p }} />
        ))}
      </div>
    </PageFrame>
  );
}

function CasePage({ chapter, num, side }) {
  return (
    <PageFrame
      runner={{ left: `Question ${chapter.n}`, right: chapter.tag }}
      folio={{ left: side === "L" ? num : "", right: side === "R" ? num : "" }}
    >
      <div style={{ position: "absolute", top: 104, left: 56, right: 56, bottom: 66 }}>
        <div style={{ borderTop: "1px solid " + INK, paddingTop: 14, marginBottom: 16, display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
          <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10, fontWeight: 600, color: "var(--carte-accent-green)" }}>A real case &middot; {chapter.caseTitle}</span>
          <span style={{ fontSize: 8.5, color: MUTE, letterSpacing: "0.06em", textAlign: "right", whiteSpace: "nowrap" }} dangerouslySetInnerHTML={{ __html: chapter.caseLine }} />
        </div>
        {chapter.caseBody.map((p, i) => (
          <p key={i} style={{ fontFamily: "var(--carte-font-display)", fontSize: 11.5, lineHeight: 1.52, margin: "0 0 0.7em" }} dangerouslySetInnerHTML={{ __html: p }} />
        ))}

        <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--carte-rule)" }}>
          <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10, fontWeight: 600, color: INK, marginBottom: 8 }}>The lesson</div>
          <p style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 11.5, lineHeight: 1.5, margin: 0 }} dangerouslySetInnerHTML={{ __html: chapter.lesson }} />
        </div>
      </div>
    </PageFrame>
  );
}

function ConclusionPage() {
  return (
    <PageFrame
      runner={{ left: "The Medical Decision Roadmap", right: "Conclusion" }}
      folio={{ left: String(3 + CHAPTERS.length * 2).padStart(2, "0") }}
    >
      <div style={{ position: "absolute", top: 110, left: 56, right: 56 }}>
        <div style={{
          fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
          textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 11, fontWeight: 500, marginBottom: 22,
        }}>In closing</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 26,
          lineHeight: 1.22, letterSpacing: "-0.005em", margin: "0 0 28px", maxWidth: "26ch",
        }}>Seven angles on the same question.</h2>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          The seven questions are not seven different questions. They are seven angles on the same one: when a major medical decision is being made about you, is anyone responsible for whether it is the right decision?
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          The system, on its own, will not answer that question. It is structured around specialty visits and discrete encounters; integration is something it has never been built to deliver consistently. When integration happens, it is because someone decided to make it happen.
        </p>
      </div>

      <div style={{ position: "absolute", left: 56, right: 56, bottom: 120, borderTop: "1px solid " + INK, paddingTop: 22 }}>
        <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 10, fontWeight: 600, marginBottom: 14, color: "var(--carte-accent-green)" }}>Working with Carte</div>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13, lineHeight: 1.6, margin: "0 0 0.7em" }}>
          For a specific unresolved question, the entry point is a <b style={{ fontWeight: 500 }}>Forensic Review</b> ($10,000). For ongoing engagement, it is <b style={{ fontWeight: 500 }}>Stewardship</b> ($36,000&nbsp;/&nbsp;year) or, at the higher tier, <b style={{ fontWeight: 500 }}>MD Directorate</b>.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13, lineHeight: 1.6, margin: 0 }}>
          To begin: <span style={{ borderBottom: "1px solid var(--carte-accent-green)", paddingBottom: 1 }}>cartemedical.com/inquire</span>. On the call you&rsquo;ll have a physician&rsquo;s read on your case and at least one specific next step &mdash; whether you continue with Carte or not.
        </p>
        <div style={{ marginTop: 22, fontFamily: "var(--carte-font-body)", fontSize: 9.5, letterSpacing: "0.06em", color: MUTE }}>
          This content is for educational and informational purposes only. It does not constitute medical advice.
        </div>
      </div>
    </PageFrame>
  );
}

window.PrintArtboard = function PrintArtboard({ author = "Gina Siddiqui, MD" }) {
  const authorUpper = author.toUpperCase();
  const pages = [];
  pages.push(<ContentsPage key="contents"/>);
  pages.push(<IntroPage key="intro"/>);
  CHAPTERS.forEach((c, i) => {
    const openerNum = String(3 + i * 2).padStart(2, "0");
    const caseNum = String(4 + i * 2).padStart(2, "0");
    pages.push(<QuestionOpener key={`o-${c.n}`} chapter={c} num={openerNum} side="L"/>);
    pages.push(<CasePage key={`c-${c.n}`} chapter={c} num={caseNum} side="R"/>);
  });
  pages.push(<ConclusionPage key="conclusion"/>);

  return (
    <div style={{
      background: "#e7e3da", padding: 56,
      display: "grid", gridTemplateColumns: `repeat(2, ${PAGE_W}px)`,
      gap: 28, justifyContent: "center", alignContent: "start",
      fontFamily: "var(--carte-font-body)",
    }}>
      <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "center", marginBottom: 4 }}>
        <Cover authorUpper={authorUpper}/>
      </div>
      {pages}
    </div>
  );
};
