/* global React */
// PDF / print artboard — The Coordination Blueprint (Field Guide No. 03).
// Cover field in Oxblood (#3a1f2a). Full document: cover, contents, intro,
// all eight steps (each an opener page + a "yourself vs. Carte" compare page),
// a worked "team map" example after Step III, and a closing page.
// Copy source of truth: CoordinationReadOnWeb.jsx.

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

const STEPS = [
  {
    n: "I", tag: "On records",
    title: "Consolidate records in one place.",
    why: "Every doctor your loved one sees has access to a slice of his or her medical history &mdash; the slice that institution generated. No single doctor has the whole picture. When a new specialist asks <em>why are you on this medication,</em> the answer given from memory is often incomplete; when they ask <em>have you had this test before,</em> nobody has the test technique to compare against.",
    doIt: "Maintain a single shared repository, indexed and searchable, that contains: imaging reports <em>and the original image files</em> (request the CDs or portal logins, not just the reports), pathology reports and slides if available, longitudinal lab values, specialist consult notes, hospital discharge summaries, vital signs, device reports, remote monitoring, and a current medication list. Update it after every appointment.",
    carteIt: "We build a physician-reviewed health dossier for each Stewardship client and maintain it as a living document. We catch and correct errors in the underlying records &mdash; a misdated test, a duplicated medication, a wrong allergy listing &mdash; and we coordinate with the originating institutions to fix them at the source, not just in our copy.",
  },
  {
    n: "II", tag: "On medications",
    title: "Reconcile the full medication list.",
    why: "Medication errors are one of the leading preventable causes of hospitalization. Polypharmacy &mdash; being on more than five medications at once &mdash; doubles fall risk and sharply raises drug-drug interactions. Most patients on five or more medications are receiving prescriptions from three or more physicians who are not coordinating with each other.",
    doIt: "Build a complete current list: every prescription, every over-the-counter medication, every supplement, with the dose, the schedule, and the prescriber. Cross-check the pharmacy&rsquo;s records against the actual bottles. Then have one physician &mdash; ideally a primary care physician or geriatrician &mdash; formally reconcile the list and identify duplications, interactions, and prescriptions that may no longer be necessary.",
    carteIt: "Our physicians review the complete medication list on every Stewardship engagement. We check for high-risk medications, reconcile across all prescribers, and propose de-prescribing wherever the risk-benefit math has shifted. We have the conversation with each prescribing physician individually so changes are made with their input, not around them.",
  },
  {
    n: "III", tag: "On the team",
    title: "Map the specialists and their roles.",
    why: "Some conditions cross specialties. Heart failure with kidney disease and diabetes is not one specialist&rsquo;s responsibility &mdash; it is three. Without an explicit map of who is responsible for what, decisions either fall between the cracks or get made twice, in conflicting directions.",
    doIt: "Build a &lsquo;team map&rsquo; listing each specialist your loved one sees, the condition(s) they manage, the date of the last visit, the date of the next, any specific questions or decisions that are open with that specialist right now, and how well that specialist is addressing your loved one&rsquo;s needs. Update it after every appointment.",
    carteIt: "We draw the map and when necessary we redraw it. We meet and build direct lines of communication with everyone on your loved one&rsquo;s team, and make sure each specialist is the right person for the job they are assigned. We also integrate across the plans so the overall plan is informed appropriately by all parties.",
  },
  {
    n: "IV", tag: "On sequencing",
    title: "Schedule in the right sequence, at the right facilities.",
    why: "Doing labs after a specialist visit usually wastes the visit. Doing imaging at the wrong facility usually means the imaging gets repeated. Order matters. Venue matters. Acing both takes deliberate effort.",
    doIt: "Before any specialist visit, figure out what should be done before the appointment so the visit is productive. Schedule labs and imaging as early as possible; often they change which specialist should be seen or even if an appointment is needed at all. If multiple specialists in different institutions need to see the same imaging, make sure it&rsquo;s done at a facility whose results both can read.",
    carteIt: "We sequence the entire schedule. We send relevant records to each specialist&rsquo;s office in advance &mdash; often answering the specialist&rsquo;s questions before the visit even starts. In some cases, the pre-visit conversation with the specialist eliminates the need for the visit altogether.",
  },
  {
    n: "V", tag: "On follow-through",
    title: "Track action items after every visit.",
    why: "Specialists assign next steps. They do not, almost ever, also assign someone to follow through on those steps. The follow-through is implicitly the patient&rsquo;s job &mdash; or the family member&rsquo;s. When that family member is also working a job and running a household, the follow-through gets dropped at the rate busy lives drop things.",
    doIt: "Maintain a plan and calendar for every diagnosis and medical issue that requires maintenance or monitoring. Revisit it after every appointment and write down what was recommended, by whom, by when, and what specifically needs to happen for it to occur. Put each item on a calendar with a date and an owner. Don&rsquo;t trust memory.",
    carteIt: "We maintain an action list across all of your loved one&rsquo;s specialists and diagnoses, follow up directly with each office until the item is closed, and confirm completion with the patient and the family. We schedule on your loved one&rsquo;s behalf, send the records that need sending, and chase down the lab results taking too long to come back. We also check the results ourselves rather than relying on others to flag what needs further action.",
  },
  {
    n: "VI", tag: "On screening",
    title: "Screen beyond the standard panel.",
    why: "Standard age-based screening &mdash; colonoscopy, mammogram, bone density, eye exam &mdash; catches a known set of conditions. It does not catch many of the actual drivers of decline in healthspan: subtle cognitive change, undiagnosed sleep apnea, early sarcopenia, vitamin and mineral deficiencies off the standard panel, hearing loss, balance disorders.",
    doIt: "Ask the primary care physician explicitly: beyond the standard checklist, is there anything you would screen for in someone with this profile that we are not currently doing? If the answer is &lsquo;the checklist is the checklist,&rsquo; that is itself useful information. The checklist does not cover everything.",
    carteIt: "We tailor the screening panel to the specific risk profile of each Stewardship client &mdash; which often means adding cognitive screening, higher-cadence bone density, comprehensive vitamin and mineral panels, sleep studies, and imaging the standard physical does not order. We then translate the results into the small number of changes that will actually move the needle.",
  },
  {
    n: "VII", tag: "On the hub",
    title: "Designate a central point of contact.",
    why: "Hospitals and specialist offices want one person to talk to. When they do not have one &mdash; when calls are answered by whoever picks up, or by different family members who tell different stories &mdash; care gets delayed, miscommunicated, or duplicated. In emergencies, the absence of a central contact is dangerous.",
    doIt: "Designate one family member (or one trusted advocate) as the named point of contact for every clinical interaction. Equip that person with the records repository from Step I so they can answer questions in real time. Make sure the rest of the family is comfortable with the arrangement &mdash; divided contact is worse than imperfect contact.",
    carteIt: "We become the hub. Hospitals, specialists, pharmacies, and family members can all communicate with us, and we coordinate among them. The family member who would otherwise have been the de facto point of contact stays in charge but gets their time back. We are reachable (24/7/365 for MD Directorate clients), the records are at our fingertips, and the receiving physician gets a clean handoff.",
  },
  {
    n: "VIII", tag: "On adherence",
    title: "Identify one or two keystone daily actions.",
    why: "Most physicians, at the end of a long visit, give out long lists of suggestions: eat better, exercise more, take this medication, watch for these symptoms. The list is reasonable. It is also usually too long to act on. Adherence collapses when the list does not fit in real life.",
    doIt: "Identify one or two specific daily actions that would actually move the conditions your loved one is dealing with. Walk ten minutes after each meal, for insulin resistance. Compression stockings in the evening, for leg edema. Calcium with the morning coffee, so it isn&rsquo;t forgotten. Anchor each action to an existing habit so adherence is not a memory test.",
    carteIt: "We translate every set of specialist recommendations into a short, specific action list. We make the actions concrete, time-bound, and tied to existing routines. We adjust them as the situation changes. We follow up to make sure they&rsquo;re actually happening.",
  },
];

