/* global React, HierarchyPyramid, SummaryTable */
// PDF / print artboard for "The Health Hierarchy" — Field Guide No. 02.
// Same page system as the other guides; cover field in Forest Ink (#2a3a2c).
// Structure: cover, contents, intro, Figure 1 (paired pyramid), four layers
// (opener + detail each), the summary table, and a closing page.

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

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 dangerouslySetInnerHTML={{ __html: runner.left }} /><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: 210 }}>
        <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. 02</div>
        <div style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400,
          fontSize: 68, lineHeight: 1.02, letterSpacing: "-0.01em", color: "var(--carte-cream)",
          marginBottom: 28,
        }}>
          The<br/>Health<br/>Hierarchy
        </div>
        <div style={{
          fontFamily: "var(--carte-font-display)", fontStyle: "italic",
          fontSize: 17, lineHeight: 1.45, color: "var(--carte-cream)", opacity: 0.85,
          maxWidth: "34ch",
        }}>
          A finance-style framework for anyone whose health efforts are not paying off the way they should.
        </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>{authorUpper} &middot; FOUNDER</span>
        <span>EDITION 2026.07</span>
      </div>
    </PageFrame>
  );
}

const LAYERS = [
  {
    n: "01", num: "03", runnerR: "On the bleeding",
    title: "Stop the bleeding.",
    lede: "The unresolved significant question, actually answered.",
    finance: "Paying off high-interest debt comes first not because the amount is large, but because the rate at which it compounds against you dwarfs the gains you make elsewhere.",
    why: "A specific unresolved question &mdash; a back pain never cleanly explained, an imaging finding that never got its follow-up &mdash; compounds against you faster than the good work compounds for you. The standard system allocates a specialist to an organ inside a fifteen-minute visit; it does not spend the forty-five minutes of thinking a real answer requires. No specialist is rewarded for staying with your case past the point their specialty has an answer.",
    carte: "The <b style=\"font-weight:500\">Forensic Review</b>: fifteen-to-forty pages of written analysis on your open question, over about three weeks, with a defensible recommendation and named next steps. The physician&rsquo;s job is to keep digging until the question is actually resolved &mdash; regardless of whose specialty it touches.",
  },
  {
    n: "02", num: "05", runnerR: "On maintenance",
    title: "Automate the maintenance.",
    lede: "The appointments, monitoring, and follow-ups that shouldn&rsquo;t depend on you remembering.",
    finance: "Finances stay on track through autopay, not monthly discipline &mdash; the important actions move out of the pool of things that require attention and into the pool of things that happen without you.",
    why: "In the standard system, every appointment, follow-up, retest, and refill depends on you remembering. Four-month follow-ups happen at fourteen; six-month labs never get re-checked; referrals fall through. Your PCP doesn&rsquo;t run your calendar between visits; specialists own single appointments; even concierge practices sell longer visits, not the day-to-day work of closing the loops.",
    carte: "<b style=\"font-weight:500\">Stewardship</b> is the project-management layer for your care. We hold the calendar, schedule the appointments, track and close the open items from past visits, and check labs in real time &mdash; so the recurring maintenance happens on its actual schedule, not on the one your memory happens to catch.",
  },
  {
    n: "03", num: "07", runnerR: "On the basics",
    title: "Do the boring basics excellently.",
    lede: "The equivalent of the diversified index fund; done at the level required to work.",
    finance: "Most of the gains in finance come from a few boring, correct strategies executed consistently.",
    why: "Health has the same shape: sleep, strength, stress management, whole foods, the right medications at the right doses. Two things go wrong &mdash; people don&rsquo;t know which basics matter most in their specific situation, and they don&rsquo;t execute at the level required to get the return. The system isn&rsquo;t paid for the day-to-day work between appointments, so it doesn&rsquo;t do it.",
    carte: "We identify the specific basics that would produce the largest delta in your situation, match you with the trainers, chefs, and therapists who execute excellently, hold the schedule that keeps it consistent, and adjust course to make healthy sleep actually happen.",
  },
  {
    n: "04", num: "09", runnerR: "On the sleeve",
    title: "Be strategic on the higher-variance choices.",
    lede: "Peptides, panels, and newer interventions; entered with independent judgment.",
    finance: "Higher-variance bets sit as a small sleeve of the sophisticated portfolio, entered only with an information advantage. The winners say <em>no</em> more often than <em>yes</em>; the losers treat them as the main event.",
    why: "Cryotherapy, CGMs for non-diabetics, high-dose vitamin infusions, peptides &mdash; some useful in the right situation, most entered the wrong way. Standard doctors reflexively say <em>no</em> to what they can&rsquo;t read up on in a visit; longevity clinics say <em>yes</em> to everything they profit from. Neither is calibrated to you.",
    carte: "We are a trusted advisor with information alpha and no product to sell &mdash; no facilities, no supplements, no revenue from pharma, device makers, or wellness brands. We tell you what the evidence says for your specific case: often <em>&ldquo;not yet, but here&rsquo;s what would tell us,&rdquo;</em> or <em>&ldquo;yes, at this dose, monitored this way.&rdquo;</em>",
  },
];

