/* splash-shared.jsx — Minerva Splash (brand root) — nav, footer, helpers
   Blends the classic minervakrm.com light system with the VISDI dark system.
   Depends on visdi-shared.jsx (Eyebrow, EyebrowMark, Icon, Arrow, WheelMark, CircuitSVG). */

/* Stage colors on LIGHT backgrounds — brief §5: Diagnose/Know=GOLD · Connect=BLUE · Operate=GREEN */
const SPLASH_STAGE = {
  diagnose: { color:"#E0A230", text:"#A9761C", bg:"rgba(224,162,48,0.10)",  border:"rgba(224,162,48,0.38)" },
  connect:  { color:"#1C4DA1", text:"#1C4DA1", bg:"rgba(28,77,161,0.07)",   border:"rgba(28,77,161,0.30)"  },
  operate:  { color:"#069348", text:"#067A3E", bg:"rgba(6,147,72,0.08)",    border:"rgba(6,147,72,0.32)"   },
};

const SPLASH_LINKS = {
  governance: "/knowledge-governance/",   /* Door A — new in-project KG home */
  mgi:        "/general-intelligence/",          /* Door B — /visdi */
  diagnostic: "/general-intelligence/visdi-diagnostic.html",    /* shared front door — /diagnostic */
};

/* The 12-step Minerva spectrum as a CSS gradient string (for thin rules) */
const SPECTRUM_GRADIENT = "linear-gradient(90deg,#D51C29,#E0542A,#E0A230,#F2D12E,#8FBF3F,#069848,#1AA89A,#3FB1E5,#1C4DA1,#4A3BA8,#8B2CA8,#D20F8C)";

/* Actor + misc icons not present in the shared set (Lucide paths) */
const SPLASH_ICONS = {
  user:  [<path key="a" d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>, <circle key="b" cx="12" cy="7" r="4"/>],
  bot:   [<path key="a" d="M12 8V4H8"/>, <rect key="b" width="16" height="12" x="4" y="8" rx="2"/>, <path key="c" d="M2 14h2"/>, <path key="d" d="M20 14h2"/>, <path key="e" d="M15 13v2"/>, <path key="f" d="M9 13v2"/>],
  cpu:   [<rect key="a" x="4" y="4" width="16" height="16" rx="2"/>, <rect key="b" x="9" y="9" width="6" height="6"/>, <path key="c" d="M9 2v2"/>, <path key="d" d="M15 2v2"/>, <path key="e" d="M9 20v2"/>, <path key="f" d="M15 20v2"/>, <path key="g" d="M2 9h2"/>, <path key="h" d="M2 15h2"/>, <path key="i" d="M20 9h2"/>, <path key="j" d="M20 15h2"/>],
  compass: [<circle key="a" cx="12" cy="12" r="10"/>, <polygon key="b" points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>],
  plug:  [<path key="a" d="M12 22v-5"/>, <path key="b" d="M9 8V2"/>, <path key="c" d="M15 8V2"/>, <path key="d" d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/>],
  gauge: [<path key="a" d="m12 14 4-4"/>, <path key="b" d="M3.34 19a10 10 0 1 1 17.32 0"/>],
};

function SplashIcon({ name, size = 22, color = "currentColor", strokeWidth = 1.8 }) {
  const paths = SPLASH_ICONS[name];
  if (!paths) return <Icon name={name} size={size} color={color} strokeWidth={strokeWidth} />;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
      style={{ display:"block", flexShrink:0 }}>
      {paths}
    </svg>
  );
}

/* Umbrella nav lockup — official 2026 Minerva Knowledge Management horizontal logo */
function UmbrellaLockup({ dark = false }) {
  return (
    <a href="#top" style={{ display:"flex", alignItems:"center" }}>
      <img src={window.__asset(dark ? "assets/logo-minerva-km-dark.svg" : "assets/logo-minerva-km-horizontal.svg")}
        alt="Minerva Knowledge Management" style={{ height:42, width:"auto", display:"block" }} />
    </a>
  );
}

/* Splash master brand bar — the persistent two-tier nav, Tier 1 (firm layer).
   White, frosted, with a spectrum hairline seam. The two divisions render as
   theme-preview boxes (white box = Knowledge Governance's light site · dark navy
   box = General Intelligence's dark site). On the splash root no division is
   active, so neither box shows a "you are here" dot and there is no sub-bar. */
