function Footer() {
  return (
    <footer className="surface-dark" style={{ borderTop: "1px solid var(--line)", paddingTop: 100, paddingBottom: 40, position: "relative", overflow: "hidden" }}>
      <div className="court-lines" aria-hidden="true"></div>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 48, marginBottom: 64 }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
              <img src="src/assets/logoputih.png" alt="GH Gambit Logo" style={{ width: 44, height: 44, objectFit: "contain" }} />
              <span className="display" style={{ fontSize: 24, letterSpacing: "0.02em" }}>GH Gambit Basketball Club</span>
            </div>
            <p style={{ maxWidth: 360, color: "var(--fg-muted)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>
              Dibangun untuk pengembangan pemain, kerja sama sekolah, dan pertumbuhan basket kompetitif.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 10 }}>
              <a href="https://www.instagram.com/ghgambit.basketball/" target="_blank" rel="noreferrer" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", padding: "8px 12px", border: "1px solid var(--line-strong)", color: "var(--fg-muted)" }}>
                Instagram
              </a>
              <a href="https://wa.me/6281398699869" target="_blank" rel="noreferrer" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", padding: "8px 12px", border: "1px solid var(--line-strong)", color: "var(--fg-muted)" }}>
                WhatsApp
              </a>
              <a href="#" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", padding: "8px 12px", border: "1px solid var(--line-strong)", color: "var(--fg-muted)" }}>
                Website
              </a>
            </div>
          </div>

          <div>
            <p className="small" style={{ color: "var(--teal)", margin: "0 0 18px 0" }}>Navigasi</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
                { l: "Program", to: "/program" },
                { l: "Pelatih", to: "/coaches" },
                { l: "Prestasi", to: "/history" },
                { l: "Kerja Sama", to: "/partnership" },
                { l: "Kontak", to: "/contact" },
              ].map((l) => (
                <li key={l.to}><a href={`#${l.to}`} style={{ color: "var(--fg)", opacity: 0.78, fontSize: 14 }}>{l.l}</a></li>
              ))}
            </ul>
          </div>

          <div>
            <p className="small" style={{ color: "var(--teal)", margin: "0 0 18px 0" }}>Kontak</p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              <li>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.20em", color: "var(--fg-muted)", display: "block", marginBottom: 4 }}>WHATSAPP</span>
                <a href="https://wa.me/6281398699869" target="_blank" rel="noreferrer" style={{ color: "var(--fg)", fontSize: 15 }}>0813 9869 9869</a>
              </li>
              <li>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.20em", color: "var(--fg-muted)", display: "block", marginBottom: 4 }}>EMAIL</span>
                <a href="mailto:ghgambit.basketball@gmail.com" style={{ color: "var(--fg)", fontSize: 15 }}>ghgambit.basketball@gmail.com</a>
              </li>
            </ul>
          </div>

          <div>
            <p className="small" style={{ color: "var(--teal)", margin: "0 0 18px 0" }}>Markas Pusat</p>
            <p style={{ margin: 0, fontSize: 14, color: "var(--fg)", lineHeight: 1.6 }}>
              <strong style={{ color: "var(--burgundy)" }}>Gelora Hady Depok</strong><br />
              Tempat Latihan Pemain Klub<br />
              Kota Depok, Jawa Barat
            </p>
            <a 
              href="https://maps.app.goo.gl/ZCxHBaHVf2J2UoU27" 
              target="_blank" 
              rel="noreferrer"
              style={{ display: "inline-block", marginTop: 12, color: "var(--teal)", fontSize: 11, fontWeight: 700, borderBottom: "1px solid var(--teal)", textTransform: "uppercase", letterSpacing: "0.1em" }}
            >
              Google Maps ↗
            </a>
          </div>
        </div>

        <div style={{ borderTop: "1px solid var(--line)", paddingTop: 28, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <p className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-muted)", margin: 0 }}>
            © GH GAMBIT BASKETBALL CLUB · MMXXVI
          </p>
          <p className="mono" style={{ fontSize: 11, letterSpacing: "0.22em", color: "var(--fg-muted)", margin: 0 }}>
            BUILT FOR SCHOOLS · BUILT FOR PLAYERS
          </p>
        </div>

        {/* Huge brand wordmark */}
        <div style={{ marginTop: 60, overflow: "hidden", borderTop: "1px solid var(--line)", paddingTop: 32 }}>
          <p className="display" style={{ fontSize: "clamp(80px, 16vw, 220px)", margin: 0, color: "transparent", WebkitTextStroke: "1px rgba(244,240,229,0.12)", whiteSpace: "nowrap", textAlign: "center", letterSpacing: "0.02em", lineHeight: 1 }}>
            GH · GAMBIT · SCHOOL · DEVELOPMENT
          </p>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          footer .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 600px) {
          footer .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;