function PageFrame({ folio, runner, children, dark, fieldColor }) {
  const bg = dark ? (fieldColor || "var(--carte-navy-deep)") : "var(--carte-white)";
  return (
    <div style={{
      width: PAGE_W, height: PAGE_H, background: bg,
      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 fieldColor={COVER_FIELD}>
      <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. 03</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<br/>Coordination<br/>Blueprint
        </div>
        <div style={{
          fontFamily: "var(--carte-font-display)", fontStyle: "italic",
          fontSize: 17, lineHeight: 1.45, color: "var(--carte-cream)", opacity: 0.85,
          maxWidth: "32ch",
        }}>
          Eight steps families need covered when managing complex health for a loved one.
        </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 Coordination Blueprint", 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 eight steps.</h2>

        <div style={{ borderTop: "1px solid " + INK }} />
        <div style={{ fontSize: 10.5, letterSpacing: "0.06em", color: MUTE, padding: "9px 0", display: "flex", justifyContent: "space-between", borderBottom: "1px solid var(--carte-rule)" }}>
          <span>INTRODUCTION</span><span>01</span>
        </div>
        {STEPS.map((s, i) => (
          <div key={s.n} style={{
            display: "grid", gridTemplateColumns: "44px 1fr 36px",
            gap: 14, padding: "9px 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,
            }}>{s.n}.</span>
            <span style={{ fontFamily: "var(--carte-font-display)", fontSize: 14, lineHeight: 1.35 }} dangerouslySetInnerHTML={{ __html: s.title.replace(/\.$/, "") }} />
            <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: "9px 0", display: "flex", justifyContent: "space-between" }}>
          <span>PUTTING IT TOGETHER</span><span>{String(3 + STEPS.length * 2).padStart(2, "0")}</span>
        </div>
      </div>

      <div style={{ position: "absolute", left: 56, right: 56, bottom: 66, fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 12.5, lineHeight: 1.55, color: MUTE, paddingTop: 16, borderTop: "1px solid var(--carte-rule)" }}>
        Each step describes the work as a family member would do it &mdash; and as Carte does it under a Stewardship engagement.
      </div>
    </PageFrame>
  );
}

function IntroPage() {
  return (
    <PageFrame
      runner={{ left: "The Coordination Blueprint", 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 de facto health manager.</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" }}>W</span>
          hen a loved one&rsquo;s health gets complicated, someone in the family usually becomes the de facto health manager. Not because they signed up for the role. Because no one else in the system was going to do it.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: "0 0 0.9em" }}>
          This is a heavier job than most families understand at the start. It involves chasing records across institutions that don&rsquo;t share them, interpreting recommendations that contradict each other, scheduling appointments that must happen in a specific order to be useful, and making sure the eight people each providing one piece of your loved one&rsquo;s care aren&rsquo;t undermining what the other seven are doing.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: "0 0 0.9em" }}>
          Done comprehensively, this work changes outcomes. Conversely, this work not getting done is the most common pathway to medication errors, redundant procedures, missed diagnoses, and the slow accumulation of small problems that ends in an avoidable hospitalization.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: "0 0 0.9em" }}>
          This guide lays out eight steps that, in our experience, families miss out on. They require a great deal of time, attention, and the willingness to ask uncomfortable questions of physicians who are not used to being asked them. We make the case that it&rsquo;s not really possible for one person to do it all.
        </p>

      </div>
    </PageFrame>
  );
}

