/* landing-sections.jsx — Compliant AI Readiness landing (rebuild per Site Brief 08).
   The destination frontier. Dark frontier, green theme. Eight sections:
   §1 Hero → §2 The turn → §3 The standard → §4 The method → §5 Mingi →
   §6 Why Minerva → §7 Trust and fit → §8 The close. Foundation crosslink is blue;
   Method/Mingi crosslinks are green; Trust Gate is gold, Learning Gate is green.
   Conventions: no em-dashes, positive framing, no competitor critique, colons in
   headings. Never short-form "Compliant AI Readiness"; never split "Compliant AI Readiness." */

const { WheelMark, NavBar, Btn, Eyebrow, HeadlineDivider, Arrow, Icon, CircuitSVG, SiteFooter, STAGE } = window;

const GREEN = "#3FB1E5";        // accent (sky blue)
const GREEN_LT = "#3FB1E5";     // sky blue for text links on dark
const GOLD = "var(--minerva-gold)";
const BLUE_LT = "#6CA8F0";      // foundation crosslink on dark
const KG_HREF = "/knowledge-governance/";
const DIAG = "/start-a-diagnostic/";

/* Green crosslink (Method / Mingi) */
function GreenLink({ href, children }) {
  return (
    <a href={href} style={{ display: "inline-flex", alignItems: "center", gap: 8,
      fontSize: 16, fontWeight: 700, color: GREEN_LT, fontFamily: "var(--wix-text)", textDecoration: "none" }}>
      {children} <Arrow />
    </a>);
}

/* ── §1 · HERO ───────────────────────────────────────────── */
function HeroSection() {
  return (
    <section data-screen-label="01 - Hero" style={{
      position: "relative", overflow: "hidden",
      background: "linear-gradient(155deg,#0A1426 0%,#0C1830 55%,#080F1C 100%)",
      display: "flex", flexDirection: "column"
    }}>
      <div style={{ flex: 1, display: "flex", alignItems: "center", maxWidth: 1280, margin: "0 auto",
        padding: "56px 80px", width: "100%", gap: 64 }}>
        <div style={{ flex: "1 1 0", maxWidth: 680 }}>
          <Eyebrow color={GREEN_LT}>Compliant AI Readiness · The destination</Eyebrow>
          <h1 style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px 0 0", color: "#fff" }}>
            Compliant AI Readiness is how governed knowledge becomes{" "}
            <span style={{ color: GREEN_LT, fontStyle: "italic", fontWeight: 600 }}>results you can defend.</span>
          </h1>
          <HeadlineDivider color={GREEN} />
          <p style={{ fontSize: 19, lineHeight: 1.68, color: "#C4D8EE", maxWidth: 580, margin: "0 0 36px" }}>
            This is the destination of the Minerva Way. AI runs on the knowledge execution layer as a teammate
            under human command, traceable at every step, and built to stand up in an audit.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 52 }}>
            <Btn href={DIAG} accent={GOLD} textColor="#0A1426"
              shadow="0 8px 32px rgba(224,162,48,0.28)">Start a Diagnostic <Arrow /></Btn>
          </div>
          <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
              <span style={{ width: 30, height: 1, background: "rgba(255,255,255,0.25)", flexShrink: 0 }} />
              <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: "0.20em", whiteSpace: "nowrap",
                color: "rgba(231,239,250,0.60)", textTransform: "uppercase" }}>HUMANS · AI AGENTS · ROBOTS</span>
              <span style={{ width: 30, height: 1, background: "rgba(255,255,255,0.25)", flexShrink: 0 }} />
            </div>
            <span style={{ fontSize: 15, color: "rgba(231,239,250,0.50)", whiteSpace: "nowrap" }}>Knowledge Execution · Human in command</span>
          </div>
        </div>
        <div style={{ flex: "0 0 460px", display: "flex", justifyContent: "center",
          alignItems: "center", position: "relative" }}>
          <div style={{ position: "absolute", width: 420, height: 420, borderRadius: "50%",
            background: "radial-gradient(circle,rgba(63,177,229,0.30),transparent 70%)",
            filter: "blur(46px)" }} />
          <img src={window.__asset("assets/hero-gi-hands.png")}
          alt="A human hand and a cosmic, star-filled robotic hand cradling a glowing orb"
          style={{ position: "relative", zIndex: 1, width: 460, height: "auto", objectFit: "contain",
            WebkitMaskImage: "linear-gradient(to left, transparent 1%, #000 15%), radial-gradient(55% 50% at 100% 100%, transparent 8%, #000 62%), linear-gradient(to right, transparent 2%, #000 42%), radial-gradient(ellipse 72% 72% at 50% 50%, #000 60%, transparent 92%)",
            WebkitMaskComposite: "source-in",
            maskImage: "linear-gradient(to left, transparent 1%, #000 15%), radial-gradient(55% 50% at 100% 100%, transparent 8%, #000 62%), linear-gradient(to right, transparent 2%, #000 42%), radial-gradient(ellipse 72% 72% at 50% 50%, #000 60%, transparent 92%)",
            maskComposite: "intersect",
            filter: "drop-shadow(0 12px 40px rgba(0,0,0,0.45))" }} />
        </div>
      </div>
    </section>);
}