function SplashNav() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 1024) setMenuOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const divBtn = ({ href, label, kind, block = false }) => {
    const box = kind === "gi"
      ? { background:"#0E1A30", color:"#FFFFFF", border:"1px solid rgba(63,177,229,0.45)", boxShadow:"none" }
      : { background:"#FFFFFF", color:"var(--ink-800)", border:"1px solid var(--ink-300)", boxShadow:"0 1px 2px rgba(15,26,46,0.06)" };
    return (
      <a href={href} onClick={block ? () => setMenuOpen(false) : undefined} style={{
        display: block ? "flex" : "inline-flex", alignItems:"center",
        justifyContent: block ? "center" : "flex-start", gap:9, cursor:"pointer",
        fontFamily:"var(--wix-text)", fontSize:15, fontWeight:600, letterSpacing:"-0.01em", whiteSpace:"nowrap",
        padding: block ? "14px 18px" : "10px 18px", borderRadius:"var(--radius-md)",
        width: block ? "100%" : "auto", boxSizing:"border-box",
        background:box.background, color:box.color, border:box.border, boxShadow:box.boxShadow }}>
        {label}
      </a>
    );
  };

  const burger = (color) => (
    <button className="nav-burger" aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen}
      onClick={() => setMenuOpen(o => !o)}
      style={{ background:"none", border:"none", cursor:"pointer", padding:8, marginRight:-8 }}>
      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round">
        {menuOpen
          ? [<line key="x1" x1="6" y1="6" x2="20" y2="20" />, <line key="x2" x1="20" y1="6" x2="6" y2="20" />]
          : [<line key="m1" x1="4" y1="8" x2="22" y2="8" />, <line key="m2" x1="4" y1="13" x2="22" y2="13" />, <line key="m3" x1="4" y1="18" x2="22" y2="18" />]}
      </svg>
    </button>
  );
  return (
    <nav style={{ position:"sticky", top:0, zIndex:200,
      display:"flex", alignItems:"center", justifyContent:"space-between",
      padding:"0 72px", height:76,
      background:"rgba(255,255,255,0.93)", backdropFilter:"blur(12px) saturate(1.4)",
      borderBottom:"1px solid var(--ink-200)" }}>
      <UmbrellaLockup />
      <div className="nav-actions" style={{ display:"flex", alignItems:"center", gap:14 }}>
        {divBtn({ href:SPLASH_LINKS.governance, label:"Knowledge Governance", kind:"kg" })}
        {divBtn({ href:SPLASH_LINKS.mgi, label:"General Intelligence", kind:"gi" })}
        <span style={{ width:1, height:24, background:"var(--ink-300)" }} />
        <a href={SPLASH_LINKS.diagnostic} style={{ fontSize:15, fontWeight:700, color:"#0A1426",
          background:"var(--minerva-gold)", fontFamily:"var(--wix-text)",
          padding:"10px 19px", borderRadius:"var(--radius-md)", display:"inline-block", whiteSpace:"nowrap",
          boxShadow:"0 2px 10px rgba(224,162,48,0.30)" }}>Start a Diagnostic</a>
        <a href="https://www.linkedin.com/company/minerva-knowledge-and-risk-management/about/"
          target="_blank" rel="noopener noreferrer" aria-label="Minerva on LinkedIn" title="Minerva on LinkedIn"
          style={{ display:"inline-flex", alignItems:"center", justifyContent:"center", width:38, height:38,
            borderRadius:"50%", flexShrink:0, background:"var(--ink-100)", color:"var(--ink-500)",
            border:"1px solid var(--ink-200)", textDecoration:"none" }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.8 0 0 .78 0 1.74v20.52C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.74V1.74C24 .78 23.2 0 22.22 0z"></path>
          </svg>
        </a>
      </div>
      {burger("#0A1426")}
      {/* spectrum hairline — brand seam between the firm bar and the page */}
      <span style={{ position:"absolute", left:0, right:0, bottom:-2, height:2,
        background:SPECTRUM_GRADIENT, opacity:0.9 }} />

      {/* ── Mobile menu overlay (hamburger target; equal-width stacked actions) ── */}
      <div className={"nav-menu-overlay" + (menuOpen ? " open" : "")}
        style={{ position:"fixed", top:0, left:0, right:0, zIndex:300, flexDirection:"column",
          background:"rgba(8,14,26,0.985)", backdropFilter:"blur(20px) saturate(1.4)",
          borderBottom:"1px solid rgba(255,255,255,0.10)", boxShadow:"0 24px 60px rgba(0,0,0,0.5)",
          maxHeight:"100vh", overflowY:"auto" }}>
        <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between",
          height:64, padding:"0 20px", borderBottom:"1px solid rgba(255,255,255,0.07)" }}>
          <img src={window.__asset("assets/logo-minerva-km-dark.svg")} alt="Minerva Knowledge Management"
            style={{ height:30, width:"auto", display:"block" }} />
          <button aria-label="Close menu" onClick={() => setMenuOpen(false)}
            style={{ background:"none", border:"none", cursor:"pointer", padding:8, marginRight:-8 }}>
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round">
              <line x1="6" y1="6" x2="20" y2="20" /><line x1="20" y1="6" x2="6" y2="20" />
            </svg>
          </button>
        </div>
        <div style={{ display:"flex", flexDirection:"column", gap:10, padding:"18px 20px 22px" }}>
          <span style={{ fontFamily:"var(--wix-text)", fontSize:12, fontWeight:700, letterSpacing:"0.16em",
            textTransform:"uppercase", color:"rgba(231,239,250,0.45)", marginBottom:2 }}>Divisions</span>
          {divBtn({ href:SPLASH_LINKS.governance, label:"Knowledge Governance", kind:"kg", block:true })}
          {divBtn({ href:SPLASH_LINKS.mgi, label:"General Intelligence", kind:"gi", block:true })}
          <a href={SPLASH_LINKS.diagnostic} onClick={() => setMenuOpen(false)}
            style={{ display:"flex", justifyContent:"center", width:"100%", boxSizing:"border-box",
              fontSize:16, fontWeight:700, color:"#0A1426", background:"var(--minerva-gold)",
              fontFamily:"var(--wix-text)", padding:"14px 18px", borderRadius:"var(--radius-md)",
              marginTop:4, boxShadow:"0 2px 10px rgba(224,162,48,0.30)" }}>Start a Diagnostic</a>
        </div>
        <span style={{ height:3, background:SPECTRUM_GRADIENT, opacity:0.85 }} />
      </div>
    </nav>
  );
}