function StepOpener({ step, num, side }) {
  return (
    <PageFrame
      runner={{ left: `Step ${step.n}`, right: step.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 }} />
          Step {step.n}
        </div>
        <div style={{
          fontFamily: "var(--carte-font-display)", fontSize: 92, fontWeight: 400,
          lineHeight: 1, color: INK, letterSpacing: "-0.02em", margin: "0 0 20px",
        }}>{step.n.toLowerCase()}.</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 26,
          lineHeight: 1.22, letterSpacing: "-0.005em", margin: "0 0 30px", maxWidth: "22ch",
        }}>{step.title}</h2>
        <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10, color: "var(--carte-accent-green)", marginBottom: 12, fontWeight: 600 }}>Why it matters</div>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 14, lineHeight: 1.6, color: INK, margin: 0, maxWidth: "46ch" }} dangerouslySetInnerHTML={{ __html: step.why }} />
      </div>
    </PageFrame>
  );
}

function StepCompare({ step, num, side }) {
  return (
    <PageFrame
      runner={{ left: `Step ${step.n}`, right: step.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: 22, display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
          <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 10, fontWeight: 600, color: INK }}>Two paths through the same step</span>
          <span style={{ fontSize: 9.5, color: MUTE, letterSpacing: "0.06em", whiteSpace: "nowrap" }}>STEP {step.n}</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
          <div style={{ borderTop: "2px solid " + INK, paddingTop: 16 }}>
            <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10, fontWeight: 600, color: INK, marginBottom: 12 }}>What needs to be done</div>
            <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13, lineHeight: 1.6, margin: 0 }} dangerouslySetInnerHTML={{ __html: step.doIt }} />
          </div>
          <div style={{ borderTop: "2px solid var(--carte-accent-green)", paddingTop: 16 }}>
            <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10, fontWeight: 600, color: "var(--carte-accent-green)", marginBottom: 12 }}>How Carte handles it</div>
            <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13, lineHeight: 1.6, margin: 0 }} dangerouslySetInnerHTML={{ __html: step.carteIt }} />
          </div>
        </div>
      </div>
    </PageFrame>
  );
}