/* ── Shared: right-side diagram placeholder ──────────────── */
function DiagramPlaceholder({ label, accent = GREEN }) {
  return (
    <div style={{ position: "relative", minHeight: 420, display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center", gap: 14, padding: "40px 32px",
      background: "linear-gradient(135deg,rgba(63,177,229,0.10),rgba(63,177,229,0.03))",
      border: `1.5px dashed ${accent}66`, borderRadius: "var(--radius-lg)" }}>
      <Icon name="image" size={34} color={accent} strokeWidth={1.6} />
      <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase",
        color: accent, fontFamily: "var(--wix-text)", textAlign: "center" }}>{label}</span>
      <span style={{ fontSize: 12.5, color: "rgba(231,239,250,0.42)", fontFamily: "var(--wix-text)" }}>Diagram placeholder</span>
    </div>);
}

/* Method diagram — the two gates (Trust + Learning). */
function MethodDiagram() {
  return (
    <div style={{ position: "relative", padding: "34px 30px",
      background: "linear-gradient(135deg,rgba(63,177,229,0.10),rgba(63,177,229,0.03))",
      border: "1px solid rgba(63,177,229,0.28)", borderRadius: "var(--radius-lg)" }}>
      <img src="assets/method-two-gates.png" alt="The Trust Gate and the Learning Gate"
        style={{ display: "block", width: "90%", height: "auto", margin: "0 auto" }} />
      <div style={{ textAlign: "center", marginTop: 26, fontSize: 12, fontWeight: 700, letterSpacing: "0.14em",
        textTransform: "uppercase", color: GREEN_LT, fontFamily: "var(--wix-text)" }}>
        The Minerva Way · two gates
      </div>
    </div>);
}

/* Pillar glyphs — reused from the Method page's PillarIcon set. */
function PillarGlyph({ name, c, size = 30 }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: c,
    strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, display: "block" } };
  if (name === "VISDI") return (
    <svg {...common} aria-hidden="true">
      <path d="M12 3 L20 7.5 L12 12 L4 7.5 Z" />
      <path d="M4 7.5 L4 16.5 L12 21 L12 12" />
      <path d="M20 7.5 L20 16.5 L12 21" />
      <path d="M8 5.25 L16 9.75" opacity="0.5" />
      <circle cx="12" cy="7.5" r="1.15" fill={c} stroke="none" />
    </svg>);
  if (name === "Mingi") return (
    <svg {...common} aria-hidden="true">
      <circle cx="12" cy="8.4" r="4.5" />
      <path d="M12 4.1 L12 12.7 M7.6 8.4 Q12 10.4 16.4 8.4" opacity="0.5" />
      <path d="M4.4 15.6 Q12 21.6 19.6 15.6" />
      <circle cx="12" cy="8.4" r="1.1" fill={c} stroke="none" />
    </svg>);
  if (name === "Ledger") return (
    <svg {...common} aria-hidden="true">
      <rect x="3.6" y="3.6" width="6" height="6" rx="1.4" />
      <rect x="9" y="9" width="6" height="6" rx="1.4" />
      <rect x="14.4" y="14.4" width="6" height="6" rx="1.4" />
      <path d="M9.6 9.6 L9 9 M15 15 L14.4 14.4" opacity="0.65" />
      <circle cx="12" cy="12" r="1.15" fill={c} stroke="none" />
    </svg>);
  return (
    <svg {...common} aria-hidden="true">
      <path d="M19.4 8.3 A8 8 0 1 1 16.6 4.9" />
      <path d="M16.2 9.2 L19.7 8.1 L20.2 4.4" />
      <path d="M8.4 12.4 L11 15 L15.6 9.6" />
    </svg>);
}