function ContentsPage() {
  return (
    <PageFrame
      runner={{ left: "The Health Hierarchy", 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 36px",
        }}>The four layers.</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>
        <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>FIGURE 1 &middot; THE PARALLEL</span><span>02</span>
        </div>
        {LAYERS.map((lv) => (
          <div key={lv.n} style={{
            display: "grid", gridTemplateColumns: "44px 1fr 36px",
            gap: 14, padding: "12px 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,
            }}>{lv.n}</span>
            <span style={{ fontFamily: "var(--carte-font-display)", fontSize: 14.5, lineHeight: 1.4 }}>{lv.title.replace(/\.$/, "")}</span>
            <span style={{ fontSize: 10.5, color: MUTE, textAlign: "right", letterSpacing: "0.06em" }}>{lv.num}</span>
          </div>
        ))}
        <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>AT A GLANCE &middot; SUMMARY TABLE</span><span>11</span>
        </div>
        <div style={{ fontSize: 10.5, letterSpacing: "0.06em", color: MUTE, padding: "10px 0", display: "flex", justifyContent: "space-between" }}>
          <span>THE ARCHITECTURE</span><span>12</span>
        </div>
      </div>

      <div style={{ position: "absolute", left: 56, right: 56, bottom: 90, fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 12.5, lineHeight: 1.55, color: MUTE, paddingTop: 16, borderTop: "1px solid var(--carte-rule)" }}>
        Each layer describes the finance parallel, why the standard system does not provide it, and what Carte does about it.
      </div>
    </PageFrame>
  );
}

function IntroPage() {
  return (
    <PageFrame
      runner={{ left: "The Health Hierarchy", 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 28px", letterSpacing: "-0.005em",
        }}>It&rsquo;s the architecture, not the effort.</h2>

        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          <span style={{ float: "left", fontFamily: "var(--carte-font-display)", fontSize: 56, lineHeight: 0.85, padding: "6px 10px 0 0" }}>Y</span>
          ou know, quietly, that you should be healthier than you are. You&rsquo;ve had the standard tests and some of the expensive ones, and you show up to your appointments &mdash; but health has to fit inside a life that already holds an expertise, a business, or a family. You&rsquo;re not trying to make health a hobby; you&rsquo;re trying to translate the resources, access, and information you have into outcomes you can feel. And you have the quiet sense that you should be further ahead than you are.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          Among people with roughly comparable raw material &mdash; genes, income, time, geography &mdash; some end up meaningfully better off in both wealth and health, and the difference has almost nothing to do with the individual moves anyone makes on any given day. It has to do with the architecture.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          People in excellent financial health don&rsquo;t just make more money. They lose money at a lower rate &mdash; through debt they avoid and exposures they close down &mdash; and they compound it through habits that are patient, boring, and automated. People in excellent health show the same pattern, in the same order. The four layers are on the next page.
        </p>

        <div style={{ borderLeft: "3px solid var(--carte-accent-green)", paddingLeft: 16, marginTop: 22, fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 13, lineHeight: 1.5 }}>
          &mdash; Gina Siddiqui, MD<br/>
          <span style={{ fontStyle: "normal", fontFamily: "var(--carte-font-body)", fontSize: 9.5, letterSpacing: "0.06em", color: MUTE }}>FOUNDER, CARTE MEDICAL</span>
        </div>
      </div>
    </PageFrame>
  );
}

function PyramidPage() {
  return (
    <PageFrame
      runner={{ left: "Figure 1 &middot; The parallel", right: "The two hierarchies" }}
      folio={{ left: "02" }}
    >
      <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: 16,
        }}>Figure 1</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 22,
          lineHeight: 1.25, letterSpacing: "-0.005em", margin: "0 0 26px", maxWidth: "34ch",
        }}>Wealth and health flourish in the same four layers.</h2>
        <HierarchyPyramid mode="paired" scale={0.66}/>
      </div>
    </PageFrame>
  );
}

