// ─────────────────────────────────────────────────────────────────────────
// Variation 3 — "The living map"
// One visualization persists across the flow: the 5-driver constellation
// with the Cellular Energy hub at center. Conditions thread INTO the map.
// Levers project OUT of it. Everything navigates by zooming the map.
//
// This is the most opinionated direction — it bets that the framework
// itself is worth surfacing as the primary navigation, not hidden.
// ─────────────────────────────────────────────────────────────────────────

const mapStyles = `
.mp {
  width: 100%; height: 100%;
  background: #0e1416;
  color: #f4f4f5;
  font-family: var(--font-sans);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.mp::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(46,139,139,0.10), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(224,72,72,0.06), transparent 50%);
  pointer-events: none;
}

.mp-bar {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(14,20,22,0.7);
  flex-shrink: 0;
}
.mp-bar .brand { display: flex; align-items: baseline; gap: 8px; }
.mp-bar .brand .mark {
  width: 12px; height: 12px; background: var(--c360-teal);
  transform: rotate(45deg); display: inline-block;
  box-shadow: 0 0 0 3px rgba(27,107,107,0.18);
}
.mp-bar .brand .name { font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; }
.mp-bar .brand .sub { font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.45); }

.mp-bar .crumbs {
  display: flex; gap: 4px; font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.5); justify-content: center;
}
.mp-bar .crumbs .now { color: var(--c360-teal); font-weight: 700; }
.mp-bar .who {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.55);
}
.mp-bar .who .av {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--c360-teal); color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
}

.mp-stage {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  display: grid; grid-template-columns: 280px 1fr 280px;
  overflow: hidden;
}

.mp-rail {
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.mp-rail.right { border-right: none; border-left: 1px solid rgba(255,255,255,0.06); }
.mp-rail .eyebrow { color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 0.14em; }
.mp-rail h2 {
  font-family: var(--font-editorial); font-style: italic;
  font-size: 30px; line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 500;
}
.mp-rail h2 b { font-family: var(--font-sans); font-style: normal; font-weight: 900; color: var(--c360-teal); }
.mp-rail .lede { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.7); }
.mp-rail .lede b { color: white; font-weight: 700; }

.mp-rail .section-title {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.4); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 8px;
}

.cond-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 11px 12px 10px;
  margin-bottom: 6px;
  display: grid; gap: 6px;
}
.cond-card .nm { font-size: 12.5px; font-weight: 700; color: white; }
.cond-card .meta { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.5); }
.cond-card .drvs { display: flex; gap: 3px; }
.cond-card .drvs i {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
}

.synth-stamp {
  background: rgba(27,107,107,0.18);
  border: 1px solid var(--c360-teal);
  border-radius: 10px; padding: 12px 14px;
}
.synth-stamp .lab { font-family: var(--font-mono); font-size: 10px; color: var(--c360-teal); letter-spacing: 0.14em; text-transform: uppercase; }
.synth-stamp .v { font-family: var(--font-mono); font-size: 14px; color: white; margin-top: 4px; font-weight: 600; }
.synth-stamp .sm { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 6px; line-height: 1.5; }

/* CENTER MAP */
.mp-map {
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.mp-map svg { width: 100%; height: 100%; display: block; }

.mp-map .zoom-hud {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,0.45);
}
.mp-map .zoom-hud .ctrl {
  width: 26px; height: 26px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; background: rgba(0,0,0,0.4);
  display: grid; place-items: center; cursor: pointer;
  color: rgba(255,255,255,0.8);
}
.mp-map .legend {
  position: absolute; right: 14px; top: 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 10.5px;
  display: grid; gap: 6px;
  color: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
}
.mp-map .legend .lhead { font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,0.45); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.mp-map .legend .lrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; }
.mp-map .legend .lrow .sw { width: 12px; height: 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15); }
.mp-map .legend .lrow .sw.line { width: 18px; height: 2px; border-radius: 0; border: none; }

.driver-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; font-weight: 700;
  fill: white;
}
.driver-sub {
  font-family: var(--font-sans); font-size: 9.5px;
  fill: rgba(255,255,255,0.55); font-weight: 500;
}
.driver-state-text { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; }

.cond-pin {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  fill: white;
}

.lever-spoke {
  font-family: var(--font-mono); font-size: 10px;
  fill: rgba(255,255,255,0.7); letter-spacing: 0.02em;
}

/* RIGHT RAIL — context shifts per screen */
.lever-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 12px 10px;
  display: grid; gap: 6px;
  margin-bottom: 6px;
}
.lever-tile.start { border-color: var(--c360-teal); background: rgba(27,107,107,0.18); }
.lever-tile .lh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lever-tile .lh .t { font-size: 12.5px; font-weight: 700; color: white; }
.lever-tile .lh .tag { font-family: var(--font-mono); font-size: 9.5px; color: rgba(255,255,255,0.5); }
.lever-tile .copy { font-size: 11.5px; color: rgba(255,255,255,0.65); line-height: 1.5; }

.btn-deep {
  background: var(--c360-teal); color: white;
  border: 1px solid var(--c360-teal);
  padding: 10px 14px; border-radius: 6px;
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.btn-deep.dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }

/* INTAKE-mode: a question card overlays the map's left rail position */
.mp-q {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.mp-q .lab { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.mp-q .h { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 10px; }
.mp-q .chk-list { display: flex; flex-direction: column; gap: 6px; }
.mp-q .chk {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  font-size: 12.5px; line-height: 1.35;
  color: rgba(255,255,255,0.8); cursor: pointer;
}
.mp-q .chk.on { border-color: var(--c360-teal); background: rgba(27,107,107,0.18); color: white; }
.mp-q .chk .box {
  width: 12px; height: 12px; border-radius: 3px;
  border: 1.5px solid rgba(255,255,255,0.4); flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center; font-size: 9px;
}
.mp-q .chk.on .box { background: var(--c360-teal); border-color: var(--c360-teal); color: white; }

/* CTC variant */
.mp-ctc-rail {
  padding: 22px 20px; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
}
.mp-ctc-rail h2 {
  font-family: var(--font-sans); font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  border-bottom: 2px solid rgba(255,255,255,0.4); padding-bottom: 10px;
}
.mp-ctc-rail .sub { font-family: var(--font-mono); font-size: 11px; color: var(--c360-teal); margin-top: -4px; }
.mp-ctc-rail .syn { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.8); }
.mp-ctc-rail .syn b { color: white; font-weight: 700; }
.mp-ctc-rail .syn em { font-family: var(--font-editorial); font-style: italic; }
.mp-ctc-rail .table { display: flex; flex-direction: column; gap: 6px; }
.mp-ctc-rail .table .row {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  font-family: var(--font-mono); font-size: 11px;
}
.mp-ctc-rail .table .row .code { font-weight: 700; }
.mp-ctc-rail .table .row .mech { color: rgba(255,255,255,0.6); font-family: var(--font-sans); font-size: 11.5px; line-height: 1.45; }
.mp-ctc-rail .table .row .state { font-size: 9.5px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.mp-ctc-rail .table .row .state.Activated { background: rgba(220,38,38,0.2); color: #FCA5A5; }
.mp-ctc-rail .table .row .state.Vulnerable { background: rgba(245,158,11,0.2); color: #FCD34D; }
.mp-ctc-rail .table .row .state.Contributing { background: rgba(22,163,74,0.2); color: #86EFAC; }
`;