/* Pillars diagram — four pillar tiles around one governed source of truth. */
const PILLAR_SKY = "#3FB1E5", PILLAR_GREEN = "#04975e", PILLAR_GOLD = "var(--minerva-gold)", PILLAR_PURPLE = "#8E86C8";
function PillarsDiagram() {
  const tiles = [
    ["VISDI", PILLAR_SKY, "One governed source of truth"],
    ["Mingi", PILLAR_GREEN, "The person, in command"],
    ["Ledger", PILLAR_GOLD, "Provenance for everything"],
    ["CLV", PILLAR_PURPLE, "Validated over time"],
  ];
  return (
    <div style={{ position: "relative", padding: "36px 30px",
      background: "linear-gradient(135deg,rgba(63,177,229,0.10),rgba(63,177,229,0.03))",
      border: "1px solid rgba(63,177,229,0.28)", borderRadius: "var(--radius-lg)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {tiles.map(([name, c, sub]) => (
          <div key={name} style={{ display: "flex", flexDirection: "column", gap: 10, padding: "20px 18px",
            background: "rgba(8,15,28,0.55)", border: `1px solid ${c}55`, borderTop: `3px solid ${c}`,
            borderRadius: 12 }}>
            <PillarGlyph name={name} c={c} />
            <div>
              <div style={{ fontSize: 17, fontWeight: 800, color: "#fff", fontFamily: "var(--wix-display)",
                letterSpacing: "-0.01em" }}>{name}</div>
              <div style={{ fontSize: 12.5, lineHeight: 1.4, color: "#A9C2DA", marginTop: 3 }}>{sub}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 18, fontSize: 12, fontWeight: 700, letterSpacing: "0.14em",
        textTransform: "uppercase", color: GREEN_LT, fontFamily: "var(--wix-text)" }}>
        Four pillars · one governed layer
      </div>
    </div>);
}

/* Products diagram — the three staged product cards, reusing the Products-page card art. */
function ProductsDiagram() {
  const cards = [
    ["Diagnostic", "#E0A230", "assets/products-card-diagnose.png", "See it, plan it, prove it"],
    ["Connect", "#3FB1E5", "assets/products-card-connect.png", "Build the governed layer"],
    ["Operate", "#04975e", "assets/products-card-operate.png", "Run it, keep it improving"],
  ];
  return (
    <div style={{ position: "relative", padding: "30px 26px",
      background: "linear-gradient(135deg,rgba(63,177,229,0.10),rgba(63,177,229,0.03))",
      border: "1px solid rgba(63,177,229,0.28)", borderRadius: "var(--radius-lg)" }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {cards.map(([name, c, img, sub], i) => (
          <div key={name} style={{ position: "relative", display: "flex", alignItems: "center", gap: 16,
            minHeight: 92, overflow: "hidden", background: "rgba(8,15,28,0.6)",
            border: `1px solid ${c}55`, borderLeft: `3px solid ${c}`, borderRadius: 12 }}>
            <div style={{ flex: 1, minWidth: 0, padding: "16px 0 16px 20px", zIndex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 26, height: 26, borderRadius: "50%", background: `${c}26`,
                  border: `1px solid ${c}88`, display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 12.5, fontWeight: 800, color: c }}>{i + 1}</span>
                <span style={{ fontSize: 17, fontWeight: 800, color: "#fff", fontFamily: "var(--wix-display)",
                  letterSpacing: "-0.01em" }}>{name}</span>
              </div>
              <div style={{ fontSize: 12.5, lineHeight: 1.4, color: "#A9C2DA", marginTop: 6 }}>{sub}</div>
            </div>
            <div style={{ width: 128, alignSelf: "stretch", position: "relative", flexShrink: 0 }}>
              <img src={img} alt="" aria-hidden="true" style={{ position: "absolute", inset: 0,
                width: "100%", height: "100%", objectFit: "cover", objectPosition: "center",
                WebkitMaskImage: "linear-gradient(to right, transparent 0, #000 55%)",
                maskImage: "linear-gradient(to right, transparent 0, #000 55%)" }} />
            </div>
          </div>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 16, fontSize: 12, fontWeight: 700, letterSpacing: "0.14em",
        textTransform: "uppercase", color: GREEN_LT, fontFamily: "var(--wix-text)" }}>
        One staged path
      </div>
    </div>);
}

/* Shared: compact term + one-liner list */
function PillarList({ items, accent = GREEN }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, margin: "4px 0 32px", maxWidth: 600 }}>
      {items.map(([term, line]) => (
        <div key={term} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
          <span style={{ flexShrink: 0, minWidth: 92, fontSize: 16.5, fontWeight: 800, color: accent,
            fontFamily: "var(--wix-display)", letterSpacing: "-0.01em" }}>{term}</span>
          <span style={{ fontSize: 16.5, lineHeight: 1.6, color: "#C4D8EE" }}>{line}</span>
        </div>
      ))}
    </div>);
}

