/* Modals: Nav link popovers */
const { useEffect: useEffectM } = React;

/* ---------- Modal Shell ---------- */
function ModalShell({ onClose, width = 720, title, kicker, accent = "gold", children, footer, noPadding }) {
  useEffectM(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [onClose]);

  const accents = {
    gold: { c: "var(--gold)", glow: "rgba(212,164,68,0.18)" },
    blue: { c: "var(--blue-bright)", glow: "rgba(58,109,255,0.18)" },
    purple: { c: "#b56dff", glow: "rgba(181,109,255,0.18)" },
  };
  const a = accents[accent] || accents.gold;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: `min(${width}px, calc(100vw - 40px))`,
          maxHeight: "calc(100vh - 80px)",
          background: "linear-gradient(180deg, #0a0f1e 0%, #060915 100%)",
          border: "1px solid var(--line-strong)",
          boxShadow: `0 40px 120px rgba(0,0,0,0.6), 0 0 0 1px ${a.glow}, 0 0 64px ${a.glow}`,
          display: "flex", flexDirection: "column",
          animation: "rise 280ms cubic-bezier(.2,.7,.2,1)",
          position: "relative",
        }}
      >
        {/* top accent line */}
        <div style={{
          position: "absolute", top: 0, left: 0, right: 0, height: 2,
          background: `linear-gradient(90deg, transparent, ${a.c}, transparent)`,
        }} />

        {/* header */}
        <div style={{
          padding: "22px 28px 16px", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 24,
        }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: a.c, textTransform: "uppercase" }}>{kicker}</span>
            <span className="display" style={{ fontSize: 32, letterSpacing: "-0.025em" }}>{title}</span>
          </div>
          <button
            onClick={onClose}
            className="btn-press"
            style={{
              width: 32, height: 32, borderRadius: 999, background: "transparent",
              border: "1px solid var(--line-strong)", color: "var(--ink-2)",
              display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
            }}
            aria-label="Close"
          >
            <svg width="11" height="11" viewBox="0 0 12 12"><path d="M1 1l10 10M11 1L1 11" stroke="currentColor" strokeWidth="1.6" /></svg>
          </button>
        </div>

        <div style={{ flex: 1, overflowY: "auto", padding: noPadding ? 0 : "0 28px 22px" }} className="term-scroll">
          {children}
        </div>

        {footer && (
          <div style={{ padding: "18px 28px", borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- Nav link popover ---------- */
function NavLinkModal({ which, onClose, scrollToId }) {
  const data = {
    ecosystem: {
      accent: "blue",
      kicker: "A unified institutional field",
      title: "The Ecosystem",
      desc: "GIMS operates on the principle that all administrative structures — courts, banks, and tax registries — are interconnected nodes in a single global execution field. The ecosystem is built to restore visibility to these chains of delegation.",
      pills: [
        "Cross-jurisdictional node mapping",
        "Surety bond repository synchronization",
        "Administrative dependency tracking",
        "Automated record reconciliation",
      ],
      cta: "Navigate to ecosystem",
      target: "ecosystem",
    },
    protocol: {
      accent: "gold",
      kicker: "Surgical administrative precision",
      title: "Four-Protocol Matrix",
      desc: "The Four-Protocol system provides specialized administrative tracks for complex institutional engagements. Each protocol is a distinct module governed by unique execution logic.",
      pills: [
        "Courts — accountability & pleading",
        "Finance — commercial ledger reconciliation",
        "Account correction — jurisdictional standing",
        "Tax — federal asset alignment",
      ],
      cta: "Navigate to protocol",
      target: "protocol",
    },
    foundation: {
      accent: "purple",
      kicker: "Administrative fluency is literacy",
      title: "The Foundation",
      desc: "The GIMS Foundation focuses on the shift from narrative arguments to institutional execution. Its training and the Basics handbook provide the missing literacy required to navigate global systems.",
      pills: [
        "Execution logic vs. arguments",
        "Identity fixation mechanics",
        "Clerical continuity support",
        "Enforcement node deployment",
      ],
      cta: "Navigate to foundation",
      target: "foundation",
    },
  };
  const d = data[which];
  if (!d) return null;
  const accentColor = d.accent === "blue" ? "var(--blue-bright)" : d.accent === "purple" ? "#b56dff" : "var(--gold)";

  return (
    <ModalShell
      onClose={onClose} width={680} kicker={d.kicker} title={d.title} accent={d.accent}
      footer={
        <>
          <button onClick={onClose} className="btn-press" style={{
            background: "transparent", border: "1px solid var(--line-strong)",
            color: "var(--ink-2)", padding: "10px 18px", borderRadius: 999,
            fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
          }}>Dismiss</button>
          <PillButton
            variant={d.accent === "gold" ? "gold" : d.accent === "purple" ? "dark" : "blue"} glow
            onClick={() => { onClose(); setTimeout(() => scrollToId(d.target), 200); }}
            style={d.accent === "purple" ? { background: "linear-gradient(180deg, #b56dff 0%, #7a3fc7 100%)", color: "white", border: "none", boxShadow: "0 0 28px rgba(181,109,255,0.4), 0 1px 0 rgba(255,255,255,0.3) inset" } : {}}
          >
            {d.cta} →
          </PillButton>
        </>
      }
    >
      <p style={{ margin: "4px 0 22px", color: "var(--ink-2)", fontSize: 15.5, lineHeight: 1.6 }}>
        {d.desc}
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {d.pills.map((p) => (
          <div key={p} style={{
            display: "flex", alignItems: "center", gap: 12,
            padding: "13px 16px", background: "rgba(255,255,255,0.025)",
            border: "1px solid var(--line)",
            fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5,
            letterSpacing: "0.16em", textTransform: "uppercase",
            color: "var(--ink)",
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999, background: accentColor,
              boxShadow: `0 0 8px ${accentColor}`, flexShrink: 0,
            }} />
            {p}
          </div>
        ))}
      </div>
    </ModalShell>
  );
}
Object.assign(window, { ModalShell, NavLinkModal });