/* global React */
// Shared visuals for "The Health Hierarchy" — VISUAL 1 (four-layer pyramid,
// with optional finance/health pairing) and VISUAL 2 (four-row summary table).
// Restrained Carte system: cream ground, ink + ink-70 type, graduated Forest-Ink
// fills tied to this guide's cover field. No decorative color beyond that.

const FIELD = "#2a3a2c";            // Forest Ink — this guide's cover field
const INKC = "var(--carte-text)";
const MUTEC = "var(--carte-text-muted)";
const CREAMC = "var(--carte-cream)";

// Base (widest) → apex (narrowest). Graduated Forest-Ink fill.
const LEVELS = [
  {
    num: "01",
    nF: "01 - Stop the bleeding",
    nH: "01 - stop the bleeding",
    health: "Stop the bleeding",
    healthBand: "Solve unresolved medical dilemmas",
    finance: "Pay off high-interest debt",
    desc: "The unresolved significant question, actually answered.",
    w: 100,
  },
  {
    num: "02",
    nF: "02 - automation",
    nH: "02 - automation",
    health: "Automate the maintenance",
    healthBand: "Set health maintenance activities on autopilot",
    finance: "Autopay regular expenses &amp; automate saving",
    desc: "Appointments, monitoring, and follow-ups that shouldn&rsquo;t depend on you remembering.",
    w: 82,
  },
  {
    num: "03",
    nF: "03 - best practices",
    nH: "03 - best practices",
    health: "Do the boring basics excellently",
    healthBand: "Do your boring basics excellently",
    finance: "Diversified index-fund basics",
    desc: "Sleep, strength, cardiovascular fitness, protein &mdash; customized and actually executed.",
    w: 64,
  },
  {
    num: "04",
    nF: "04 - alpha",
    nH: "04 - alpha",
    health: "Be strategically off-label",
    healthBand: "Informed off-label",
    finance: "Asymmetric bets",
    desc: "Peptides, panels, and newer interventions &mdash; entered with independent judgment.",
    w: 46,
  },
];

// Graduated opacities of the Forest-Ink field, base → apex.
const BAND_FILL = [
  "rgba(42,58,44,1)",
  "rgba(42,58,44,0.82)",
  "rgba(42,58,44,0.64)",
  "rgba(42,58,44,0.47)",
];

function Bands({ col, scale }) {
  const bandH = Math.round(64 * scale);
  const titleFs = 15 * scale;
  const numFs = 9.5 * scale;
  const numField = col === "finance" ? "nF" : "nH";
  const labelField = col === "finance" ? "finance" : "healthBand";
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: Math.round(4 * scale), alignItems: "center" }}>
      {LEVELS.map((lv, i) => (
        <div
          key={lv.num}
          style={{
            width: lv.w + "%",
            height: bandH,
            background: BAND_FILL[i],
            color: CREAMC,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            textAlign: "center",
            padding: "0 " + Math.round(14 * scale) + "px",
            boxSizing: "border-box",
          }}
        >
          <span style={{
            fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
            textTransform: "uppercase", letterSpacing: "0.20em", fontSize: numFs,
            opacity: 0.72, marginBottom: Math.round(3 * scale),
          }}>Layer {lv[numField]}</span>
          <span
            style={{ fontFamily: "var(--carte-font-display)", fontSize: titleFs, lineHeight: 1.12, letterSpacing: "-0.005em" }}
            dangerouslySetInnerHTML={{ __html: lv[labelField] }}
          />
        </div>
      ))}
    </div>
  );
}

function Key({ scale }) {
  return (
    <div style={{ marginTop: Math.round(26 * scale) }}>
      {LEVELS.map((lv, i) => (
        <div key={lv.num} style={{
          display: "grid", gridTemplateColumns: Math.round(40 * scale) + "px 1fr", gap: Math.round(16 * scale),
          padding: Math.round(11 * scale) + "px 0",
          borderTop: i === 0 ? "1px solid " + INKC : "1px solid var(--carte-rule)",
          borderBottom: i === LEVELS.length - 1 ? "1px solid var(--carte-rule)" : "none",
          alignItems: "baseline",
        }}>
          <span style={{
            fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
            letterSpacing: "0.14em", fontSize: 11 * scale, color: MUTEC,
          }}>{lv.num}</span>
          <span style={{ display: "flex", flexDirection: "column", gap: Math.round(2 * scale) }}>
            <span style={{ fontFamily: "var(--carte-font-display)", fontSize: 15 * scale, lineHeight: 1.3, color: INKC }} dangerouslySetInnerHTML={{ __html: lv.health }} />
            <span style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 13 * scale, lineHeight: 1.4, color: MUTEC }} dangerouslySetInnerHTML={{ __html: lv.desc }} />
          </span>
        </div>
      ))}
    </div>
  );
}