/* Light-section head: classic pattern — eyebrow → heading → lead */
function SectionHead({ eyebrow, eyebrowColor = "var(--minerva-blue)", title, lead, center = true, dark = false, maxWidth = 720, leadMaxWidth = 640, leadNoWrap = false }) {
  return (
    <div data-animate="" style={{ maxWidth, margin: center ? "0 auto" : 0, textAlign: center ? "center" : "left" }}>
      <Eyebrow color={eyebrowColor} center={center}>{eyebrow}</Eyebrow>
      <h2 style={{ fontFamily:"var(--wix-display)", fontWeight:800, fontSize:44, lineHeight:1.12,
        letterSpacing:"-0.02em", color: dark ? "#fff" : "var(--ink-900)", margin:"20px 0 0" }}>{title}</h2>
      {lead && <p className={leadNoWrap ? "sh-lead-nowrap" : undefined} style={{ fontSize:19, lineHeight:1.65, color: dark ? "#C4D8EE" : "var(--ink-700)",
        margin:"18px auto 0", maxWidth: leadNoWrap ? "none" : leadMaxWidth, whiteSpace: leadNoWrap ? "nowrap" : "normal" }}>{lead}</p>}
    </div>
  );
}

/* Footer glossary — brief: VISDI · Mingi · The Ledger · CLV · The Minerva Way · VDK™ */
const SPLASH_GLOSSARY = [
  ["VISDI",                     "Visual-Digital Knowledge - the architecture everything else is built on"],
  ["Mingi",                     "Minerva General Intelligence - the result of compliant integration between humans and AI"],
  ["The Ledger",                "The append-only, auditable record of governance and communication"],
  ["CLV",                       "Context Language Validation, the context-layer counterpart to CSV"],
  ["The Minerva Way",           "The method behind every Minerva engagement"],
  ["Visual-Digital Knowledge™", "Knowledge made visual, structured, and digital, the shared thread"],
];

