/* splash-sections.jsx — Minerva Splash (brand root) — sections + App
   Arc: §1 hero → §2 The Minerva Way (canonical home of the method) → §3 the two alternatives →
   §4 split panel: Visual-Digital Knowledge™ (the shared thread, left) × Knowledge Execution
   (the category, stated once, right) → §5 trust → §6 CTA.
   Depends on visdi-shared.jsx + splash-shared.jsx */

/* ───────────────────────── §1 · Hero — umbrella identity ───────────────────────── */
function SplashHero() {
  return (
    <section data-screen-label="§1 Hero" id="top" style={{ position: "relative", overflow: "hidden",
      background: "linear-gradient(165deg, #FFFFFF 0%, #F4F7FB 100%)", minHeight: 640,
      display: "flex", alignItems: "center" }}>
      {/* Classic-site hero photo: hands + stethoscope + gold circuit, white-isolated subject */}
      <img src={window.__asset("assets/photo-main-hero.jpg")} alt="" aria-hidden="true" style={{
        position: "absolute", top: 0, right: 0, height: "100%", width: "60%",
        objectFit: "cover", objectPosition: "right center", pointerEvents: "none", userSelect: "none",
        WebkitMaskImage: "linear-gradient(to right, transparent 0%, #000 34%)",
        maskImage: "linear-gradient(to right, transparent 0%, #000 34%)" }} />
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "96px 48px 88px", width: "100%", position: "relative" }}>
        <div data-animate="" style={{ maxWidth: 600 }}>
          <Eyebrow color="var(--minerva-blue)">Minerva Knowledge Management</Eyebrow>
          <h1 style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 62, lineHeight: 1.06,
            letterSpacing: "-0.025em", color: "var(--ink-900)", margin: "24px 0 0" }}>
            We build the knowledge layer regulated life sciences runs on.
          </h1>
          <HeadlineDivider color="var(--minerva-gold)" style={{ margin: "22px 0 24px" }} />
          <p style={{ fontSize: 20, lineHeight: 1.65, color: "var(--ink-700)", margin: 0, maxWidth: 540 }}>
            Compliant, AI-ready knowledge — so therapies reach patients faster, smarter, safer.
            One firm, two divisions, one method: <strong style={{ color: "var(--ink-900)" }}>The Minerva Way</strong>.
          </p>
        </div>
      </div>
    </section>);

}

/* ───────────────────────── §2 · The Minerva Way — the method's single canonical home ─────────────────────────
   The canonical master diagram lives ONLY here — both division sites keep the concept in words,
   but neither redraws the flow. Stage colors: Diagnose/Know = gold · Connect = blue · Operate = green. */

/* The full stage-by-stage walk-through — moved here from the VISDI Method page so the
   detailed flow lives alongside its canonical diagram. */
const METHOD_STAGES = [
{ n: "01", name: "Visualize", color: "#4A86E8", bullets: ["Make complex systems, workflows, and risks visible to teams.", "Record the raw reality of operations.", "Capture the tacit knowledge, workarounds, and sequences that currently live only in someone's head."] },
{ n: "02", name: "Structure", color: "#4A86E8", bullets: ["Organize fragmented data into coherent technical information — categorized and related.", "Loose facts become a connected, navigable body of information — defined by type, fields, and the links between pieces.", "It's about the relationships between pieces, not just tidying — which is what sets up Digitalize."] },
{ n: "03", name: "Digitalize", color: "#4A86E8", bullets: ["Commit structured information to searchable, traceable, versioned digital assets.", "Not scanning PDFs — encode reasoning a model can query and an auditor can follow; those three properties are what make the asset auditable.", "The output hands directly to the Trust Gate — ready for human verification."] },
{ gate: "Trust Gate", name: "Virtual Verification", color: "#E0A230", bullets: ["AI output earns the status of knowledge only after human sign-off.", "A candidate knowledge packet, reviewed and authorized by a qualified person, becomes verified executable knowledge.", "A high-stakes, irreversible step that cannot be skipped."] },
{ n: "04", name: "Knowledge-Enable", color: "#069348", bullets: ["Verified information becomes executable knowledge — it stops being a record and becomes something that can be acted on.", "Usable by humans, AI agents, and robots — the point where AI agents become first-class consumers, because the knowledge is now legible and trusted.", "Only verified knowledge reaches here — downstream of the Trust Gate by design; it produces the KNOWLEDGE substrate: Verified · Enabled · Trusted."] },
{ n: "05", name: "Execute", color: "#04975e", bullets: ["Apply compliant knowledge to transform original condition.", "The same verified packet trains a technician, answers an AI agent's query and instructs a robot.", "Process execution under risk-based human-in-the-loop at the end."] },
{ gate: "Performance Gate", name: "Virtual Monitoring", color: "#58499c", bullets: ["Monitor, measure, and adjust compliant execution over time.", "Through KPI dashboards, VLM readouts, and electronic-record signals.", "Every turn of the loop raises the floor for the next."] }];

const METHOD_ICONS = {
  "Visualize": "assets/method-ico-visualize.png",
  "Structure": "assets/method-ico-structure.png",
  "Digitalize": "assets/method-ico-digitalize.png",
  "Virtual Verification": "assets/method-ico-verification.png",
  "Knowledge-Enable": "assets/method-ico-knowledge.png",
  "Execute": "assets/method-ico-execute.png",
  "Virtual Monitoring": "assets/method-ico-monitoring.png"
};

/* The two bookend world-states that open and close the Minerva Way flow.
   Neutral world-state markers — NOT stages — so they carry a neutral tan tone
   and the Minerva globe mark, never the gold/blue/green stage colors. */
