// Footer with giant "AUREK" wordmark treatment and meta links.
function Footer() {
  return (
    <footer style={{ position: "relative", paddingTop: 80, overflow: "hidden" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 28px" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr 1fr 1fr",
            gap: 40,
            paddingBottom: 60,
            borderBottom: "1px solid var(--line)",
          }}
        >
          <div>
            <AurekMark />
            <p
              className="mono"
              style={{
                fontSize: 11,
                color: "var(--text-faint)",
                letterSpacing: "0.1em",
                marginTop: 18,
                maxWidth: 260,
                lineHeight: 1.6,
              }}
            >
              Governance for agentic systems. Built for production.
            </p>
          </div>
          {[
            { h: "Platform", l: ["Protocol"] },
            { h: "Resources", l: ["Integrations"] },
            { h: "Company", l: ["About", "Contact"] },
          ].map((col) => (
            <div key={col.h}>
              <div
                className="mono"
                style={{
                  fontSize: 10,
                  letterSpacing: "0.22em",
                  color: "var(--text-faint)",
                  textTransform: "uppercase",
                  marginBottom: 14,
                }}
              >
                {col.h}
              </div>
              {col.l.map((x) => (
                <a
                  key={x}
                  href={
                    x === "Protocol"
                      ? "#protocol"
                      : x === "Contact"
                        ? "mailto:manasgarg02@gmail.com?subject=Aurek%20Early%20Access"
                        : "#"
                  }
                  style={{
                    display: "block",
                    fontSize: 13,
                    color: "var(--text-dim)",
                    padding: "6px 0",
                    transition: "color .2s",
                  }}
                  onMouseEnter={(e) => (e.currentTarget.style.color = "var(--text)")}
                  onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-dim)")}
                >
                  {x}
                </a>
              ))}
            </div>
          ))}
        </div>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "24px 0",
          }}
          className="mono"
        >
          <span style={{ fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.08em" }}>
            <span style={{
              display: "inline-block",
              width: 6, height: 6, borderRadius: "50%",
              background: "oklch(0.80 0.14 145)",
              marginRight: 8,
              boxShadow: "0 0 6px oklch(0.80 0.14 145 / 0.8)",
            }} />
            All systems normal
          </span>
          <span style={{ fontSize: 11, color: "var(--text-faint)", letterSpacing: "0.08em" }}>
            © 2026 Aurek, Inc.
          </span>
        </div>
      </div>

      {/* Giant wordmark, subtly lit */}
      <div
        aria-hidden
        style={{
          position: "relative",
          marginTop: 20,
          height: 220,
          overflow: "hidden",
          pointerEvents: "none",
        }}
      >
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            alignItems: "flex-end",
            justifyContent: "center",
          }}
        >
          <div
            style={{
              fontSize: "min(22vw, 280px)",
              letterSpacing: "-0.04em",
              fontWeight: 700,
              lineHeight: 0.9,
              background: "linear-gradient(180deg, rgba(243,240,234,0.12), rgba(243,240,234,0.02))",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
              color: "transparent",
              transform: "translateY(14%)",
            }}
          >
            AUREK
          </div>
        </div>
        <div
          style={{
            position: "absolute",
            inset: 0,
            background: "radial-gradient(ellipse 30% 60% at 50% 100%, oklch(0.82 0.14 75 / 0.15), transparent 70%)",
          }}
        />
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });