/* === Footer ===
 * Three-column footer. Mark + tagline left, mono nav columns,
 * subscribe input. Bottom strip with mono fine print and status pill.
 */

const Footer = () => (
  <footer style={{
    background: "var(--obsidian-abyss)",
    borderTop: "1px solid var(--obsidian-fog)",
    padding: "72px 32px 32px",
    position: "relative", overflow: "hidden",
  }}>
    <div className="ol-footer-grid" style={{
      maxWidth: 1280, margin: "0 auto",
      display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1.4fr", gap: 48,
    }}>
      <div>
        <img src="../../assets/logo-mark.png" alt="" style={{ width: 64, height: 64, objectFit: "contain" }} />
        <div style={{
          fontFamily: "var(--font-brand)", fontSize: 36, color: "var(--fg-1)",
          textTransform: "uppercase", marginTop: 12, lineHeight: 1, letterSpacing: "0.02em",
        }}>
          Obsidian <span style={{ color: "var(--neon-magenta)", textShadow: "var(--glow-magenta-sm)" }}>Lake</span>
        </div>
        <p style={{
          fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55,
          color: "var(--fg-3)", marginTop: 12, maxWidth: 280,
        }}>
          Counter-surveillance tools and training.
        </p>
      </div>

      <FooterCol title="Operate" items={["Training", "Field Kits", "Field Notes", "For Teams"]}/>
      <FooterCol title="Company" items={["Operators", "Press", { label: "Contact", href: "mailto:admin@support.obsidian-lake.com" }, "Signal Key"]}/>

      <div>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.28em", textTransform: "uppercase", color: "var(--neon-magenta)",
          marginBottom: 12,
        }}>// Briefings //</div>
        <p style={{
          fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55,
          color: "var(--fg-2)", marginTop: 0,
        }}>
          A single email when a new cohort opens or a Field Note publishes. No marketing.
        </p>
        <div style={{ display: "flex", marginTop: 12 }}>
          <input placeholder="ops@example.org" style={{
            background: "#000", color: "var(--fg-1)", border: "1px solid var(--obsidian-fog)",
            padding: "10px 12px", fontFamily: "var(--font-mono)", fontSize: 12,
            flex: 1, outline: "none", borderRadius: 0,
          }}/>
          <button style={{
            background: "var(--neon-magenta)", border: "none", color: "#07040E",
            padding: "0 14px", fontFamily: "var(--font-mono)", fontSize: 13,
            letterSpacing: "0.18em", textTransform: "uppercase", cursor: "pointer",
            boxShadow: "var(--glow-magenta-sm)",
          }}>→</button>
        </div>
      </div>
    </div>

    <div style={{
      maxWidth: 1280, margin: "56px auto 0",
      borderTop: "1px dashed var(--obsidian-fog)",
      paddingTop: 24,
      display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16,
    }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)",
        letterSpacing: "0.18em", textTransform: "uppercase",
      }}>
        © 2026 Obsidian-Lake LLC. · Wyoming, USA · Reg. SC-OL-0042
        <br/>
        Training and field kits delivered in partnership with Cossack Consulting, except the Sovereign Citizen series, which is built and operated by Obsidian Lake on Pipe Hitter Tools.
      </div>
      <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <StatusPill tone="ok">All Systems · v1.7.3</StatusPill>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-3)",
          letterSpacing: "0.18em", textTransform: "uppercase",
        }}>PGP: AB91 8C42 …</span>
      </div>
    </div>
  </footer>
);

const FooterCol = ({ title, items }) => (
  <div>
    <div style={{
      fontFamily: "var(--font-mono)", fontSize: 10,
      letterSpacing: "0.28em", textTransform: "uppercase", color: "var(--neon-magenta)",
      marginBottom: 14,
    }}>// {title}</div>
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((i) => {
        const label = typeof i === "string" ? i : i.label;
        const href = typeof i === "string" ? "#" : i.href;
        return (
        <li key={label}>
          <a href={href} style={{
            fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg-2)",
            textDecoration: "none",
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = "var(--neon-cyan)"}
          onMouseLeave={(e) => e.currentTarget.style.color = "var(--fg-2)"}
          >{label}</a>
        </li>
        );
      })}
    </ul>
  </div>
);

Object.assign(window, { Footer });