const BOOKEND_TAN = "#C2A878";
const BOOKEND_GREEN = "#6FB58E";
/* ORW = neutral tan, CCW = green (the changed/compliant world). */
function bookendTone(code) {
  return code === "CCW" ?
  { tone: BOOKEND_GREEN, soft: "#A9CCB5" } :
  { tone: BOOKEND_TAN, soft: "#C9B894" };
}
const MINERVA_WAY_BOOKENDS = {
  ORW: {
    code: "ORW", label: "Original World", def: "The physical reality where data originates.",
    substrate: "DATA — Raw Reality",
    bullets: [
    "The input — fragmented, raw, pre-knowledge reality, before any of it is made legible.",
    "Everything downstream acts on this starting state.",
    "The Humans swim lane begins here, with data and information collection."]

  },
  CCW: {
    code: "CCW", label: "Compliant Changed World", def: "Reality, altered by knowledge-driven action.",
    substrate: "EXECUTION — Compliant Action",
    bullets: [
    "The output — reality transformed by verified-knowledge-driven, compliant execution.",
    "The payoff of the whole flow: quality, accessible, on-time outcomes.",
    "Every change event and KPI here feeds the next turn of the loop."]

  }
};

/* The Minerva globe/sphere mark used on the ORW + CCW world-state boxes in the
   canonical diagram — a circle crossed by a meridian and equator. */
function SphereMark({ size = 84, color = BOOKEND_TAN, strokeWidth = 2, rotate = 90 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true" style={{ display: "block", transform: `rotate(${rotate}deg)` }}>
      <circle cx="24" cy="24" r="19" stroke={color} strokeWidth={strokeWidth} />
      <line x1="5" y1="24" x2="43" y2="24" stroke={color} strokeWidth={strokeWidth} />
      <line x1="24" y1="5" x2="24" y2="43" stroke={color} strokeWidth={strokeWidth} />
      <ellipse cx="24" cy="24" rx="9" ry="19" stroke={color} strokeWidth={strokeWidth} />
    </svg>);

}

/* A bookend row — visually distinct from stages: tan-tinted card, globe mark,
   definition line, role bullets, and the substrate band it anchors. */
function BookendRow({ data, connector }) {
  const { code, label, def, substrate, bullets } = data;
  const { tone, soft } = bookendTone(code);
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
      <div>
        <h3 style={{ fontSize: 28, fontWeight: 800, color: "#fff", fontFamily: "var(--wix-display)",
          margin: "0 0 6px", letterSpacing: "-0.02em" }}>
          <span style={{ color: tone }}>{code} · </span>{label}
        </h3>
        <p style={{ fontSize: 17, fontStyle: "italic", color: soft, margin: "0 0 16px", lineHeight: 1.5 }}>{def}</p>
        <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, maxWidth: 680 }}>
          {bullets.map((b, bi) =>
          <li key={bi} style={{ display: "flex", gap: 13, alignItems: "flex-start",
            fontSize: 17, lineHeight: 1.55, color: "#D2E3F2" }}>
              <span style={{ flexShrink: 0, width: 7, height: 7, borderRadius: "50%", background: tone, marginTop: 8 }} />
              <span>{b}</span>
            </li>
          )}
        </ul>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 9, marginTop: 18,
          fontSize: 12.5, fontWeight: 700, letterSpacing: "0.06em", color: "#9FB5CD",
          fontFamily: "var(--wix-text)" }}>
          <span style={{ textTransform: "uppercase", letterSpacing: "0.12em", color: tone }}>Anchors substrate</span>
          <span style={{ color: "#7F93AB" }}>›</span>
          <span style={{ color: "#C9D6E6" }}>{substrate}</span>
        </div>
      </div>
      <div>
        <SphereMark size={84} color={tone} strokeWidth={2} rotate={code === "CCW" ? 180 : 90} />
      </div>
    </div>);

}

/* The LEARN · COMPOUND return loop — closes CCW back to ORW so the flow reads
   as a compounding cycle, not a dead-ended left-to-right line. */
function LearnCompoundLoop() {
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center",
      padding: "26px 30px", margin: "22px -30px 0",
      background: "rgba(255,255,255,0.025)", border: "1px dashed rgba(194,168,120,0.5)", borderRadius: 14 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, margin: "0 0 7px" }}>
        <span style={{ fontSize: 13, fontWeight: 800, letterSpacing: "0.16em", textTransform: "uppercase",
          color: BOOKEND_TAN, fontFamily: "var(--wix-text)" }}>Learn · Compound</span>
        <span style={{ fontSize: 12.5, color: "#8FA4BC", fontFamily: "var(--wix-text)" }}>CCW → ORW · the return loop</span>
      </div>
      <p style={{ fontSize: 16.5, lineHeight: 1.55, color: "#C9D6E6", margin: "0 auto", maxWidth: 680 }}>
        Every turn of the loop changes the world it started from. KPIs and change events from each cycle
        raise the floor for the next — the <strong style={{ color: "#fff", fontWeight: 700 }}>Compliant Changed World</strong> of
        one cycle becomes the <strong style={{ color: "#fff", fontWeight: 700 }}>Original World</strong> of the next.
      </p>
    </div>);

}
/* ── Dark-theme recreation of the canonical Minerva Way flow diagram ──
   Data-driven (FLOW): each entry is one box, ORW → CCW. Rendered by type via
   FlowBookend / FlowStage / FlowGate. Built as a component (not the flat PNG)
   so each box can become an interactive button in a later pass. Colors match
   both the original flowchart and the detail walkthrough below. */