/* Gold flowchart connector between the band diagrams (Method → Pillars → Products).
   Lines are drawn long and clipped at each section's overflow:hidden edge, so they
   always meet cleanly at the section boundary regardless of diagram height. */
function FlowConnector({ dir }) {
  const GOLDC = "var(--minerva-gold)";
  if (dir === "bottom") return (
    <div aria-hidden="true" style={{ position: "absolute", left: "50%", top: "100%", transform: "translateX(-50%)",
      display: "flex", flexDirection: "column", alignItems: "center", pointerEvents: "none", zIndex: 2 }}>
      <span style={{ width: 9, height: 9, borderRadius: "50%", background: GOLDC, boxShadow: `0 0 0 4px rgba(224,162,48,0.18)`, marginTop: -4 }} />
      <span style={{ width: 2, height: 320, background: GOLDC }} />
    </div>);
  return (
    <div aria-hidden="true" style={{ position: "absolute", left: "50%", bottom: "100%", transform: "translateX(-50%)",
      display: "flex", flexDirection: "column", alignItems: "center", pointerEvents: "none", zIndex: 2 }}>
      <span style={{ width: 2, height: 320, background: "var(--minerva-gold)" }} />
      <span style={{ width: 0, height: 0, borderLeft: "6px solid transparent", borderRight: "6px solid transparent",
        borderTop: "9px solid var(--minerva-gold)", marginBottom: -1 }} />
    </div>);
}

/* Shared: one text-left / diagram-right band */
function ContentBand({ screenLabel, bg, eyebrow, headline, children, diagramLabel, diagram, flowTop, flowBottom }) {
  return (
    <section data-screen-label={screenLabel} style={{ background: bg, padding: "80px 0", position: "relative", overflow: "hidden" }}>
      <div className="cair-band-grid" style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px",
        display: "grid", gridTemplateColumns: "1.08fr 0.92fr", gap: 72, alignItems: "center" }}>
        <div>
          <Eyebrow color={GREEN_LT}>{eyebrow}</Eyebrow>
          <h2 data-animate style={{ fontSize: 44, fontWeight: 700, lineHeight: 1.16, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px 0 22px", color: "#fff" }}>{headline}</h2>
          {children}
        </div>
        <div className="cair-band-diagram" style={{ position: "relative", minWidth: 0 }}>
          <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
            borderRadius: "var(--radius-lg)",
            background: "radial-gradient(ellipse 60% 55% at 50% 50%, rgba(224,162,48,0.10), transparent 72%)",
            boxShadow: "0 0 34px 5px rgba(224,162,48,0.30), 0 0 8px 1px rgba(224,162,48,0.22)" }} />
          {diagram || <DiagramPlaceholder label={diagramLabel} />}
        </div>
      </div>
    </section>);
}

