function SiteFooter() {
  const VERSION = "v1.0.16";
  const col = (h, links) => (
    <div style={{ display: "grid", gap: 12 }}>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 500,
        letterSpacing: "0.18em", textTransform: "uppercase",
        color: "var(--fg-3)", marginBottom: 4,
      }}>{h}</div>
      {links.map((l) => (
        <a key={l} href="#" style={{
          fontSize: 13, color: "var(--fg-2)", cursor: "pointer",
          transition: "color 160ms",
        }}
           onMouseEnter={(e)=>e.currentTarget.style.color="var(--fg-1)"}
           onMouseLeave={(e)=>e.currentTarget.style.color="var(--fg-2)"}>{l}</a>
      ))}
    </div>
  );
  return (
    <footer id="footer" style={{
      marginTop: 140, paddingTop: 64, paddingBottom: 56,
      borderTop: "1px solid var(--border-1)",
      position: "relative",
    }}>
      {/* faint orbital backdrop */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background:
          "radial-gradient(ellipse 900px 300px at 50% 0%, rgba(138,63,252,0.10), transparent 70%)",
      }}/>

      <div className="ps-section" style={{ position: "relative" }}>
        <div className="ps-footer-grid" style={{
          display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr",
          gap: 40, alignItems: "start",
        }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>
              <img src="assets/playseer-wordmark-transparent.png"
                   style={{ height: 28, width: "auto", objectFit: "contain",
                            filter: "drop-shadow(0 0 14px rgba(138,63,252,0.45))" }} />
            </div>
            <p style={{
              margin: 0, color: "var(--fg-2)", fontSize: 13,
              maxWidth: 300, lineHeight: 1.6,
            }}>
              Playseer Labs builds immersive experiences and tools for
              the future of play and exploration.
            </p>

            {/* Wordmark brand seal */}
            <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{
                width: 24, height: 1, background: "var(--ps-gradient)",
              }}/>
              <span style={{
                fontFamily: "var(--font-mono)", fontSize: 10,
                letterSpacing: "0.18em", color: "var(--fg-3)",
              }}>LABS · MMXXVI</span>
              <span style={{
                width: 24, height: 1, background: "var(--ps-gradient)",
              }}/>
            </div>
          </div>
          {col("Product", ["Playseer", "Studio", "Worlds", "Roadmap", "Changelog"])}
          {col("Company", ["About", "Careers", "Press", "Brand", "Contact"])}
          {col("Resources", ["Docs", "API", "Community", "Status", "Privacy"])}
        </div>

        <hr style={{
          margin: "48px 0 24px", border: 0, height: 1,
          background: "linear-gradient(90deg, transparent, var(--border-1) 12%, var(--border-1) 88%, transparent)",
        }}/>

        <div style={{
          display: "flex", justifyContent: "space-between", flexWrap: "wrap",
          gap: 16, alignItems: "center",
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.16em", color: "var(--fg-3)",
        }}>
          <span>© MMXXVI · PLAYSEER LABS · ALL RIGHTS REWOVEN</span>
          <span>SITE VERSION {VERSION} · TABLETOP UNTETHERED</span>
        </div>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;