const FLOW_BLUE = "#4A86E8";
const MINERVA_FLOW = [
{ type: "bookend", id: "ORW", code: "ORW", label: "Original World" },
{ type: "stage", id: "visualize", name: "Visualize", color: FLOW_BLUE, icon: "assets/method-ico-visualize.png" },
{ type: "stage", id: "structure", name: "Structure", color: FLOW_BLUE, icon: "assets/method-ico-structure.png" },
{ type: "stage", id: "digitalize", name: "Digitalize", color: FLOW_BLUE, icon: "assets/method-ico-digitalize.png" },
{ type: "gate", id: "verification", name: "Virtual Verification", color: "#E0A230", icon: "assets/method-ico-verification.png", pill: "Trust Gate" },
{ type: "stage", id: "knowledge", name: "Knowledge-Enable", color: "#069348", icon: "assets/method-ico-knowledge.png" },
{ type: "stage", id: "execute", name: "Execute", color: "#04975e", icon: "assets/method-ico-execute.png" },
{ type: "gate", id: "monitoring", name: "Virtual Monitoring", color: "#58499C", icon: "assets/method-ico-monitoring.png", pill: "KPI" },
{ type: "bookend", id: "CCW", code: "CCW", label: "Compliant Changed World" }];

const DIAG_BG = "#102342";

function FlowArrow() {
  return (
    <div style={{ flex: "0 0 16px", display: "flex", alignItems: "center", justifyContent: "center", alignSelf: "center" }}>
      <svg width="10" height="14" viewBox="0 0 10 14" fill="none">
        <path d="M1 1 L9 7 L1 13 Z" fill="#E0A230" />
      </svg>
    </div>);

}

function FlowStage({ data, selected, onClick }) {
  const { name, color, icon } = data;
  return (
    <div onClick={onClick} role="button" tabIndex={0} aria-pressed={selected}
    onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();onClick();}}}
    style={{ flex: "1 1 0", minWidth: 0, minHeight: 150, background: "#0F1E36",
      border: selected ? `1px solid ${color}` : "1px solid rgba(255,255,255,0.10)", borderRadius: 12, overflow: "hidden",
      display: "flex", flexDirection: "column", alignItems: "center", paddingBottom: 15,
      cursor: "pointer", opacity: selected ? 1 : 0.72,
      boxShadow: selected ? `0 0 0 1px ${color}, 0 10px 29px ${color}40` : "none",
      transition: "opacity .2s, box-shadow .2s, border-color .2s" }}>
      <div style={{ alignSelf: "stretch", height: 8, background: color }} />
      <div style={{ marginTop: 14, fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: name === "Knowledge-Enable" ? 13 : 14.5, color: "#fff",
        textAlign: "center", lineHeight: 1.14, letterSpacing: "-0.01em", padding: "0 6px" }}>{name}</div>
      <div style={{ width: 22, height: 3, borderRadius: 2, background: color, margin: "9px 0 0" }} />
      <img src={window.__asset(icon)} alt="" aria-hidden="true" style={{ width: 44, height: 44, objectFit: "contain", marginTop: "auto" }} />
    </div>);

}

function FlowBookend({ data, selected, onClick }) {
  const { code, label } = data;
  const { tone, soft } = bookendTone(code);
  return (
    <div onClick={onClick} role="button" tabIndex={0} aria-pressed={selected}
    onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();onClick();}}}
    style={{ flex: "1 1 0", minWidth: 0, minHeight: 150, background: `${tone}1C`,
      border: selected ? `1px solid ${tone}` : `1px solid ${tone}55`, borderRadius: 12, display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center", gap: 9, padding: "18px 8px",
      cursor: "pointer", opacity: selected ? 1 : 0.72,
      boxShadow: selected ? `0 0 0 1px ${tone}, 0 10px 32px ${tone}46` : "none",
      transition: "opacity .2s, box-shadow .2s, border-color .2s" }}>
      <SphereMark size={40} color={tone} strokeWidth={2.4} rotate={code === "CCW" ? 180 : 90} />
      <div style={{ fontFamily: "var(--wix-display)", fontWeight: 900, fontSize: 19, color: tone, letterSpacing: "0.02em" }}>{code}</div>
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.10em", textTransform: "uppercase",
        color: soft, textAlign: "center", lineHeight: 1.3 }}>{label}</div>
    </div>);

}

function FlowGate({ data, selected, onClick }) {
  const { name, color, icon, pill } = data;
  return (
    <div onClick={onClick} role="button" tabIndex={0} aria-pressed={selected}
    onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();onClick();}}}
    style={{ flex: "1.25 1 0", minWidth: 0, display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center", cursor: "pointer",
      opacity: selected ? 1 : 0.72, transition: "opacity .2s" }}>
      <div style={{ position: "relative", width: "100%", height: 142, display: "flex",
        alignItems: "center", justifyContent: "center" }}>
        <svg viewBox="0 0 100 106" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", filter: selected ? `drop-shadow(0 7px 18px ${color}70)` : "none" }}>
          <polygon points="26,3 74,3 97,53 74,103 26,103 3,53" fill={selected ? `${color}33` : `${color}22`} stroke={color} strokeWidth={selected ? 3 : 2} vectorEffect="non-scaling-stroke" />
        </svg>
        <div style={{ position: "relative", display: "flex", flexDirection: "column", alignItems: "center", gap: 8, padding: "0 10px" }}>
          <Icon name="check-circle" size={19} color={color} strokeWidth={2.4} />
          <div style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 12.5, color: "#fff", textAlign: "center", lineHeight: 1.1 }}>{name}</div>
          <img src={window.__asset(icon)} alt="" aria-hidden="true" style={{ width: 42, height: 42, objectFit: "contain" }} />
        </div>
      </div>
      <div style={{ marginTop: -11, position: "relative", zIndex: 1, background: color,
        color: pill === "Trust Gate" ? "#0A1426" : "#fff",
        fontSize: 9, fontWeight: 800, letterSpacing: "0.12em", textTransform: "uppercase",
        padding: "4px 11px", borderRadius: 999, whiteSpace: "nowrap" }}>{pill}</div>
    </div>);

}