/* ── §2 · THE METHOD ─────────────────────────────────────── */
function MethodBand() {
  return (
    <ContentBand screenLabel="02 - The method" bg="#0C1A2C" eyebrow="The method"
      headline="One method turns knowledge into action." diagram={<MethodDiagram />} flowBottom>
      <p style={{ fontSize: 18.5, lineHeight: 1.72, color: "#C4D8EE", margin: "0 0 18px", maxWidth: 600 }}>
        The Minerva Way runs inside every engagement.
      </p>
      <p style={{ fontSize: 18.5, lineHeight: 1.72, color: "#C4D8EE", margin: "0 0 18px", maxWidth: 600 }}>
        It takes your knowledge and makes it something your people, your AI, and your machines can all act on,
        with two gates that keep it trustworthy.
      </p>
      <p style={{ fontSize: 18.5, lineHeight: 1.72, color: "#C4D8EE", margin: "0 0 32px", maxWidth: 600 }}>
        A person verifies at the Trust Gate before anything acts. The system improves at the Learning Gate as it runs.
      </p>
      <GreenLink href="/method/">See the Method</GreenLink>
    </ContentBand>);
}

/* ── §3 · THE PILLARS ────────────────────────────────────── */
function PillarsBand() {
  const pillars = [
    ["VISDI", "one governed source of truth, served to each reader in its own language."],
    ["Mingi", "the person, amplified and in command."],
    ["Ledger", "provenance for every piece of knowledge."],
    ["CLV", "the validated lifecycle that keeps knowledge trustworthy over time."],
  ];
  return (
    <ContentBand screenLabel="03 - The pillars" bg="#0A1422" eyebrow="The pillars"
      headline="The method is executed through 4 pillars, end to end." diagram={<PillarsDiagram />} flowTop flowBottom>
      <p style={{ fontSize: 18.5, lineHeight: 1.72, color: "#C4D8EE", margin: "0 0 26px", maxWidth: 600 }}>
        Together they hold one governed source of truth, keep the person in command, and keep every result
        traceable and current.
      </p>
      <GreenLink href="/method/">See the Pillars</GreenLink>
    </ContentBand>);
}

/* ── §4 · THE PRODUCTS ───────────────────────────────────── */
function ProductsBand() {
  const products = [
    ["Diagnostic", "senses, plans, and executes a slice. Prove the value on your highest-priority area."],
    ["Connect", "expands by connecting and executing. Build the governed layer for the domain."],
    ["Operate", "monitors, improves, and learns. Run it and compound it under command."],
  ];
  return (
    <ContentBand screenLabel="04 - The products" bg="#0C1A2C" eyebrow="The products"
      headline="Three staged engagements, one outcome." diagram={<ProductsDiagram />} flowTop>
      <p style={{ fontSize: 18.5, lineHeight: 1.72, color: "#C4D8EE", margin: "0 0 26px", maxWidth: 600 }}>
        The method and the pillars ship as three products. Start with a Diagnostic, expand with Connect, sustain
        with Operate. Each one leaves you with governed AI you can prove.
      </p>
      <GreenLink href="/products/">See the Products</GreenLink>
    </ContentBand>);
}

/* ── §5 · MINGI (the control answer) ─────────────────────── */
/* Ring-locked crossfade slideshow — same three-form cycle as the Mingi page. */
const MINGI_SLIDES = [
  { src: "assets/mingi-slide-diagnose.png", label: "Diagnose" },
  { src: "assets/mingi-slide-connect.png",  label: "Connect" },
  { src: "assets/mingi-slide-operate.png",  label: "Operate" },
];
const MINGI_REF = { W: 1590, H: 1930, cx: 790, cy: 576, R: 178 };
const MINGI_TARGET = { cx: 180, cy: 156, R: 46 };
const MINGI_MASK = "radial-gradient(ellipse 64% 62% at 50% 42%, black 50%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.12) 86%, transparent 96%)";