// VISUAL 1 — the pyramid. mode="health" (single) or "paired" (finance ‖ health).
window.HierarchyPyramid = function HierarchyPyramid({ mode = "health", scale = 1 }) {
  const paired = mode === "paired";
  const colHead = (t, sub) => (
    <div style={{ marginBottom: Math.round(18 * scale) }}>
      <div style={{
        fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
        textTransform: "uppercase", letterSpacing: "0.20em", fontSize: 12 * scale, fontWeight: 500, color: INKC,
      }}>{t}</div>
      <div style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 12.5 * scale, color: MUTEC, marginTop: Math.round(4 * scale) }}>{sub}</div>
    </div>
  );
  return (
    <div>
      {paired ? (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: Math.round(40 * scale), alignItems: "start" }}>
          <div>
            {colHead("The wealth hierarchy", "How wealth compounds, in order.")}
            <Bands col="finance" scale={scale}/>
          </div>
          <div>
            {colHead("The health hierarchy", "How health compounds — in the same order.")}
            <Bands col="health" scale={scale}/>
          </div>
        </div>
      ) : (
        <Bands col="health" scale={scale}/>
      )}
      <Key scale={scale}/>
    </div>
  );
};

// ── VISUAL 2 — summary table ──────────────────────────────────────────────
const ROWS = [
  {
    n: "01",
    layer: "Stop the bleeding.",
    sub: "Resolve the unresolved significant medical question.",
    why: "The fifteen-minute visit doesn&rsquo;t fit the forty-five minutes of thinking. No specialist is rewarded for staying with your case past the point their specialty has an answer.",
    carte: "The Forensic Review &mdash; a fifteen-to-forty-page written analysis on your open question, produced over about three weeks, with a defensible recommendation and named next steps.",
  },
  {
    n: "02",
    layer: "Automate the maintenance.",
    sub: "Recurring appointments, monitoring, follow-ups.",
    why: "Your PCP doesn&rsquo;t run your calendar. Specialists own single appointments. Even concierge practices sell longer appointments, not the day-to-day operational loop-closing.",
    carte: "Stewardship holds the calendar, tracks open items from past appointments, closes referrals, checks labs in real time, and holds you to the maintenance schedule.",
  },
  {
    n: "03",
    layer: "Do the boring basics excellently.",
    sub: "Customized sleep, strength, cardio, protein &mdash; actually executed.",
    why: "The payment structure rewards appointments, not day-to-day work. Same for concierge practices, which have budget for longer visits but not for accountability.",
    carte: "We identify the specific basics that move the needle most for you, match you with the trainers, chefs, and therapists who execute at the required level, and hold the schedule that makes the plan real.",
  },
  {
    n: "04",
    layer: "Be strategic on the higher-variance choices.",
    sub: "Peptides, panels, newer interventions &mdash; with information alpha.",
    why: "Standard doctors say <em>no</em> to what they can&rsquo;t read up on in a visit. Longevity clinics say <em>yes</em> to what they profit from. Neither pattern is calibrated to you.",
    carte: "An independent physician&rsquo;s judgment on each esoteric decision, with no product to sell and no economic interest in the outcome you choose.",
  },
];

window.SummaryTable = function SummaryTable({ scale = 1 }) {
  const head = (t) => (
    <div style={{
      fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
      textTransform: "uppercase", letterSpacing: "0.16em", fontSize: 10 * scale, fontWeight: 600, color: MUTEC,
    }}>{t}</div>
  );
  const cols = "0.9fr 1.15fr 1.15fr";
  return (
    <div>
      <div style={{
        display: "grid", gridTemplateColumns: cols, gap: Math.round(26 * scale),
        padding: Math.round(12 * scale) + "px 0", borderBottom: "1px solid " + INKC,
      }}>
        {head("Layer")}
        {head("Why the standard system doesn\u2019t provide it")}
        {head("What Carte does about it")}
      </div>
      {ROWS.map((r, i) => (
        <div key={r.n} style={{
          display: "grid", gridTemplateColumns: cols, gap: Math.round(26 * scale),
          padding: Math.round(20 * scale) + "px 0",
          borderBottom: i === ROWS.length - 1 ? "1px solid " + INKC : "1px solid var(--carte-rule)",
          alignItems: "start",
        }}>
          <div>
            <div style={{
              fontFamily: "var(--carte-font-smallcaps)", fontVariantCaps: "all-small-caps",
              letterSpacing: "0.16em", fontSize: 11 * scale, color: MUTEC, marginBottom: Math.round(6 * scale),
            }}>{r.n}</div>
            <div style={{ fontFamily: "var(--carte-font-display)", fontSize: 15 * scale, lineHeight: 1.25, color: INKC, marginBottom: Math.round(5 * scale) }}>{r.layer}</div>
            <div style={{ fontFamily: "var(--carte-font-display)", fontStyle: "italic", fontSize: 12.5 * scale, lineHeight: 1.4, color: MUTEC }} dangerouslySetInnerHTML={{ __html: r.sub }} />
          </div>
          <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13 * scale, lineHeight: 1.55, color: INKC, margin: 0 }} dangerouslySetInnerHTML={{ __html: r.why }} />
          <p style={{ fontFamily: "var(--carte-font-display)", fontSize: 13 * scale, lineHeight: 1.55, color: INKC, margin: 0 }} dangerouslySetInnerHTML={{ __html: r.carte }} />
        </div>
      ))}
    </div>
  );
};