function MinervaWayDiagram({ active, onSelect }) {
  return (
    <div className="mway-inner" style={{ position: "relative", paddingTop: 44 }}>
      {/* LEARN · COMPOUND return loop — spans the top, CCW → ORW */}
      <div style={{ position: "absolute", top: 6, left: "5.5%", right: "5.5%", height: 30, pointerEvents: "none" }}>
        <div style={{ position: "absolute", left: 0, right: 0, top: 20, borderTop: "2px dashed rgba(159,181,205,0.5)" }} />
        <div style={{ position: "absolute", left: 0, top: 20, height: 20, borderLeft: "2px dashed rgba(159,181,205,0.5)" }} />
        <div style={{ position: "absolute", right: 0, top: 20, height: 20, borderLeft: "2px dashed rgba(159,181,205,0.5)" }} />
        {/* arrowhead pointing down into ORW (left end) */}
        <svg width="13" height="9" viewBox="0 0 13 9" style={{ position: "absolute", left: -5.5, top: 38 }}>
          <path d="M6.5 9 L1 1.5 L12 1.5 Z" fill="rgba(159,181,205,0.72)" />
        </svg>
        <div style={{ position: "absolute", left: "50%", top: 20, transform: "translate(-50%,-50%)", background: DIAG_BG, padding: "0 14px" }}>
          <span style={{ fontSize: 12.5, fontWeight: 800, letterSpacing: "0.16em", textTransform: "uppercase", color: "#7FA9D6", fontFamily: "var(--wix-text)" }}>Learn · Compound</span>
        </div>
      </div>

      {/* The flow row */}
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        {MINERVA_FLOW.map((item, i) => {
          const common = { data: item, selected: active === i, onClick: () => onSelect(i) };
          return (
            <React.Fragment key={item.id}>
              {item.type === "bookend" && <FlowBookend {...common} />}
              {item.type === "stage" && <FlowStage {...common} />}
              {item.type === "gate" && <FlowGate {...common} />}
              {i < MINERVA_FLOW.length - 1 && <FlowArrow />}
            </React.Fragment>);

        })}
      </div>
    </div>);

}

/* A single stage/gate detail (standalone) — shown one at a time, driven by the diagram buttons. */
function StageDetail({ data }) {
  const { n, name, color, bullets, gate } = data;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
      <div>
        {gate &&
        <span style={{ display: "inline-block", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em",
          textTransform: "uppercase", color, background: `${color}16`, border: `1px solid ${color}40`,
          borderRadius: 999, padding: "4px 13px", marginBottom: 12, fontFamily: "var(--wix-text)" }}>{gate}</span>
        }
        <h3 style={{ fontSize: 28, fontWeight: 800, color: "#fff", fontFamily: "var(--wix-display)",
          margin: "0 0 14px", letterSpacing: "-0.02em" }}>
          {!gate && <span style={{ color }}>{n} · </span>}{name}
        </h3>
        <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10, maxWidth: 680 }}>
          {bullets.map((b, bi) =>
          <li key={bi} style={{ display: "flex", gap: 13, alignItems: "flex-start",
            fontSize: 17, lineHeight: 1.55, color: "#D2E3F2" }}>
              <span style={{ flexShrink: 0, width: 7, height: 7, borderRadius: "50%", background: color, marginTop: 8 }} />
              <span>{b}</span>
            </li>
          )}
        </ul>
      </div>
      <img src={window.__asset(METHOD_ICONS[name])} alt="" aria-hidden="true"
      style={{ width: 84, height: 84, objectFit: "contain", flexShrink: 0, justifySelf: "end" }} />
    </div>);

}