function MingiSlideshow() {
  const sc = MINGI_TARGET.R / MINGI_REF.R;
  const shared = {
    position: "absolute",
    width: (MINGI_REF.W * sc) + "px", height: (MINGI_REF.H * sc) + "px",
    left: (MINGI_TARGET.cx - MINGI_REF.cx * sc) + "px",
    top: (MINGI_TARGET.cy - MINGI_REF.cy * sc) + "px",
  };
  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 1,
      WebkitMaskImage: MINGI_MASK, maskImage: MINGI_MASK }}>
      {MINGI_SLIDES.map((s) => (
        <img key={s.src} className="mingi-slide" src={window.__asset(s.src)} alt={"Mingi - " + s.label + " form"} style={shared} />
      ))}
    </div>);
}

function MingiSection() {
  return (
    <section data-screen-label="05 - Mingi" style={{ background: "#0A1422", padding: "80px 0", position: "relative", overflow: "hidden" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 80px", position: "relative", zIndex: 1 }}>
        <div data-stagger style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: 72, alignItems: "center" }}>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", position: "relative" }}>
            <div style={{ position: "absolute", width: 320, height: 320, borderRadius: "50%",
              background: "radial-gradient(circle,rgba(63,177,229,0.22),transparent 70%)", filter: "blur(40px)" }} />
            <img src={window.__asset("assets/mingi-trio.png")} alt="Mingi in three forms"
              style={{ position: "relative", zIndex: 1, width: "100%", maxWidth: 440, height: "auto", display: "block" }} />
          </div>
          <div>
            <Eyebrow color={GREEN_LT}>Mingi</Eyebrow>
            <h2 data-animate style={{ fontSize: 46, fontWeight: 700, lineHeight: 1.16, letterSpacing: "-0.02em",
              fontFamily: "var(--baroque-display)", margin: "22px 0 22px", color: "#fff" }}>
              You, amplified and in command.
            </h2>
            <p style={{ fontSize: 18.5, lineHeight: 1.72, color: "#C4D8EE", margin: "0 0 32px", maxWidth: 600 }}>
              Mingi is the persona you create when you command governed AI. The AI senses, drafts, and proposes.
              You direct, verify, and approve. Every step is visible and answerable to you. The result is
              your judgment, at greater reach.
            </p>
            <GreenLink href="/mingi/">Meet Mingi</GreenLink>
          </div>
        </div>
      </div>
    </section>);
}

/* ── §6 · WHY MINERVA + TRUST AND FIT (consolidated) ─────── */
/* Small corner glyphs for the Why Minerva cards — same 1.6-stroke line style as the pillar glyphs. */
function WhyGlyph({ name, c, size = 26 }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: c,
    strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true",
    style: { display: "block", flexShrink: 0 } };
  if (name === "clock") return (
    <svg {...common}><circle cx="12" cy="12" r="9" /><path d="M12 7.5V12l3 2" /></svg>);
  if (name === "loop") return (
    <svg {...common}><path d="M21 12a9 9 0 1 1-2.64-6.36" /><path d="M21 4v4h-4" /></svg>);
  if (name === "eye") return (
    <svg {...common}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="2.6" /></svg>);
  return null;
}