/* Shared firm footer — About · Our Team · Blog · Contact + glossary */
function SplashFooter() {
  const dim = "rgba(231,239,250,0.55)";
  const cols = [
    { label:"The Firm",  links:[["About","#"],["Our Team","#"],["Blog","#"],["Contact","#contact"]] },
    { label:"Divisions", links:[["Knowledge Governance ↗", SPLASH_LINKS.governance],["General Intelligence", SPLASH_LINKS.mgi]] },
    { label:"Front Door",links:[["Start a Diagnostic", SPLASH_LINKS.diagnostic]] },
  ];
  return (
    <footer id="contact" style={{ background:"#050913", borderTop:"1px solid rgba(255,255,255,0.07)", padding:"64px 72px 36px" }}>
      <div style={{ maxWidth:1200, margin:"0 auto" }}>
        <div style={{ marginBottom:48, paddingBottom:40, borderBottom:"1px solid rgba(255,255,255,0.07)" }}>
          <p style={{ fontSize:13.5, fontWeight:700, letterSpacing:"0.14em", textTransform:"uppercase",
            color:"rgba(231,239,250,0.35)", margin:"0 0 18px", fontFamily:"var(--wix-text)" }}>Key terms</p>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:"12px 44px" }}>
            {SPLASH_GLOSSARY.map(([term, def]) => (
              <div key={term} style={{ fontSize:15, lineHeight:1.5 }}>
                <span style={{ fontWeight:700, color:"rgba(231,239,250,0.74)", fontFamily:"var(--wix-text)" }}>{term}</span>
                <span style={{ color:"rgba(231,239,250,0.42)" }}> - {def}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display:"flex", gap:72, marginBottom:52 }}>
          <div style={{ flex:"0 0 280px" }}>
            <img src={window.__asset("assets/logo-minerva-km-white-clear.svg")} alt="Minerva Knowledge Management" style={{ height:60, marginBottom:18 }} />
            <p style={{ fontSize:15, color:"rgba(231,239,250,0.72)", lineHeight:1.65, margin:"0 0 22px" }}>
              One firm. Two divisions.<br/>One knowledge layer for regulated life sciences.
            </p>
            <div style={{ display:"flex", alignItems:"center", gap:8 }}>
              <span style={{ width:18, height:2, background:"var(--minerva-gold)" }}></span>
              <span style={{ fontSize:13.5, fontWeight:700, letterSpacing:"0.22em",
                color:"rgba(224,162,48,0.90)", textTransform:"uppercase",
                fontFamily:"var(--wix-text)" }}>FASTER SMARTER BETTER</span>
            </div>
          </div>
          <div style={{ flex:1, display:"flex", gap:64, justifyContent:"flex-end" }}>
            {cols.map(({ label, links }) => (
              <div key={label} style={{ minWidth:150 }}>
                <p style={{ fontSize:13.5, fontWeight:700, letterSpacing:"0.12em", textTransform:"uppercase",
                  color:"rgba(231,239,250,0.72)", margin:"0 0 16px", fontFamily:"var(--wix-text)" }}>{label}</p>
                {links.map(([l, h]) => (
                  <a key={l} href={h} style={{ display:"block", fontSize:15, color:dim, marginBottom:10,
                    fontFamily:"var(--wix-text)" }}>{l}</a>
                ))}
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderTop:"1px solid rgba(255,255,255,0.06)", paddingTop:24,
          display:"flex", justifyContent:"space-between" }}>
          <span style={{ fontSize:14, color:"rgba(231,239,250,0.36)", fontFamily:"var(--wix-text)" }}>© 2026 Minerva Knowledge Management · Los Angeles, CA</span>
          <span style={{ fontSize:14, color:"rgba(231,239,250,0.36)", fontFamily:"var(--wix-text)" }}>Minerva → The Minerva Way → VISDI</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SPLASH_STAGE, SPLASH_LINKS, SPECTRUM_GRADIENT, SplashIcon, UmbrellaLockup, SplashNav, SectionHead, SplashFooter });