function MinervaWaySection() {
  const [active, setActive] = React.useState(0);
  const steps = [
  { key: "diagnose", n: "01", icon: "compass", title: "Diagnostic",
    body: "Map what your teams know, where it lives, and what stands between it and execution." },
  { key: "connect", n: "02", icon: "plug", title: "Connect",
    body: "Wire verified knowledge into the people, agents, and systems that act on it." },
  { key: "operate", n: "03", icon: "gauge", title: "Operate",
    body: "Run day-to-day work on the knowledge layer — governed, auditable, compounding." }];

  return (
    <section data-screen-label="§2 The Minerva Way" id="method" style={{ position: "relative", overflow: "hidden",
      background: "linear-gradient(155deg, #0A1426 0%, #0D1C36 55%, #081420 100%)", padding: "104px 48px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", position: "relative" }}>
        <SectionHead dark eyebrow="The Method" eyebrowColor="var(--minerva-gold)" title="The Minerva Way." maxWidth={1120} leadMaxWidth={1120} leadNoWrap
        lead="One method runs through everything Minerva does — explained once, here. The spine is Diagnose → Connect → Operate." />

        {/* The stage spine — the one fixed graphic rule */}
        <div data-stagger="" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, margin: "30px 0 0" }}>
          {steps.map(({ key, n, icon, title, body }) => {
            const s = STAGE[key];
            return (
              <div key={key} style={{ background: "rgba(255,255,255,0.03)", border: `1px solid ${s.border}`, borderTop: `4px solid ${s.color}`,
                borderRadius: 14, padding: "26px 28px" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
                  <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center",
                    width: 42, height: 42, borderRadius: 11, background: s.bg }}>
                    <SplashIcon name={icon} size={21} color={s.color} />
                  </span>
                  <span style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 27, color: s.color, opacity: 0.5,
                    letterSpacing: "-0.02em" }}>{n}</span>
                </div>
                <h3 style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 21.5, color: "#fff",
                  letterSpacing: "-0.01em", margin: "0 0 8px" }}>{title}</h3>
                <p style={{ fontSize: 15.5, lineHeight: 1.62, color: "#C4D8EE", margin: 0 }}>{body}</p>
              </div>);

          })}
        </div>

        <style>{`@keyframes mwFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}`}</style>
        <div data-animate="" style={{ margin: "30px auto 0", maxWidth: 874, textAlign: "center" }}>
          <h3 style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 27, color: "#fff",
            letterSpacing: "-0.015em", margin: "0 0 8px" }}>Two world-states, five stages, two gates</h3>
          <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "#9FB5CD", margin: 0 }}>closed by a LEARN · COMPOUND continuous improvement loop.</p>
        </div>
        {/* The canonical master diagram — dark-theme recreation (live component) */}
        <div data-animate="" style={{ background: "#102342", border: "1px solid rgba(255,255,255,0.10)", borderRadius: 14,
          boxShadow: "0 18px 54px rgba(0,0,0,0.45)", padding: "40px 38px 30px", margin: "28px 0 0" }}>
          <p style={{ textAlign: "center", fontSize: 14, color: "#9FB5CD", margin: "0 0 26px" }}>Select any box in the diagram below to see what happens inside it.</p>
          <div className="mway-scroll">
            <MinervaWayDiagram active={active} onSelect={setActive} />
          </div>
          <p className="mway-hint" style={{ display: "none", textAlign: "center", fontSize: 13,
            color: "#7FA9D6", fontWeight: 700, letterSpacing: "0.04em", margin: "18px 0 0" }}>Swipe the diagram sideways to explore →</p>
        </div>

        {/* The full stage-by-stage walk-through — five stages, two gates, in detail */}
        <div style={{ margin: "30px auto 0", maxWidth: 860 }}>
          <div key={active} style={{ animation: "mwFade .35s cubic-bezier(.2,.8,.2,1)" }}>
            {(() => {
              const item = MINERVA_FLOW[active];
              if (item.type === "bookend") return <BookendRow data={MINERVA_WAY_BOOKENDS[item.id]} />;
              return <StageDetail data={METHOD_STAGES.find((s) => s.name === item.name)} />;
            })()}
          </div>
          {MINERVA_FLOW[active].type === "bookend" &&
          <div style={{ margin: "26px 0 0" }}>
            <LearnCompoundLoop />
          </div>
          }
        </div>
      </div>
    </section>);

}

/* ───────────────────────── §3 · The two alternatives — the divisions ───────────────────────── */
function VennGlyph() {
  return (
    <svg width="58" height="40" viewBox="0 0 58 40" fill="none" aria-hidden="true">
      <defs>
        <clipPath id="vennL"><circle cx="22" cy="20" r="14" /></clipPath>
      </defs>
      <circle cx="22" cy="20" r="14" stroke="var(--ink-400)" strokeWidth="1.6" />
      <circle cx="36" cy="20" r="14" stroke="var(--ink-400)" strokeWidth="1.6" />
      <circle cx="36" cy="20" r="14" fill="rgba(224,162,48,0.55)" clipPath="url(#vennL)" />
    </svg>);

}