function WhyMinervaSection() {
  const strengths = [
    ["Twelve years of regulated depth", "The work done in GxP environments, not just described.", "clock"],
    ["A visual-digital method built for the AI loop", "One governed source that people, agents, and robots read the same way.", "loop"],
    ["Run in the open", "An architecture we run on ourselves and publish, gates and record included.", "eye"],
  ];
  return (
    <section data-screen-label="06 - Why Minerva" style={{
      background: "linear-gradient(rgba(12,26,44,0.82),rgba(12,26,44,0.88)), url('assets/why-minerva-cosmic-bg.png')",
      backgroundSize: "cover", backgroundPosition: "center", padding: "80px 0" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 80px" }}>
        <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
          <Eyebrow center color={GREEN_LT}>Why Minerva</Eyebrow>
          <h2 data-animate style={{ fontSize: 46, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", margin: "22px 0 0", color: "#fff" }}>
            Compliant. Auditable. In command.
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.7, color: "#C4D8EE", margin: "24px auto 0", maxWidth: 560 }}>
            Minerva brings what regulated AI actually needs. We show you the gates, the record, and exactly how
            it works.
          </p>
        </div>
        <div data-stagger className="why-minerva-cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          gap: 20, marginTop: 52 }}>
          {strengths.map(([t, d, icon]) => (
            <div key={t} style={{ position: "relative", background: "rgba(255,255,255,0.03)", border: "1px solid rgba(63,177,229,0.30)",
              borderTop: `3px solid ${GREEN}`, borderRadius: "var(--radius-lg)", padding: "28px 28px" }}>
              {icon && <span style={{ position: "absolute", top: 20, right: 20 }}><WhyGlyph name={icon} c={GREEN} /></span>}
              <h3 style={{ fontSize: 18.5, fontWeight: 800, color: "#fff", fontFamily: "var(--wix-display)",
                letterSpacing: "-0.01em", margin: "0 40px 8px 0", textWrap: "pretty" }}>{t}</h3>
              <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "#A9C2DA", margin: 0, textWrap: "pretty" }}>{d}</p>
            </div>
          ))}
        </div>
        <p style={{ fontSize: 19, lineHeight: 1.7, color: "#C4D8EE", margin: "48px auto 0", maxWidth: 820, textAlign: "center", textWrap: "pretty" }}>
          Every solution runs inside the discipline you are already held to. Outputs are verified by a qualified
          person, traceable to source, and governed under the same data-integrity rigor extended to context.
        </p>
      </div>
    </section>);
}

/* ── §8 · THE CLOSE (bridge down + Diagnostic) ───────────── */
function CloseSection() {
  return (
    <section data-screen-label="08 - The close" style={{
      background: "linear-gradient(180deg,#0C1A2C 0%,#0F2040 100%)",
      padding: "96px 0", position: "relative", overflow: "hidden" }}>
      <style>{`
        .cair-close-grid { display:grid; grid-template-columns: 1fr minmax(0,320px); gap:56px; align-items:center; }
        @media (max-width:860px){
          .cair-close-grid { grid-template-columns:1fr; gap:28px; text-align:center; }
          .cair-close-grid .cair-close-img { max-width:240px; margin:0 auto; }
        }
      `}</style>
      <div className="cair-close-grid" style={{ maxWidth: 1040, margin: "0 auto", padding: "0 80px", textAlign: "left", position: "relative" }}>
        <img className="cair-close-img" src={window.__asset("assets/cair-executable-knowledge-stack.png")}
          alt="Scattered knowledge rises through the Minerva Way into executable knowledge, held between a human hand and a governed hand."
          style={{ width: "100%", height: "auto", display: "block", order: 2 }} />
        <div style={{ order: 1 }}>
          <Eyebrow color={GOLD}>The close</Eyebrow>
          <h2 data-animate style={{ fontSize: 48, fontWeight: 700, lineHeight: 1.14, letterSpacing: "-0.02em",
            fontFamily: "var(--baroque-display)", color: "#fff", margin: "22px 0 0" }}>
            Start with a Diagnostic.
          </h2>
          <p style={{ fontSize: 18.5, lineHeight: 1.7, color: "#C2D8EC", margin: "24px 0 36px", maxWidth: 640, textWrap: "pretty", textAlign: "left" }}>
            Map your knowledge, find the gaps, and see defensible AI proven on your own work. You leave with a
            plan and an ROI projection, and nothing changes until you decide it.
          </p>
          <Btn href={DIAG} accent={GOLD} textColor="#0A1426"
          shadow="0 8px 32px rgba(224,162,48,0.28)" xstyle={{ fontSize: 18, padding: "15px 30px" }}>
            Start a Diagnostic <Arrow />
          </Btn>
        </div>
      </div>
    </section>);
}

/* ── Root landing ───────────────────────────────────────── */
function VISDIHomepage() {
  return (
    <div>
      <NavBar page="home" />
      <HeroSection />
      <MethodBand />
      <PillarsBand />
      <ProductsBand />
      <WhyMinervaSection />
      <CloseSection />
      <SiteFooter />
    </div>);
}

Object.assign(window, { VISDIHomepage });
