/* App root + sections */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA, useMemo: useMemoA } = React;

/* ============ A UNIFIED ECOSYSTEM ============ */
function UnifiedEcosystem() {
  return (
    <section id="ecosystem" style={{ position: "relative", padding: "140px 0 120px", borderTop: "1px solid var(--line)" }}>
      <div className="container" style={{
        display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 80, alignItems: "center",
      }} >
        <div style={{ display: "flex", justifyContent: "center" }} className="eco-left">
          <BigGlobe />
        </div>
        <div className="eco-right">
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.24em", color: "var(--blue-bright)", textTransform: "uppercase" }}>
            01 — The Ecosystem
          </div>
          <h2 className="display" style={{
            margin: "20px 0 22px", fontSize: "clamp(40px, 5vw, 72px)",
            letterSpacing: "-0.025em", lineHeight: 1.02,
          }}>
            A Unified Ecosystem.
          </h2>
          <p style={{
            color: "var(--ink-2)", fontSize: 17.5, lineHeight: 1.6, margin: 0, maxWidth: 540,
          }}>
            GIMS is an administrative framework built to engage any institutional reality with
            surgical precision. Whether in a courtroom, a bank ledger, or a tax registry, the
            mechanics of power remain consistent.
          </p>

          <div style={{
            marginTop: 36, padding: "26px 30px", border: "1px solid var(--line-strong)",
            background: "linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005))",
            position: "relative", maxWidth: 580,
          }}>
            {/* gold tick top-left */}
            <span style={{
              position: "absolute", top: -1, left: -1, width: 16, height: 16,
              borderTop: "1px solid var(--gold)", borderLeft: "1px solid var(--gold)",
            }} />
            <span style={{
              position: "absolute", bottom: -1, right: -1, width: 16, height: 16,
              borderBottom: "1px solid var(--gold)", borderRight: "1px solid var(--gold)",
            }} />
            <div className="mono" style={{
              fontSize: 9.5, letterSpacing: "0.26em", color: "var(--gold)", textTransform: "uppercase", marginBottom: 14,
            }}>
              Foundation Doctrine · §I.1
            </div>
            <p className="serif-alt" style={{
              margin: 0, fontSize: 22, lineHeight: 1.45, color: "var(--ink)",
            }}>
              "Courts, banks, status correction, and tax assessment are not separate worlds. They
              are expressions of the same execution logic applied to different surfaces."
            </p>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          #ecosystem .container { grid-template-columns: 1fr !important; gap: 56px !important; }
          .eco-left { order: 2; }
          .eco-right { order: 1; }
        }
      `}</style>
    </section>
  );
}

/* ============ FOUR-PROTOCOL MATRIX ============ */
function ProtocolMatrix() {
  const cards = [
    { letter: "C", title: "Courts", desc: "Administrative pleading suite and surety protocols.",
      detail: "Engineered for accountability proceedings, this protocol structures pleadings, sureties, and the procedural bond architecture of every judicial action.",
      color: "#3a6dff", glow: "rgba(58,109,255,0.35)", code: "PRT.01" },
    { letter: "F", title: "Finance", desc: "Commercial ledger reconciliation and asset recovery.",
      detail: "Translates institutional financial movements into a single legible ledger — debit, credit, sanction, recovery — across banks and tax registries.",
      color: "#e0935a", glow: "rgba(224,147,90,0.35)", code: "PRT.02" },
    { letter: "A", title: "Account Correction", desc: "Juristic standing and identity authentication.",
      detail: "Establishes and corrects the underlying juristic record. The protocol that decides who you are before any obligation can attach.",
      color: "#a35cff", glow: "rgba(163,92,255,0.35)", code: "PRT.03" },
    { letter: "T", title: "Tax Assessment", desc: "Institutional EIN discovery and Asset Form analysis.",
      detail: "Surfaces the fiscal vector — entity identifiers, declared assets, and the reconciliation pathway between domestic and cross-border tax registries.",
      color: "#3fb479", glow: "rgba(63,180,121,0.35)", code: "PRT.04" },
  ];
  const [active, setActive] = useStateA(null);

  return (
    <section id="protocol" style={{ position: "relative", padding: "140px 0 130px", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
          <GoldBadge>02 — Four-Protocol Matrix</GoldBadge>
          <h2 className="display" style={{
            margin: 0, fontSize: "clamp(44px, 5.6vw, 84px)", letterSpacing: "-0.025em", lineHeight: 1, maxWidth: 1000,
          }}>
            The <em className="serif-alt" style={{ color: "var(--gold)", fontSize: "1.08em" }}>grammar</em> of administration.
          </h2>
          <p style={{
            margin: "6px 0 0", maxWidth: 620, color: "var(--ink-2)", fontSize: 16.5, lineHeight: 1.55,
          }}>
            Four protocols. Every institutional act is some composition of these.
            Select one to read its execution logic.
          </p>
        </div>

        <div style={{
          marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18,
        }} className="prot-grid">
          {cards.map((c, i) => {
            const isOpen = active === i;
            return (
              <button
                key={c.letter}
                onClick={() => setActive(isOpen ? null : i)}
                onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}
                style={{
                  textAlign: "left", padding: "26px 24px 28px",
                  background: isOpen
                    ? `linear-gradient(180deg, ${c.color}10, rgba(255,255,255,0.01))`
                    : "linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005))",
                  border: `1px solid ${isOpen ? c.color : "var(--line)"}`,
                  cursor: "pointer", color: "var(--ink)", position: "relative",
                  transition: "transform 280ms cubic-bezier(.2,.7,.2,1), border-color 240ms ease, background 240ms ease, box-shadow 240ms ease",
                  boxShadow: isOpen ? `0 18px 60px ${c.glow}` : "none",
                  fontFamily: "inherit",
                  display: "flex", flexDirection: "column", gap: 16, minHeight: 280,
                }}
              >
                {/* letter badge */}
                <div style={{
                  width: 56, height: 56, display: "flex", alignItems: "center", justifyContent: "center",
                  background: `linear-gradient(180deg, ${c.color}, ${shade(c.color, -25)})`,
                  boxShadow: `0 0 24px ${c.glow}, inset 0 1px 0 rgba(255,255,255,0.3)`,
                  borderRadius: 14, color: "white", fontFamily: "'Inter'", fontWeight: 900, fontStyle: "italic", fontSize: 28, letterSpacing: "-0.02em",
                }}>
                  {c.letter}
                </div>

                <div className="mono" style={{
                  fontSize: 9.5, letterSpacing: "0.24em", color: "var(--ink-4)", textTransform: "uppercase",
                }}>
                  {c.code}
                </div>

                <h3 className="display" style={{
                  margin: 0, fontSize: 26, letterSpacing: "-0.02em", lineHeight: 1.05,
                }}>{c.title}.</h3>

                <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 14, lineHeight: 1.5 }}>
                  {c.desc}
                </p>

                {/* expand detail */}
                <div style={{
                  maxHeight: isOpen ? 240 : 0, overflow: "hidden",
                  transition: "max-height 320ms ease, margin 320ms ease, opacity 200ms ease",
                  opacity: isOpen ? 1 : 0,
                  marginTop: isOpen ? 4 : 0,
                }}>
                  <div style={{
                    paddingTop: 14, borderTop: `1px dashed ${c.color}66`,
                    color: "var(--ink-2)", fontSize: 13.5, lineHeight: 1.55,
                  }}>
                    {c.detail}
                  </div>
                </div>

                {/* arrow */}
                <div style={{
                  marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center",
                  paddingTop: 8,
                }}>
                  <span className="mono" style={{
                    fontSize: 10.5, letterSpacing: "0.18em", color: isOpen ? c.color : "var(--ink-3)",
                    textTransform: "uppercase",
                  }}>{isOpen ? "● Reading" : "Read more"}</span>
                  <span style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 16,
                    color: isOpen ? c.color : "var(--ink-3)",
                    transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                    transition: "transform 280ms ease, color 240ms ease",
                  }}>↗</span>
                </div>
              </button>
            );
          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) {
          .prot-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          .prot-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* helper: shade a hex */
function shade(hex, amt) {
  const c = hex.replace("#", "");
  const r = Math.max(0, Math.min(255, parseInt(c.slice(0, 2), 16) + amt));
  const g = Math.max(0, Math.min(255, parseInt(c.slice(2, 4), 16) + amt));
  const b = Math.max(0, Math.min(255, parseInt(c.slice(4, 6), 16) + amt));
  return `rgb(${r}, ${g}, ${b})`;
}

/* ============ THE LITERACY OF EXECUTION ============ */
function LiteracyOfExecution({ scrollToId }) {
  const modules = [
    { l: "M", k: "Identity Fixation", d: "How institutions anchor subjective beings into structural nodes to track obligation." },
    { l: "C", k: "Clerical Continuity", d: "The transition from narrative explanation to automated, record-based execution." },
    { l: "S", k: "Surety & Accountability", d: "Mapping the financial bond architecture behind every judicial and administrative action." },
    { l: "J", k: "Jurisdictional Logic", d: "Recognizing the invisible boundaries that define authority and limit institutional reach." },
  ];
  const [hover, setHover] = useStateA(null);

  return (
    <section id="foundation" style={{ position: "relative", padding: "140px 0 140px", borderTop: "1px solid var(--line)" }}>
      <div className="container lit-grid" style={{
        display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center",
        paddingLeft: "calc(var(--container-pad, 0px) + 10px)",
      }}>
        <div style={{ marginLeft: 30 }}>
          <GoldBadge accent="blue">Institutional Curriculum</GoldBadge>
          <h2 className="display" style={{
            margin: "24px 0 28px", fontSize: "clamp(54px, 7vw, 108px)", letterSpacing: "-0.03em",
            lineHeight: 0.95,
          }}>
            THE LITERACY <br />
            <span style={{
              backgroundImage: "linear-gradient(90deg, #6a8dff 0%, #3a6dff 100%)",
              WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent",
            }}>OF EXECUTION.</span>
          </h2>
          <p style={{
            color: "var(--ink-2)", fontSize: 16.5, lineHeight: 1.6, margin: 0, maxWidth: 540,
          }}>
            Arguments are for victims. Protocols are for administrators. The{" "}
            <em className="serif-i" style={{ color: "var(--ink)" }}>GIMS: Courts Protocol Basics</em>{" "}
            handbook provides the missing structural literacy required to engage global systems with surgical precision.
          </p>

          <div style={{ marginTop: 36, display: "flex", flexDirection: "column", gap: 10 }}>
            {modules.map((m, i) => (
              <div
                key={m.l}
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(null)}
                style={{
                  display: "grid", gridTemplateColumns: "auto 1fr", gap: 18,
                  padding: "16px 20px",
                  background: hover === i ? "rgba(58,109,255,0.04)" : "rgba(255,255,255,0.02)",
                  border: hover === i ? "1px solid rgba(58,109,255,0.5)" : "1px solid var(--line)",
                  alignItems: "center", transition: "all 240ms ease",
                  cursor: "default",
                }}
              >
                <div style={{
                  width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center",
                  background: "linear-gradient(180deg, #4c7bff, #2a52e6)",
                  boxShadow: "0 0 18px rgba(58,109,255,0.4), inset 0 1px 0 rgba(255,255,255,0.3)",
                  borderRadius: 10, color: "white",
                  fontFamily: "'Inter'", fontWeight: 900, fontStyle: "italic", fontSize: 18,
                }}>{m.l}</div>
                <div>
                  <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.22em", color: "var(--ink-4)", textTransform: "uppercase" }}>
                    Module 0{i + 1}
                  </div>
                  <div className="display" style={{ fontSize: 19, letterSpacing: "-0.015em", margin: "3px 0 4px" }}>
                    {m.k}.
                  </div>
                  <div style={{ color: "var(--ink-2)", fontSize: 13.5, lineHeight: 1.5 }}>
                    {m.d}
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 32 }}>
            <PillButton variant="blue" glow onClick={() => scrollToId("registry")}>
              Secure handbook node →
            </PillButton>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "center" }} className="book-wrap">
          <Handbook />
        </div>
      </div>
      <style>{`
        @media (max-width: 920px) {
          #foundation .container { grid-template-columns: 1fr !important; gap: 64px !important; }
          .book-wrap { order: 2; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Handbook ---------- */
function Handbook() {
  return (
    <div style={{
      perspective: 1400, width: "100%", maxWidth: 380, aspectRatio: "5 / 7", position: "relative",
    }}>
      {/* glow */}
      <div style={{
        position: "absolute", inset: "-10%",
        background: "radial-gradient(ellipse at 30% 30%, rgba(58,109,255,0.22), transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(212,164,68,0.16), transparent 60%)",
        filter: "blur(24px)", pointerEvents: "none",
      }} />
      <div style={{
        width: "100%", height: "100%", position: "relative",
        transformStyle: "preserve-3d", transform: "rotateY(-18deg) rotateX(4deg)",
        transition: "transform 600ms cubic-bezier(.2,.7,.2,1)",
      }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = "rotateY(-8deg) rotateX(2deg)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = "rotateY(-18deg) rotateX(4deg)"; }}
      >
        {/* deep shadow behind */}
        <div style={{
          position: "absolute", inset: 0, transform: "translateZ(-16px) translate(8px, 12px)",
          background: "#000", boxShadow: "0 40px 100px rgba(0,0,0,0.8)",
        }} />

        {/* cover image */}
        <img
          src="assets/basics-cover.png"
          alt="GIMS: Courts Protocol Basics"
          style={{
            position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
            display: "block",
            boxShadow: "0 30px 60px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(212,164,68,0.35)",
            border: "1px solid rgba(212,164,68,0.35)",
          }}
        />

        {/* edge sheen overlay */}
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "linear-gradient(125deg, rgba(255,255,255,0.08) 0%, transparent 28%, transparent 62%, rgba(255,255,255,0.05) 82%)",
        }} />

        {/* pages edge (right) */}
        <div style={{
          position: "absolute", right: -3, top: 6, bottom: 6, width: 6, transform: "translateZ(-2px)",
          background: "repeating-linear-gradient(to bottom, #d4d0c0 0 1px, #aaa298 1px 2px)",
        }} />
        {/* pages edge (bottom) */}
        <div style={{
          position: "absolute", bottom: -3, left: 6, right: 6, height: 4, transform: "translateZ(-2px)",
          background: "repeating-linear-gradient(to right, #d4d0c0 0 1px, #aaa298 1px 2px)",
        }} />
      </div>
    </div>
  );
}

/* ============ REGISTRY ACCESS ============ */

/* Hostgator's bot-challenge layer returns 409 with an inline
   `document.cookie = "humans_NNNN=1"` script on the first POST. Real browsers
   solve this transparently; fetch() does not. We replicate it by parsing the
   cookie from the response body and retrying once. */
async function postWithChallenge(url, body) {
  const opts = { method: "POST", body, credentials: "same-origin", headers: { Accept: "application/json" } };
  let res = await fetch(url, opts);
  if (res.status === 409) {
    const text = await res.clone().text();
    const m = text.match(/document\.cookie\s*=\s*["']([^"';]+)["']/);
    if (m) {
      document.cookie = m[1] + "; path=/";
      res = await fetch(url, opts);
    }
  }
  return res;
}

function RegistryAccess() {
  const captcha = useMemoA(() => {
    const a = Math.floor(Math.random() * 13) + 3;
    const b = Math.floor(Math.random() * 9) + 2;
    return { a, b, answer: a * b };
  }, []);
  const [data, setData] = useStateA({ name: "", email: "", mobile: "", captcha: "" });
  const [touched, setTouched] = useStateA({});
  const [submitted, setSubmitted] = useStateA(false);
  const [sending, setSending] = useStateA(false);
  const [sendError, setSendError] = useStateA(null);
  const [ref] = useStateA(() => "GIMS-" + Math.floor(Math.random() * 9e7 + 1e7));

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const mark = (k) => setTouched((t) => ({ ...t, [k]: true }));

  const validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email);
  const validMobile = data.mobile.replace(/\D/g, "").length >= 7;
  const validName = data.name.trim().length >= 2;
  const validCaptcha = Number(data.captcha) === captcha.answer;
  const formValid = validName && validEmail && validMobile && validCaptcha;

  const submit = async (e) => {
    e.preventDefault();
    setTouched({ name: true, email: true, mobile: true, captcha: true });
    if (!formValid || sending) return;

    setSending(true);
    setSendError(null);
    try {
      const fd = new FormData();
      fd.set("name", data.name);
      fd.set("email", data.email);
      fd.set("mobile", data.mobile);
      fd.set("ref", ref);
      fd.set("kind", "Registry Access");
      fd.set("msg", "Registry node initialization request. Mobile: " + data.mobile);
      const res = await postWithChallenge("contact.php", fd);
      const body = await res.json().catch(() => ({}));
      if (res.ok && body.ok) {
        setSubmitted(true);
      } else {
        setSendError(body.error || "Transmission failed — try again.");
      }
    } catch (err) {
      setSendError("Network error — try again.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="registry" style={{ position: "relative", padding: "140px 0 130px", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginBottom: 56 }}>
          <GoldBadge>04 — Registry Access</GoldBadge>
          <h2 className="display" style={{ margin: 0, fontSize: "clamp(44px, 5.6vw, 84px)", letterSpacing: "-0.025em", lineHeight: 1 }}>
            Registry Access.
          </h2>
          <p style={{ margin: "8px 0 0", maxWidth: 620, color: "var(--ink-2)", fontSize: 16.5, lineHeight: 1.55 }}>
            Provide credentials to initialize your institutional node. Handbooks are dispatched via secure link.
          </p>
        </div>

        <div style={{ maxWidth: 760, margin: "0 auto", position: "relative" }}>
          {/* form */}
          <form
            onSubmit={submit}
            style={{
              padding: "40px 44px",
              background: "linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005))",
              border: "1px solid var(--line-strong)", position: "relative",
              filter: submitted ? "blur(2px)" : "none", transition: "filter 320ms ease",
              pointerEvents: submitted ? "none" : "auto",
            }}
            className="reg-form"
          >
            <CornerTicks />

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="reg-grid">
              <Field label="Full legal name" required err={touched.name && !validName && "required"}>
                <input value={data.name} onChange={(e) => set("name", e.target.value)} onBlur={() => mark("name")}
                  placeholder="As recorded by your civil registry" />
              </Field>
              <Field label="Node email" required err={touched.email && !validEmail && "valid email required"}>
                <input type="email" value={data.email} onChange={(e) => set("email", e.target.value)} onBlur={() => mark("email")}
                  placeholder="you@institution.gov" />
              </Field>
              <div style={{ gridColumn: "1 / -1" }}>
                <Field label="Mobile contact" required err={touched.mobile && !validMobile && "valid number required"}>
                  <input value={data.mobile} onChange={(e) => set("mobile", e.target.value)} onBlur={() => mark("mobile")}
                    placeholder="+1 415 555 0123" />
                </Field>
              </div>
            </div>

            <p style={{
              marginTop: 22, color: "var(--ink-3)", fontSize: 12.5, lineHeight: 1.55, maxWidth: 600,
            }}>
              By providing your contact information above, you explicitly consent to receive automated institutional
              communications via email and SMS for the purposes of node initialization, verification, and digital delivery
              of the GIMS Protocol Handbook. Standard message and data rates may apply. Consent is not a condition of
              participation in the public registry.
            </p>

            <div style={{
              marginTop: 26, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div className="mono" style={{
                  display: "inline-flex", alignItems: "center", gap: 10,
                  padding: "10px 16px", background: "rgba(58,109,255,0.08)",
                  border: "1px solid rgba(58,109,255,0.35)",
                  fontSize: 11.5, letterSpacing: "0.18em", color: "var(--blue-bright)",
                  textTransform: "uppercase", borderRadius: 999,
                }}>
                  <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="5" stroke="currentColor" /><path d="M6 3v3l2 1" stroke="currentColor" strokeLinecap="round" /></svg>
                  Check: {captcha.a} × {captcha.b} =
                </div>
                <div style={{ width: 84 }} className="field-naked">
                  <input
                    type="text" value={data.captcha} onChange={(e) => set("captcha", e.target.value)} onBlur={() => mark("captcha")}
                    style={{
                      width: "100%", background: "rgba(255,255,255,0.02)",
                      border: touched.captcha && !validCaptcha ? "1px solid var(--danger)" : "1px solid var(--line-strong)",
                      color: "var(--ink)", padding: "10px 12px", fontFamily: "'JetBrains Mono', monospace", fontSize: 14,
                      textAlign: "center", outline: "none", transition: "border 180ms ease",
                    }}
                    onFocus={(e) => e.target.style.borderColor = "var(--blue)"}
                  />
                </div>
              </div>
              <PillButton variant="blue" glow type="submit" disabled={sending} style={{ padding: "14px 28px", fontSize: 12.5 }}>
                {sending ? "Transmitting…" : "Request node entry →"}
              </PillButton>
            </div>
            {sendError && (
              <div className="mono" style={{
                marginTop: 18, padding: "10px 14px",
                background: "rgba(255,106,106,0.08)", border: "1px solid rgba(255,106,106,0.4)",
                color: "var(--danger)", fontSize: 11.5, letterSpacing: "0.14em", textTransform: "uppercase",
              }}>
                ↳ {sendError}
              </div>
            )}
          </form>

          {/* success overlay */}
          {submitted && (
            <div style={{
              position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center",
              animation: "rise 360ms cubic-bezier(.2,.7,.2,1)",
            }}>
              <div style={{
                width: "min(560px, calc(100% - 32px))",
                padding: "44px 36px", textAlign: "center",
                background: "linear-gradient(180deg, #0a0f1e 0%, #060915 100%)",
                border: "1px solid var(--gold)",
                boxShadow: "0 20px 80px rgba(212,164,68,0.18)",
                position: "relative",
              }}>
                <CornerTicks />
                <div style={{
                  width: 64, height: 64, borderRadius: 999, margin: "0 auto 22px",
                  background: "rgba(212,164,68,0.1)", border: "1px solid rgba(212,164,68,0.4)",
                  display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gold)",
                }}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5 9-11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </div>
                <h3 className="display" style={{ margin: 0, fontSize: 34, letterSpacing: "-0.02em" }}>
                  Filed in the registry.
                </h3>
                <p style={{ color: "var(--ink-2)", marginTop: 14, fontSize: 14.5, lineHeight: 1.55 }}>
                  Reference <span className="mono" style={{ color: "var(--gold)" }}>{ref}</span> · custodian contact
                  will arrive at <span style={{ color: "var(--ink)" }}>{data.email}</span> within five working days.
                </p>
                <div style={{ marginTop: 22 }}>
                  <PillButton variant="dark" onClick={() => { setSubmitted(false); setData({ name: "", email: "", mobile: "", captcha: "" }); setTouched({}); }}>
                    File another →
                  </PillButton>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 700px) {
          .reg-form { padding: 28px 22px !important; }
          .reg-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function CornerTicks() {
  const t = { position: "absolute", width: 12, height: 12, borderStyle: "solid", borderColor: "var(--gold)", borderWidth: 0 };
  return (
    <>
      <span style={{ ...t, top: -1, left: -1, borderTopWidth: 1, borderLeftWidth: 1 }} />
      <span style={{ ...t, top: -1, right: -1, borderTopWidth: 1, borderRightWidth: 1 }} />
      <span style={{ ...t, bottom: -1, left: -1, borderBottomWidth: 1, borderLeftWidth: 1 }} />
      <span style={{ ...t, bottom: -1, right: -1, borderBottomWidth: 1, borderRightWidth: 1 }} />
    </>
  );
}

function Field({ label, required, err, children }) {
  return (
    <div className="field">
      <label style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
        <span>{label}{required && <span style={{ color: "var(--gold)", marginLeft: 4 }}>*</span>}</span>
        {err && <span style={{ color: "var(--danger)", letterSpacing: "0.12em", fontSize: 9.5 }}>↳ {err}</span>}
      </label>
      {children}
    </div>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer style={{ position: "relative", borderTop: "1px solid var(--line)", padding: "56px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
        <GimsLogo size={36} />
        <div className="mono" style={{
          fontSize: 11, letterSpacing: "0.32em", color: "var(--ink-3)", textTransform: "uppercase",
        }}>
          Powered by GIMS · Artificial Intelligence
        </div>
        <div style={{
          width: "100%", maxWidth: 900, marginTop: 22, paddingTop: 22,
          borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12,
        }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--ink-4)", textTransform: "uppercase" }}>
            © 2026 · Social Anger Labs
          </div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--ink-4)", textTransform: "uppercase", display: "flex", gap: 18, alignItems: "center" }}>
            <span>Node US-WEST-1</span>
            <span style={{ color: "var(--ok)" }}>● Operational</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ============ APP ROOT ============ */
function App() {
  const [navModal, setNavModal] = useStateA(null);

  const openNavModal = (id) => setNavModal(id);
  const scrollToId = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      <Nav openNavModal={openNavModal} scrollToId={scrollToId} />
      <Hero scrollToId={scrollToId} />
      <UnifiedEcosystem />
      <ProtocolMatrix />
      <LiteracyOfExecution scrollToId={scrollToId} />
      <RegistryAccess />
      <Footer />

      {navModal && <NavLinkModal which={navModal} onClose={() => setNavModal(null)} scrollToId={scrollToId} />}
      <MobileTabBar scrollToId={scrollToId} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);