function DoorsSection() {
  const doorTitle = { fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 29, lineHeight: 1.15, letterSpacing: "-0.015em", margin: "14px 0 0" };
  const doorBody = { fontSize: 16.5, lineHeight: 1.68, margin: "16px 0 28px" };
  return (
    <section data-screen-label="§3 The Two Alternatives" id="doors" style={{ background: "var(--ink-050)",
      padding: "104px 48px 60px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <SectionHead eyebrow="One Firm · Two Doors" title="Two ways to engage the same Minerva Way."
        lead="Equal doors, one house. Choose the practice you need today." />
        <div data-stagger="" style={{ display: "grid", gridTemplateColumns: "1fr 88px 1fr", alignItems: "stretch", margin: "60px 0 0" }}>
          {/* Door A — Knowledge Governance (classic light language) */}
          <div style={{ background: "#fff", border: "1px solid var(--ink-300)", borderRadius: 14,
            boxShadow: "var(--shadow-2)", padding: "42px 42px 40px", display: "flex", flexDirection: "column",
            position: "relative", overflow: "hidden" }}>
            {/* Corner mark — Knowledge Governance cube */}
            <img aria-hidden="true" src={window.__asset("assets/kg-cube.png")} alt=""
              style={{ position: "absolute", top: 20, right: 24, width: 80, height: "auto",
              pointerEvents: "none" }} />
            <div style={{ paddingRight: 76 }}>
              <Eyebrow color="var(--minerva-blue)">The Established Practice</Eyebrow>
              <h3 style={{ ...doorTitle, color: "var(--ink-900)" }}>Minerva Knowledge Governance</h3>
            </div>
            <p style={{ ...doorBody, color: "var(--ink-700)", flex: 1 }}>
              The proven practice. The established capabilities life sciences leaders rely on, fulfilled by repeatable skills 
              <strong style={{ color: "var(--ink-900)" }}>the Minerva Way, applied as
              delivered capabilities</strong>.
            </p>
            <div>
              <Btn href={SPLASH_LINKS.governance} accent="var(--minerva-blue)">Enter Knowledge Governance <Arrow /></Btn>
            </div>
          </div>
          {/* The overlap */}
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10 }}>
            <span style={{ width: 1, flex: 1, background: "linear-gradient(to bottom, transparent, var(--ink-300))" }}></span>
            <VennGlyph />
            <span style={{ width: 1, flex: 1, background: "linear-gradient(to top, transparent, var(--ink-300))" }}></span>
          </div>
          {/* Door B — General Intelligence (VISDI dark language) */}
          <div style={{ background: "linear-gradient(155deg, #0A1426 0%, #0D1C36 60%, #081420 100%)",
            border: "1px solid rgba(63,177,229,0.30)", borderRadius: 14, boxShadow: "0 16px 44px rgba(10,20,38,0.35)",
            padding: "42px 42px 40px", display: "flex", flexDirection: "column", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: SPECTRUM_GRADIENT }}></div>
            {/* Corner mark — Mingi orb */}
            <img aria-hidden="true" src={window.__asset("assets/mingi-orb.png")} alt=""
            style={{ position: "absolute", top: 18, right: 18, width: 80, height: "auto", pointerEvents: "none", opacity: 0.95 }} />
            <div style={{ paddingRight: 76 }}>
              <Eyebrow color="var(--minerva-sky)">The AI Division</Eyebrow>
              <h3 style={{ ...doorTitle, color: "#fff" }}>Minerva General Intelligence</h3>
            </div>
            <p style={{ ...doorBody, color: "#C4D8EE", flex: 1 }}>
              The AI-ready knowledge layer, productized: <strong style={{ color: "#fff" }}>The visual-digital</strong> and{" "}
              <strong style={{ color: "#fff" }}>Mingi</strong>, the human-in-the-loop intelligence that works it{" "}
              <strong style={{ color: "#fff" }}>the Minerva Way, applied as products</strong>.
            </p>
            <div>
              <Btn href={SPLASH_LINKS.mgi} accent="var(--minerva-sky)" textColor="#0A1426">Enter General Intelligence - Mingi <Arrow /></Btn>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ───────────── §4 · Split panel — Visual-Digital Knowledge™ (left) × Knowledge Execution (right) ─────────────
   One section, split down the middle: the shared thread (light, classic language) on the left,
   the category (dark, stated once, here) on the right. */

function CompactArrow() {
  return (
    <div style={{ display: "flex", justifyContent: "center", padding: "7px 0" }}>
      <svg width="12" height="24" viewBox="0 0 12 24" fill="none" stroke="rgba(231,239,250,0.45)" strokeWidth="1.5">
        <path d="M6 22 V4" /><path d="M1.5 8.5 L6 3 L10.5 8.5" />
      </svg>
    </div>);

}

function BandLabel({ children }) {
  return (
    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase",
      color: "rgba(231,239,250,0.42)", fontFamily: "var(--wix-text)", margin: "0 0 8px", textAlign: "center" }}>{children}</div>);

}

function CompactLayerDiagram() {
  const actors = [
  { icon: "user", label: "Humans" },
  { icon: "cpu", label: "AI Agents" },
  { icon: "bot", label: "Robots" }];

  const fragments = ["SOPs", "Batch records", "Spreadsheets", "Tribal knowledge"];
  return (
    <div data-animate="" style={{ margin: "38px 0 0" }}>
      {/* Actors */}
      <div>
        <BandLabel>The actors</BandLabel>
        <div style={{ display: "flex", gap: 9, flexWrap: "wrap", justifyContent: "center" }}>
          {actors.map(({ icon, label }) =>
          <span key={label} style={{ display: "inline-flex", alignItems: "center", gap: 9,
            border: "1px solid rgba(255,255,255,0.16)", borderRadius: 999, padding: "8px 16px",
            color: "#E7EFFA", fontSize: 14.5, fontWeight: 600, fontFamily: "var(--wix-text)",
            background: "rgba(255,255,255,0.04)" }}>
              <SplashIcon name={icon} size={17} color="var(--minerva-sky)" /> {label}
            </span>
          )}
        </div>
      </div>
      <CompactArrow />
      {/* The layer */}
      <div style={{ borderRadius: 12, overflow: "hidden", border: "1px solid rgba(63,177,229,0.35)",
        boxShadow: "0 14px 40px rgba(0,0,0,0.40)" }}>
        <div style={{ height: 3, background: SPECTRUM_GRADIENT }}></div>
        <div style={{ background: "rgba(28,77,161,0.22)", padding: "17px 20px",
          display: "flex", alignItems: "center", justifyContent: "center", gap: 14 }}>
          <img src={window.__asset("assets/logo-visdi-wheels-white.svg")} alt="" style={{ height: 24 }} />
          <div>
            <div style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 17.5, color: "#fff",
              letterSpacing: "-0.01em" }}>VISDI — the AI-ready knowledge layer</div>
            <div style={{ fontSize: 13, color: "rgba(196,216,238,0.78)", marginTop: 2 }}>
              Compliant · Verified · A product and a category — never a method</div>
          </div>
        </div>
      </div>
      <CompactArrow />
      {/* Fragments */}
      <div>
        <BandLabel>The fragments</BandLabel>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center" }}>
          {fragments.map((f, i) =>
          <span key={f} style={{ fontSize: 13, color: "rgba(231,239,250,0.55)",
            border: "1px dashed rgba(255,255,255,0.22)", borderRadius: 7, padding: "6px 12px",
            fontFamily: "var(--wix-text)", transform: `rotate(${[-1.3, 0.9, -0.7, 1.1][i % 4]}deg)` }}>{f}</span>
          )}
        </div>
      </div>
    </div>);

}