function MapPage({ num }) {
  const team = [
    ["Cardiologist",   "Heart failure",       "Last visit Mar 14",  "Diuretic dose under review",                    "open"],
    ["Nephrologist",   "Stage 3 CKD",         "Last visit Feb 28",  "Awaiting cardiology decision before adjusting", "blocked"],
    ["Endocrinologist","Type 2 diabetes",     "Last visit Mar 02",  "Medication change pending recon",               "open"],
    ["Orthopedist",    "Right hip / fall risk","Last visit Jan 19", "PT program ordered &middot; not yet scheduled", "open"],
    ["Geriatrician",   "Whole-picture lead",  "Last visit Mar 09",  "Reconciling medication list &middot; quarterly",   "active"],
    ["Pharmacist",     "Medication review",   "Last review Feb 20", "Beers Criteria flag: diphenhydramine PRN",      "flag"],
  ];
  const dot = (k) => ({ open: "var(--carte-text-muted)", blocked: "#a85b3a", flag: "#a85b3a", active: "var(--carte-accent-green)" }[k] || INK);

  return (
    <PageFrame
      runner={{ left: "Step III &middot; The team map", right: "Worked example" }}
      folio={{ left: num }}
    >
      <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,
        }}>The team map &middot; worked example</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 24,
          lineHeight: 1.22, letterSpacing: "-0.005em", margin: "0 0 22px", maxWidth: "30ch",
        }}>One page. Every specialist. Every open question.</h2>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 12, lineHeight: 1.6, color: MUTE, margin: "0 0 22px", maxWidth: "60ch" }}>
          A representative team map for a parent with heart failure, diabetes, and a recent fall. Update after every visit; review weekly.
        </p>

        <div style={{ borderTop: "1px solid " + INK }}>
          <div style={{
            display: "grid", gridTemplateColumns: "12px 1.1fr 1.1fr 1fr 1.6fr",
            gap: 12, padding: "10px 0",
            fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
            textTransform: "uppercase", letterSpacing: "0.14em", fontSize: 8.5,
            color: MUTE, borderBottom: "1px solid var(--carte-rule)",
          }}>
            <span></span><span>Specialist</span><span>Manages</span><span>Last seen</span><span>Open question</span>
          </div>
          {team.map((r) => (
            <div key={r[0]} style={{
              display: "grid", gridTemplateColumns: "12px 1.1fr 1.1fr 1fr 1.6fr",
              gap: 12, padding: "12px 0",
              borderBottom: "1px solid var(--carte-rule)",
              alignItems: "baseline",
              fontFamily: "var(--carte-font-display)", fontSize: 11, color: INK,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: dot(r[4]), display: "inline-block", marginTop: 2 }}/>
              <span style={{ fontWeight: 500 }}>{r[0]}</span>
              <span>{r[1]}</span>
              <span style={{ color: MUTE }}>{r[2]}</span>
              <span dangerouslySetInnerHTML={{ __html: r[3] }} />
            </div>
          ))}
        </div>

        <div style={{ marginTop: 20, display: "flex", gap: 22, flexWrap: "wrap", fontSize: 9.5, color: MUTE, letterSpacing: "0.06em" }}>
          <span><span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: dot("active"), marginRight: 6 }}/>ACTIVE LEAD</span>
          <span><span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: dot("open"), marginRight: 6 }}/>OPEN</span>
          <span><span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: dot("blocked"), marginRight: 6 }}/>BLOCKED / FLAG</span>
        </div>

        <div style={{ marginTop: 26, paddingTop: 16, borderTop: "1px solid " + INK, fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 12.5, lineHeight: 1.55, color: INK }}>
          The map is not the work. The map is what tells you what work needs to happen this week, and where the silences in the chart are.
        </div>
      </div>
    </PageFrame>
  );
}

function ConclusionPage({ num }) {
  return (
    <PageFrame
      runner={{ left: "The Coordination Blueprint", right: "Putting it together" }}
      folio={{ left: num }}
    >
      <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,
        }}>Putting it together</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 26,
          lineHeight: 1.22, letterSpacing: "-0.005em", margin: "0 0 28px", maxWidth: "26ch",
        }}>The work is real, and it is constant.</h2>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          The eight steps describe the work of being responsible for a loved one&rsquo;s complex health. A Sisyphean task that often goes unacknowledged today &mdash; that can become a rewarding one with the right supporting infrastructure in place.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          The gap between doing this work well and doing it badly is the gap between a loved one who continues to improve and one who declines into a series of avoidable crises.
        </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"/>);
  let folio = 3;
  STEPS.forEach((s) => {
    const openerNum = String(folio).padStart(2, "0");
    const compareNum = String(folio + 1).padStart(2, "0");
    pages.push(<StepOpener key={`o-${s.n}`} step={s} num={openerNum} side="L"/>);
    pages.push(<StepCompare key={`c-${s.n}`} step={s} num={compareNum} side="R"/>);
    folio += 2;
    if (s.n === "III") {
      pages.push(<MapPage key="map" num={String(folio).padStart(2, "0")}/>);
      folio += 1;
    }
  });
  pages.push(<ConclusionPage key="conclusion" num={String(folio).padStart(2, "0")}/>);

  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>
  );
};