// ─── The Map — SVG constellation reused across all 4 screens ────────────
function MapConstellation({ persona, mode, hideLevers }) {
  // mode: 'building' (intake), 'story', 'plan', 'clinical'
  const C = { x: 0, y: 0 }; // center (CEP — hub)
  const R = 175;
  // Driver positions: hub center + 4 arms
  const positions = {
    CEP: { x: 0, y: 0, label: "CEP", name: "Cellular Energy", hub: true },
    INF: { x: 0, y: -R, label: "INF", name: "Inflammation" },
    CSR: { x: R, y: 0, label: "CSR", name: "Chemical Signaling" },
    BSI: { x: 0, y: R, label: "BSI", name: "Blood Sugar + Insulin" },
    MF:  { x: -R, y: 0, label: "MF",  name: "Metabolic Flexibility" },
  };

  const drvByCode = Object.fromEntries(persona.drivers.map(d => [d.code, d]));

  // For each driver, derive visual weight from activation
  const driverRadius = (d) => {
    if (!d) return 28;
    return 28 + d.weight * 28; // 28..56
  };

  const driverColor = (code) => {
    const cls = window.DRIVERS[code].cls;
    return `var(--drv-${cls})`;
  };
  const driverHex = (code) => ({
    BSI: "#3B6CE7", CEP: "#2E8B8B", CSR: "#7B3EC4", INF: "#E04848", MF: "#2BB5A0",
  })[code];

  // Conditions: place each near its primary drivers (we hand-place for clarity)
  const conditionPlacements = persona.id === "jordan" ? [
    { name: "Hashimoto's", angle: -45, dist: 270 },
    { name: "MDD",         angle: 110, dist: 250 },
    { name: "Fibromyalgia", angle: -130, dist: 250 },
  ] : [
    { name: "h-EDS?",  angle: -70, dist: 260 },
    { name: "POTS?",   angle: 60,  dist: 260 },
    { name: "MCAS?",   angle: 160, dist: 260 },
    { name: "Anxiety", angle: -160, dist: 240 },
  ];
  const polar = (a, r) => ({ x: Math.cos(a*Math.PI/180)*r, y: Math.sin(a*Math.PI/180)*r });

  // Lever spokes — only show for plan mode (or labelled-faint for story mode)
  const leverSpokes = persona.levers.filter(l => l.tier === "start" || (mode === "plan" && l.tier === "build"));

  return (
    <svg viewBox="-380 -300 760 600" preserveAspectRatio="xMidYMid meet">
      <defs>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="4" result="blur"/>
          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
        </filter>
        <radialGradient id="hubGlow">
          <stop offset="0%" stopColor="#2E8B8B" stopOpacity="0.4"/>
          <stop offset="100%" stopColor="#2E8B8B" stopOpacity="0"/>
        </radialGradient>
      </defs>

      {/* Hub glow */}
      <circle cx={0} cy={0} r={140} fill="url(#hubGlow)"/>

      {/* Connection lines between hub and each driver */}
      {Object.entries(positions).filter(([k]) => k !== "CEP").map(([k, p]) => {
        const d = drvByCode[k];
        const strokeWidth = d ? 1 + d.weight * 2.5 : 1;
        const opacity = d ? 0.25 + d.weight * 0.55 : 0.15;
        return (
          <line key={k} x1={0} y1={0} x2={p.x} y2={p.y}
                stroke={driverHex(k)} strokeWidth={strokeWidth} opacity={opacity}/>
        );
      })}

      {/* Perimeter ring (interactions between non-hub drivers) */}
      <circle cx={0} cy={0} r={R} fill="none" stroke="rgba(255,255,255,0.06)" strokeDasharray="3 4"/>

      {/* Conditions threaded in (lines to primary drivers) */}
      {!hideLevers && conditionPlacements.map((c, i) => {
        const p = polar(c.angle, c.dist);
        const primaryDrivers = persona.drivers.filter(d => d.lead || d.state === "Activated").slice(0, 2);
        return (
          <g key={c.name}>
            {primaryDrivers.map(d => {
              const dp = positions[d.code];
              return (
                <line key={d.code} x1={p.x} y1={p.y} x2={dp.x} y2={dp.y}
                      stroke="rgba(255,255,255,0.18)" strokeWidth="1"
                      strokeDasharray="2 3"/>
              );
            })}
            <rect x={p.x - 38} y={p.y - 12} width={76} height={24} rx={4}
                  fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.25)" strokeWidth="0.8"/>
            <text x={p.x} y={p.y + 4} textAnchor="middle" className="cond-pin">{c.name}</text>
          </g>
        );
      })}

      {/* Lever spokes — only on plan mode */}
      {mode === "plan" && leverSpokes.map((l, i) => {
        // Project from the primary driver this lever targets
        const targetCode = l.why.split('·')[0].replace('DRV-','').trim();
        const dp = positions[targetCode] || positions.CEP;
        // direction = from hub through driver, extended outward
        const angle = Math.atan2(dp.y - 0, dp.x - 0);
        // Spread multiple levers around the driver
        const idx = leverSpokes.filter(x => x.why.split('·')[0].replace('DRV-','').trim() === targetCode).indexOf(l);
        const spread = (idx - 0.5) * 0.4;
        const a = angle + spread;
        const out = { x: dp.x + Math.cos(a)*110, y: dp.y + Math.sin(a)*110 };
        return (
          <g key={l.key}>
            <line x1={dp.x} y1={dp.y} x2={out.x} y2={out.y}
                  stroke={l.tier === "start" ? "var(--c360-teal)" : "rgba(255,255,255,0.3)"}
                  strokeWidth={l.tier === "start" ? 2 : 1.2}/>
            <circle cx={out.x} cy={out.y} r={4}
                    fill={l.tier === "start" ? "var(--c360-teal)" : "rgba(255,255,255,0.4)"}/>
            <text x={out.x + (Math.cos(a) > 0 ? 8 : -8)} y={out.y + 4}
                  textAnchor={Math.cos(a) > 0 ? "start" : "end"}
                  className="lever-spoke">{l.title}</text>
          </g>
        );
      })}

      {/* Drivers (drawn last so they overlap lines + condition pins) */}
      {Object.entries(positions).map(([k, p]) => {
        const d = drvByCode[k];
        const r = driverRadius(d);
        const color = driverHex(k);
        const stateLabel = d ? d.state.toUpperCase() : "—";
        return (
          <g key={k}>
            {/* Outer ring pulses for activation */}
            {d && d.state === "Activated" && (
              <circle cx={p.x} cy={p.y} r={r + 10} fill="none" stroke={color} strokeWidth="1" opacity="0.45"/>
            )}
            <circle cx={p.x} cy={p.y} r={r}
                    fill={p.hub ? "#0e1416" : "rgba(14,20,22,0.85)"}
                    stroke={color} strokeWidth={p.hub ? 3 : 2}
                    filter={d && d.state === "Activated" ? "url(#glow)" : undefined}/>
            <text x={p.x} y={p.y - 4} textAnchor="middle" className="driver-label" style={{fill: color}}>
              {p.label}
            </text>
            <text x={p.x} y={p.y + 9} textAnchor="middle" className="driver-sub">
              {p.hub ? "hub" : stateLabel.toLowerCase()}
            </text>
            {d && (
              <text x={p.x} y={p.y + 22} textAnchor="middle" className="driver-state-text" style={{fill: 'rgba(255,255,255,0.55)'}}>
                {Math.round(d.weight*100)}%
              </text>
            )}
          </g>
        );
      })}
    </svg>
  );
}