/* Mingi's three forms — senses → connects → operates, the same intelligence maturing. */
function MingiFormsDiagram() {
  const forms = [
  { label: "Senses", verb: "senses & advises", color: "#E0A230" },
  { label: "Connects", verb: "takes shape by connecting", color: "var(--minerva-sky)", cube: true },
  { label: "Operates", verb: "monitors & measures", color: "#04975e" }];

  return (
    <div data-animate="" style={{ margin: "36px 0 0" }}>
      <BandLabel>One intelligence, three forms</BandLabel>
      <div style={{ display: "flex", alignItems: "stretch", justifyContent: "center", gap: 8 }}>
        {forms.map((f, i) =>
        <React.Fragment key={f.label}>
            <div style={{ flex: "1 1 0", border: `1px solid ${f.color}66`, background: `${f.color}1A`,
            borderRadius: 12, padding: "15px 8px 14px", display: "flex", flexDirection: "column",
            alignItems: "center", gap: 7, minHeight: 92, justifyContent: "center" }}>
              {f.cube && <img src={window.__asset("assets/logo-visdi-wheels-white.svg")} alt="" style={{ height: 17, marginBottom: 1 }} />}
              <div style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 15, color: f.color }}>{f.label}</div>
              <div style={{ fontSize: 11.5, color: "rgba(231,239,250,0.72)", lineHeight: 1.3, fontFamily: "var(--wix-text)" }}>{f.verb}</div>
            </div>
            {i < 2 && <span style={{ color: "rgba(231,239,250,0.45)", alignSelf: "center", fontSize: 15 }}>→</span>}
          </React.Fragment>
        )}
      </div>
      <p style={{ fontSize: 13, color: "rgba(231,239,250,0.6)", margin: "15px auto 0", maxWidth: 430, lineHeight: 1.5 }}>
        Human-in-the-loop at every step — the silhouette grows as trust is earned, never an autonomous robot.
      </p>
    </div>);

}

function ThreadCategorySection() {
  return (
    <section data-screen-label="§4 VISDI × Mingi" id="category" style={{ position: "relative",
      borderTop: "1px solid var(--ink-200)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "stretch", position: "relative" }}>

        {/* Left — Visual-Digital Knowledge™ (the shared thread) */}
        <div style={{ background: "#fff", padding: "96px 72px 88px", display: "flex", flexDirection: "column",
          justifyContent: "center", alignItems: "center", minWidth: 0 }}>
          <div data-animate="" style={{ maxWidth: 500, width: "100%", textAlign: "center" }}>
            <Eyebrow color="var(--minerva-blue)" center>The Knowledge Layer</Eyebrow>
            <h2 style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 40, lineHeight: 1.1,
              letterSpacing: "-0.02em", color: "var(--ink-900)", margin: "18px 0 0" }}>VISDI</h2>
            <p style={{ fontSize: 17.5, lineHeight: 1.7, color: "var(--ink-700)", margin: "16px 0 0" }}>
              The <strong style={{ color: "var(--ink-900)" }}>AI-ready knowledge layer</strong> — the architectural
              base everything else hangs off. A <strong style={{ color: "var(--ink-900)" }}>product and a category</strong>,
              never a method. The method is <strong style={{ color: "var(--ink-900)" }}>The Minerva Way</strong>.
            </p>
            <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--ink-600)", margin: "18px 0 0" }}>
              Minerva takes <strong style={{ color: "var(--ink-800)" }}>Visual-Digital Knowledge™</strong>{" "}
              <em style={{ fontFamily: "var(--baroque-display)", fontSize: 18.5, color: "var(--minerva-gold)", fontStyle: "italic" }}>further</em> — with Mingi.
            </p>
            <div style={{ margin: "30px 0 0" }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
                color: "var(--ink-500)", marginBottom: 13, fontFamily: "var(--wix-text)" }}>Shipped as three engagements</div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 9 }}>
                {[["Know", "#C9881E"], ["Connect", "var(--minerva-blue)"], ["Operate", "#04975e"]].map(([n, c], i) =>
                <React.Fragment key={n}>
                    <span style={{ fontSize: 14.5, fontWeight: 700, color: c, fontFamily: "var(--wix-text)",
                    border: `1.5px solid ${c}`, borderRadius: 999, padding: "7px 17px", background: "#fff" }}>{n}</span>
                    {i < 2 && <span style={{ color: "var(--ink-400)", fontSize: 14 }}>→</span>}
                  </React.Fragment>
                )}
              </div>
              <p style={{ fontSize: 13.5, color: "var(--ink-600)", margin: "13px 0 0", lineHeight: 1.5 }}>
                One customer journey, three pillars — sold as a layer, not as hours.</p>
            </div>
          </div>
        </div>

        {/* Right — Knowledge Execution (the category, stated once, here) */}
        <div style={{ background: "linear-gradient(205deg, #0A1426 0%, #0D1C36 55%, #081420 100%)",
          padding: "96px 72px 88px", display: "flex", justifyContent: "center", minWidth: 0 }}>
          <div data-animate="" style={{ maxWidth: 500, width: "100%", textAlign: "center" }}>
            <Eyebrow color="var(--minerva-sky)" center>The Persona</Eyebrow>
            <h2 style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 40, lineHeight: 1.1,
              letterSpacing: "-0.02em", color: "#fff", margin: "18px 0 0" }}>Mingi</h2>
            <p style={{ fontSize: 17.5, lineHeight: 1.65, color: "#C4D8EE", margin: "16px 0 0" }}>
              <strong style={{ color: "#fff" }}>M</strong>inerva <strong style={{ color: "#fff" }}>G</strong>eneral{" "}
              <strong style={{ color: "#fff" }}>I</strong>ntelligence — the legible, human-facing persona of VISDI.
              A humanised, shape-changing agent that is <strong style={{ color: "#fff" }}>human-in-the-loop, never
              autonomous</strong>: every output is a candidate until a person signs off.
            </p>
            <MingiFormsDiagram />
          </div>
        </div>

        {/* The VISDI hinge — VDK, expanded into VISDI, powers Knowledge Execution */}
        <div aria-hidden="true" style={{ position: "absolute", top: "50%", left: "50%",
          transform: "translate(-50%, -50%)", display: "flex", alignItems: "center", zIndex: 2, pointerEvents: "none" }}>
          <svg width="32" height="14" viewBox="0 0 32 14" fill="none">
            <line x1="0" y1="7" x2="32" y2="7" stroke="var(--minerva-gold)" strokeWidth="1.6" />
          </svg>
          <span style={{ width: 58, height: 58, borderRadius: "50%", background: "#0A1426",
            border: "1.6px solid var(--minerva-gold)", boxShadow: "0 8px 26px rgba(0,0,0,0.35)",
            display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
            <img src={window.__asset("assets/logo-visdi-wheels-white.svg")} alt="VISDI" style={{ height: 20 }} />
          </span>
          <svg width="34" height="14" viewBox="0 0 34 14" fill="none">
            <line x1="0" y1="7" x2="24" y2="7" stroke="var(--minerva-gold)" strokeWidth="1.6" />
            <path d="M24 1.5 L32 7 L24 12.5" stroke="var(--minerva-gold)" strokeWidth="1.6" fill="none" />
          </svg>
        </div>
      </div>

      {/* Convergence — closes the whole doors → panels block */}
      <div style={{ borderTop: "1px solid var(--ink-200)", background: "var(--ink-050)", padding: "26px 48px" }}>
        <p style={{ textAlign: "center", fontSize: 16, color: "var(--ink-600)", margin: "0 auto", maxWidth: 840, lineHeight: 1.65 }}>
          <strong style={{ color: "var(--ink-800)" }}>VISDI is the layer; Mingi is the human face that works it.
          </strong><br />
          Both divisions converge on one system — one firm, one common operating platform.
        </p>
      </div>
    </section>);

}