function LayerOpener({ lv, side }) {
  return (
    <PageFrame
      runner={{ left: `Layer ${lv.n}`, right: lv.runnerR }}
      folio={{ left: side === "L" ? lv.num : "", right: side === "R" ? lv.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,
          color: MUTE, marginBottom: 30,
          display: "flex", alignItems: "center", gap: 12,
        }}>
          <span style={{ width: 22, height: 1, background: INK }} />
          Layer {lv.n}
        </div>
        <div style={{
          fontFamily: "var(--carte-font-display)", fontSize: 110, fontWeight: 400,
          lineHeight: 1, color: INK, letterSpacing: "-0.02em", margin: "0 0 22px",
        }}>{lv.n}</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 30,
          lineHeight: 1.18, letterSpacing: "-0.005em", margin: "0 0 14px", maxWidth: "22ch",
        }}>{lv.title}</h2>
        <p style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 16, lineHeight: 1.45, color: MUTE, margin: "0 0 34px", maxWidth: "40ch" }} dangerouslySetInnerHTML={{ __html: lv.lede }} />

        <div style={{ borderLeft: "3px solid var(--carte-rule)", paddingLeft: 16 }}>
          <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10, color: MUTE, marginBottom: 10, fontWeight: 600 }}>The finance parallel</div>
          <p style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 14, lineHeight: 1.6, color: INK, margin: 0, maxWidth: "46ch" }} dangerouslySetInnerHTML={{ __html: lv.finance }} />
        </div>
      </div>
    </PageFrame>
  );
}

function LayerDetail({ lv, side }) {
  const detailNum = String(Number(lv.num) + 1).padStart(2, "0");
  return (
    <PageFrame
      runner={{ left: `Layer ${lv.n}`, right: lv.runnerR }}
      folio={{ left: side === "L" ? detailNum : "", right: side === "R" ? detailNum : "" }}
    >
      <div style={{ position: "absolute", top: 110, left: 56, right: 56, bottom: 80 }}>
        <div style={{ borderTop: "1px solid " + INK, paddingTop: 16, marginBottom: 24, display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
          <span style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 10, fontWeight: 600, color: INK }}>The gap, and how Carte closes it</span>
          <span style={{ fontSize: 9.5, color: MUTE, letterSpacing: "0.06em" }}>LAYER {lv.n}</span>
        </div>

        <div style={{ marginBottom: 30 }}>
          <div style={{ fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 10, fontWeight: 600, color: INK, marginBottom: 12 }}>Why the standard system doesn&rsquo;t provide it</div>
          <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: 0 }} dangerouslySetInnerHTML={{ __html: lv.why }} />
        </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 }}>What Carte does about it</div>
          <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.62, margin: 0 }} dangerouslySetInnerHTML={{ __html: lv.carte }} />
        </div>
      </div>
    </PageFrame>
  );
}

function TablePage() {
  return (
    <PageFrame
      runner={{ left: "The Health Hierarchy", right: "At a glance" }}
      folio={{ left: "11" }}
    >
      <div style={{ position: "absolute", top: 110, left: 44, right: 44 }}>
        <div style={{
          fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
          textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 11, fontWeight: 500, marginBottom: 14, paddingLeft: 12,
        }}>The four layers at a glance</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 22,
          lineHeight: 1.22, letterSpacing: "-0.005em", margin: "0 0 24px", maxWidth: "40ch", paddingLeft: 12,
        }}>What each layer is, why the system leaves it out, and what Carte does.</h2>
        <div style={{ paddingLeft: 12, paddingRight: 12 }}>
          <SummaryTable scale={0.82}/>
        </div>
      </div>
    </PageFrame>
  );
}

function ConclusionPage() {
  return (
    <PageFrame
      runner={{ left: "The Health Hierarchy", right: "The architecture" }}
      folio={{ left: "12" }}
    >
      <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,
        }}>The architecture</div>
        <h2 style={{
          fontFamily: "var(--carte-font-display)", fontWeight: 400, fontSize: 26,
          lineHeight: 1.22, letterSpacing: "-0.005em", margin: "0 0 28px", maxWidth: "26ch",
        }}>Four layers. Almost no one has all four.</h2>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          Most people have zero to two, and the returns on their health show up &mdash; or don&rsquo;t &mdash; accordingly. The medical system is structured to sell you individual services and react to problems. The wellness industry is structured to sell you products and convert enthusiasm into revenue.
        </p>
        <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13.5, lineHeight: 1.65, margin: "0 0 0.95em" }}>
          Neither is organized to hold the whole picture on your behalf, over time, with independent judgment. That is what Carte is organized to do &mdash; not as an add-on to your care, but as the structural piece that has been missing.
        </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 across all four layers, 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();
  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>

      <ContentsPage/>
      <IntroPage/>

      <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "center" }}>
        <PyramidPage/>
      </div>

      {LAYERS.map((lv) => (
        <React.Fragment key={lv.n}>
          <LayerOpener lv={lv} side="L"/>
          <LayerDetail lv={lv} side="R"/>
        </React.Fragment>
      ))}

      <TablePage/>
      <ConclusionPage/>
    </div>
  );
};
