// Navbar + mobile menu (dark theme)

const NAV_LINKS = [
  { label: "Beranda", to: "/" },
  { label: "Program", to: "/program" },
  { label: "Bentuk Kerja Sama", to: "/partnership" },
  { label: "GH Gambit Stats App", to: "/app" },
  { label: "Pelatih", to: "/coaches" },
  { label: "Prestasi", to: "/history" },
  { label: "Kerja Sama", to: "/contact" },
  { label: "Kontak", to: "/contact" },
];

function NavLogo() {
  return (
    <a className="nav-logo nav-logo-wrap" href="#/" style={{ display: "inline-flex", alignItems: "center", gap: 14, color: "inherit", textDecoration: "none" }}>
      <img src="src/assets/logoputih.png" alt="GH Gambit Logo" style={{ width: 48, height: 48, objectFit: "contain" }} />
      <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.1, gap: 2 }}>
        <span style={{ fontFamily: "var(--display)", fontSize: 22, letterSpacing: "0.04em", color: "var(--cream)" }}>GH GAMBIT</span>
        <span style={{ fontSize: 9, letterSpacing: "0.32em", color: "rgba(244,240,229,0.66)", fontWeight: 600, fontFamily: "var(--sans)" }}>BASKETBALL CLUB</span>
      </span>
    </a>
  );
}

function Navbar({ route }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => { setOpen(false); }, [route]);

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
  }, [open]);

  const isActive = (to) => {
    if (to === "/") return route === "/" || route === "";
    return route.startsWith(to);
  };

  return (
    <>
      <nav className={`nav nav-dark ${scrolled ? "scrolled" : ""}`}>
        <div className="nav-inner">
          <NavLogo />

          <div className="nav-links">
            {NAV_LINKS.map((l, idx) => (
              <a key={idx} href={`#${l.to}`} className={`nav-link ${isActive(l.to) ? "active" : ""}`}>
                {l.label}
              </a>
            ))}
          </div>

          <a className="btn btn-cta nav-cta" href="#/partnership">
            <span>Ajukan Kerja Sama</span>
            <span className="arrow" aria-hidden="true">→</span>
          </a>

          <button className="nav-burger" onClick={() => setOpen(true)} aria-label="Open menu">
            <svg width="16" height="14" viewBox="0 0 16 14" stroke="currentColor" strokeWidth="1.4">
              <line x1="0" y1="2" x2="16" y2="2" />
              <line x1="0" y1="7" x2="16" y2="7" />
              <line x1="0" y1="12" x2="16" y2="12" />
            </svg>
          </button>
        </div>
      </nav>

      <div className={`mobile-menu mobile-menu-dark ${open ? "open" : ""}`}>
        <div className="mobile-menu-inner">
          <div className="mobile-menu-top">
            <NavLogo />
            <button onClick={() => setOpen(false)} aria-label="Close menu" style={{ background: "transparent", border: "1px solid rgba(244,240,229,0.22)", color: "var(--cream)", width: 36, height: 36, borderRadius: 10 }}>
              <svg width="14" height="14" viewBox="0 0 14 14" stroke="currentColor" strokeWidth="1.4">
                <line x1="1" y1="1" x2="13" y2="13" />
                <line x1="13" y1="1" x2="1" y2="13" />
              </svg>
            </button>
          </div>
          <div className="mobile-menu-links">
            {NAV_LINKS.map((l, i) => (
              <a key={i} href={`#${l.to}`} className="mobile-menu-link" onClick={() => setOpen(false)}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", color: "var(--teal)", marginRight: 14 }}>0{i + 1}</span>
                {l.label}
              </a>
            ))}
          </div>
          <div className="mobile-menu-footer">
            <p className="small" style={{ color: "rgba(244,240,229,0.7)", margin: "0 0 12px 0" }}>Hubungi Tim</p>
            <a className="btn btn-teal" href="https://wa.me/6281398699869" target="_blank" rel="noreferrer">
              <span>WhatsApp 0813 9869 9869</span>
              <span className="arrow" aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </>
  );
}

window.Navbar = Navbar;