function MpBar({ persona, current, crumbs }) {
  return (
    <div className="mp-bar">
      <div className="brand">
        <span className="mark"></span>
        <span className="name">Clarity360</span>
        <span className="sub">· living map</span>
      </div>
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            <span className={i === current ? "now" : ""}>{c}</span>
            {i < crumbs.length - 1 && <span>›</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="who">
        <span className="av">{persona.name[0]}</span>
        <span>{persona.name.toLowerCase()} · session 1</span>
      </div>
    </div>
  );
}

function MapZoomHud() {
  return (
    <>
      <div className="zoom-hud">
        <span className="ctrl">+</span>
        <span className="ctrl">−</span>
        <span>·</span>
        <span>drag to pan · scroll to zoom</span>
      </div>
      <div className="legend">
        <div className="lhead">Activation</div>
        <div className="lrow"><span className="sw" style={{background:'#E04848'}}/>Activated</div>
        <div className="lrow"><span className="sw" style={{background:'#F59E0B'}}/>Vulnerable</div>
        <div className="lrow"><span className="sw" style={{background:'#16A34A'}}/>Contributing</div>
        <div className="lhead" style={{marginTop:6}}>Map</div>
        <div className="lrow"><span className="sw line" style={{background:'#2E8B8B'}}/>hub link</div>
        <div className="lrow"><span className="sw line" style={{background:'rgba(255,255,255,0.4)', borderTop:'1px dashed'}}/>condition</div>
      </div>
    </>
  );
}

// SCREEN 1 — Intake (the map is empty / building)
function MpIntake({ persona, density }) {
  const isJ = persona.id === "jordan";
  return (
    <div className="mp" data-density={density}>
      <MpBar persona={persona} current={0} crumbs={["Building your map", "Synthesis", "My Health Story", "My Action Plan", "Care Team"]} />
      <div className="mp-stage">
        <div className="mp-rail">
          <span className="eyebrow">Intake · section 4 of 12</span>
          <h2>Every answer<br/>lights up a <b>part of the map</b>.</h2>
          <p className="lede">
            You don't have to know what <b>INF</b> or <b>CSR</b> mean — we'll explain when it matters. For now, just answer in your own words. Watch the map on the right take shape as you go.
          </p>
          <div style={{marginTop:'auto', display:'flex', flexDirection:'column', gap:10}}>
            <div className="synth-stamp">
              <div className="lab">Coverage</div>
              <div className="v">4 of 5 drivers · live</div>
              <div className="sm">One more cluster and we'll have enough to start a synthesis.</div>
            </div>
            <button className="btn-deep">Continue · 4 minutes left <span>→</span></button>
          </div>
        </div>

        <div className="mp-map">
          <MapConstellation persona={persona} mode="building" hideLevers={true}/>
          <MapZoomHud/>
        </div>

        <div className="mp-rail right">
          <div className="mp-q">
            <div className="lab">Reactivity, flares, and unpredictable patterns</div>
            <div className="h">Which of these has happened in the last month?</div>
            <div className="chk-list">
              {(isJ ? [
                { l: "Flare-up I couldn't link to anything", on: true },
                { l: "Bad reaction to a food I usually tolerate", on: false },
                { l: "Symptoms got worse during stress", on: true },
                { l: "Days I felt 'wrong' all over with no cause", on: true },
                { l: "Reaction to a new medication or supplement", on: false },
              ] : [
                { l: "Hot flushing after eating", on: true },
                { l: "A sudden allergic-feeling reaction", on: true },
                { l: "Heart racing while sitting still", on: true },
                { l: "Itching or hives without contact", on: true },
                { l: "GI episode with no clear trigger", on: true },
              ]).map((it, i) => (
                <div key={i} className={"chk" + (it.on ? " on" : "")}>
                  <span className="box">{it.on ? "✓" : ""}</span>
                  <span>{it.l}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{fontFamily:'var(--font-mono)', fontSize:10, color:'rgba(255,255,255,0.4)', letterSpacing:'0.06em', marginTop:4}}>
            this cluster lights up: <span style={{color:'#E04848', fontWeight:700}}>INF</span>{!isJ && <> · <span style={{color:'#7B3EC4', fontWeight:700}}>CSR</span></>}
          </div>
        </div>
      </div>
    </div>
  );
}

// SCREEN 2 — Health Story (map at center, narrative around it)
function MpStory({ persona, density, depth }) {
  const isJ = persona.id === "jordan";
  return (
    <div className="mp" data-density={density}>
      <MpBar persona={persona} current={2} crumbs={["Building your map", "Synthesis", "My Health Story", "My Action Plan", "Care Team"]} />
      <div className="mp-stage">
        <div className="mp-rail">
          <span className="eyebrow">My health story · v1.0</span>
          <h2>What's <b>driving</b> what,<br/>{persona.name}.</h2>
          <p className="lede">
            {isJ
              ? <>Your three diagnoses share more upstream physiology than they share clinical specialties. <b>The map shows it</b>: the lines from Hashimoto's, MDD, and Fibromyalgia all converge on the same two lit-up drivers.</>
              : <>What you've been told are three separate "maybe" diagnoses are <b>three outlets of one upstream pattern</b>. The map shows where the lines converge.</>}
          </p>
          {depth !== "plain" && (
            <p className="lede" style={{marginTop:0}}>
              The <b>hub</b> at the center is mitochondrial function — it's affected by everything else, and when it's depleted, every other driver gets harder to work with. That's why fatigue is downstream of so much.
            </p>
          )}
          <div className="section-title" style={{marginTop:'auto'}}>Conditions on the map</div>
          {persona.conditions.map(c => (
            <div className="cond-card" key={c}>
              <div className="nm">{c}</div>
              <div className="meta">Threads through 3 drivers</div>
              <div className="drvs">
                <i style={{background:'#E04848'}}/><i style={{background:'#2E8B8B'}}/><i style={{background:'#7B3EC4'}}/>
              </div>
            </div>
          ))}
        </div>

        <div className="mp-map">
          <MapConstellation persona={persona} mode="story"/>
          <MapZoomHud/>
        </div>

        <div className="mp-rail right">
          <div className="synth-stamp">
            <div className="lab">The headline</div>
            <div className="v">{persona.lead}</div>
          </div>
          <div className="section-title">Lit-up drivers · in order</div>
          {persona.drivers.filter(d => d.weight > 0.5).map(d => {
            const cls = window.DRIVERS[d.code].cls;
            return (
              <div className="cond-card" key={d.code}>
                <div className="nm" style={{display:'flex', alignItems:'center', gap:8}}>
                  <span style={{width:10, height:10, borderRadius:999, background:`var(--drv-${cls})`}}/>
                  {d.code} · {window.DRIVERS[d.code].name}
                </div>
                <div className="meta">{d.state} · {Math.round(d.weight*100)}% load</div>
                <div style={{fontSize:11, color:'rgba(255,255,255,0.6)', lineHeight:1.45}}>{d.why.split('.').slice(0,1).join('.')}.</div>
              </div>
            );
          })}
          <button className="btn-deep" style={{marginTop:'auto'}}>Continue to your levers <span>→</span></button>
        </div>
      </div>
    </div>
  );
}

// SCREEN 3 — Action Plan (levers project outward as spokes)
function MpPlan({ persona, density }) {
  const ldata = window.LEVERS;
  const starts = persona.levers.filter(l => l.tier === "start");
  const builds = persona.levers.filter(l => l.tier === "build");

  return (
    <div className="mp" data-density={density}>
      <MpBar persona={persona} current={3} crumbs={["Building your map", "Synthesis", "My Health Story", "My Action Plan", "Care Team"]} />
      <div className="mp-stage">
        <div className="mp-rail">
          <span className="eyebrow">My action plan · this month</span>
          <h2>The <b>two spokes</b><br/>to start with.</h2>
          <p className="lede">
            The bright teal spokes coming off your map are the levers we're starting with — <b>chosen for highest return against your loudest drivers</b>. Faint spokes are next-up; ghost spokes are "later".
          </p>
          <div className="section-title" style={{marginTop:14}}>Start here · this week</div>
          {starts.map(l => (
            <div className="lever-tile start" key={l.key}>
              <div className="lh">
                <span className="t">{l.title}</span>
                <span className="tag" style={{color:'white'}}>{l.why}</span>
              </div>
              <div className="copy">{l.copy}</div>
            </div>
          ))}
          <button className="btn-deep" style={{marginTop:'auto'}}>I'll start with these <span>→</span></button>
        </div>

        <div className="mp-map">
          <MapConstellation persona={persona} mode="plan"/>
          <MapZoomHud/>
        </div>

        <div className="mp-rail right">
          <span className="eyebrow">Build toward · weeks 3–6</span>
          {builds.map(l => (
            <div className="lever-tile" key={l.key}>
              <div className="lh">
                <span className="t">{l.title}</span>
                <span className="tag">{l.why}</span>
              </div>
              <div className="copy">{l.copy}</div>
            </div>
          ))}
          <div className="synth-stamp" style={{marginTop:'auto'}}>
            <div className="lab">How this map updates</div>
            <div className="sm" style={{marginTop:0}}>
              Your driver loads will redraw as you log how the levers land. Expect the <b style={{color:'white'}}>INF</b> ring to ease first.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// SCREEN 4 — Care Team Companion (Clinical) — same map, clinical annotation
function MpCtc({ persona, density }) {
  const drvMap = window.DRIVERS;
  return (
    <div className="mp" data-density={density}>
      <MpBar persona={persona} current={4} crumbs={["Building your map", "Synthesis", "My Health Story", "My Action Plan", "Care Team Companion"]} />
      <div className="mp-stage">
        <div className="mp-ctc-rail">
          <h2>Care Team Companion · Clinical</h2>
          <div className="sub">{persona.name}, {persona.age} · {persona.conditions.join(" · ")}</div>
          <div className="syn">
            {persona.id === "jordan" ? (
              <>Driver picture dominated by <b>DRV-INF</b> + <b>DRV-CEP</b>, with secondary <b>DRV-CSR</b> explaining the affective component. Persistent mitochondrial dysfunction independent of TSH normalization (<em>2025 euthyroid Hashimoto's metabolic trial</em>) is the most likely mechanism for refractory fatigue.</>
            ) : (
              <>Pattern consistent with <b>EDS / POTS / MCAS</b> comorbidity cluster (Bonamichi-Santos et al., 2018). Mast cell mediators (<b>DRV-INF</b>) and autonomic dysregulation (<b>DRV-CSR</b>) are leads; mitochondrial impairment is downstream.</>
            )}
          </div>
          <div className="section-title" style={{color:'rgba(255,255,255,0.5)'}}>Driver activation</div>
          <div className="table">
            {persona.drivers.map(d => (
              <div className="row" key={d.code}>
                <span className="code" style={{color: `var(--drv-${drvMap[d.code].cls})`}}>{d.code}{d.hub ? '·H' : ''}</span>
                <span className="mech">{d.why.split('.').slice(0,1).join('.')}.</span>
                <span className={"state " + d.state}>{d.state}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="mp-map" style={{gridColumn: '2 / span 2', borderLeft: '1px solid rgba(255,255,255,0.06)'}}>
          <MapConstellation persona={persona} mode="plan"/>
          <MapZoomHud/>
          <div style={{position:'absolute', left:14, top:14, background:'rgba(0,0,0,0.45)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:8, padding:'10px 12px', backdropFilter:'blur(4px)', maxWidth:280}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:9.5, color:'rgba(255,255,255,0.5)', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:6}}>Lead leverage</div>
            {persona.levers.filter(l => l.tier === 'start').map(l => (
              <div key={l.key} style={{fontSize:11.5, color:'white', marginBottom:5, display:'flex', justifyContent:'space-between', gap:14}}>
                <span style={{fontWeight:600}}>{l.title}</span>
                <span style={{fontFamily:'var(--font-mono)', fontSize:10, color:'rgba(255,255,255,0.5)'}}>{l.why}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function injectMapStyles() {
  if (document.getElementById("map-styles")) return;
  const el = document.createElement("style");
  el.id = "map-styles";
  el.textContent = mapStyles;
  document.head.appendChild(el);
}
injectMapStyles();

Object.assign(window, { MpIntake, MpStory, MpPlan, MpCtc, MapConstellation });