/* ───────────────────────── §5 · Firm-wide trust ───────────────────────── */
function TrustSection() {
  const logos = ["Johnson-and-Johnson", "J-and-J-MedTech", "Pfizer", "lilly", "Amgen", "Illumina", "BD", "Kite", "Ethicon", "Auris",
  "Bruker", "Instilbio", "Allogene", "Pacira", "PFEnex", "Plexus", "Striker", "Rockwell", "Sekisui", "nanostring", "flexion", "verb", "Eloviz"];
  return (
    <section data-screen-label="§5 Firm-wide Trust" style={{ background: "#fff",
      borderTop: "1px solid var(--ink-200)", padding: "96px 48px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>
        <SectionHead eyebrow="Firm-wide Trust" title="Trusted by the teams behind life-saving therapies." />
        <div data-animate="" style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: "34px 28px",
          alignItems: "center", margin: "58px 0 0" }}>
          {logos.map((name) =>
          <img key={name} src={window.__asset(`assets/clients-bw/${name}.svg`)} alt={name.replace(/-/g, " ")}
          style={{ width: "100%", maxHeight: 44, objectFit: "contain",
            opacity: 0.66, transition: "opacity 220ms var(--ease-out)" }} />
          )}
        </div>
      </div>
    </section>);

}

/* ───────────────────────── §6 · Closing CTA ───────────────────────── */
function ClosingCTA() {
  return (
    <section data-screen-label="§6 Closing CTA" style={{ position: "relative", overflow: "hidden",
      background: "linear-gradient(155deg, #0A1426 0%, #0D1C36 55%, #081420 100%)", padding: "110px 48px" }}>
      <CircuitSVG color="var(--minerva-gold)" opacity={0.14} style={{ position: "absolute", bottom: -60, left: -80, transform: "scaleX(-1)" }} />
      <div data-animate="" style={{ maxWidth: 680, margin: "0 auto", textAlign: "center", position: "relative" }}>
        <Eyebrow color="var(--minerva-gold)" center>One Front Door</Eyebrow>
        <h2 style={{ fontFamily: "var(--wix-display)", fontWeight: 800, fontSize: 46, lineHeight: 1.1,
          letterSpacing: "-0.02em", color: "#fff", margin: "22px 0 0" }}>
          Every engagement starts with a Diagnostic.
        </h2>
        <p style={{ fontSize: 19, lineHeight: 1.65, color: "#C4D8EE", margin: "20px auto 36px", maxWidth: 540 }}>
          Whichever door you came for, the first step is the same — find out what you know,
          and what it's worth when it can execute.
        </p>
        <Btn href={SPLASH_LINKS.diagnostic} accent="var(--minerva-gold)" textColor="#0A1426"
        shadow="0 6px 24px rgba(224,162,48,0.35)" xstyle={{ fontSize: 18, padding: "15px 30px" }}>
          Start a Diagnostic <Arrow /></Btn>
        <p style={{ fontSize: 15, color: "rgba(231,239,250,0.55)", margin: "30px 0 0" }}>
          Or go straight to a division:{" "}
          <a href={SPLASH_LINKS.governance} style={{ color: "#E7EFFA", fontWeight: 600 }}> Knowledge Governance</a>
          <span style={{ margin: "0 10px", opacity: 0.5 }}>·</span>
          <a href={SPLASH_LINKS.mgi} style={{ color: "#E7EFFA", fontWeight: 600 }}>General Intelligence</a>
        </p>
      </div>
    </section>);

}

/* ───────────────────────── App ───────────────────────── */
function MinervaSplash() {
  return (
    <div>
      <SplashNav />
      <SplashHero />
      <MinervaWaySection />
      <DoorsSection />
      <TrustSection />
      <ClosingCTA />
      <SplashFooter />
    </div>);

}

window.MinervaSplash = MinervaSplash;