/* ============================================================
   Navbar — sticky, single tier. Org (SGSITS) lockup left /
   page nav center / org socials right. Team identity lives
   inside the Team & Our Legacy pages, not here.
   Mobile: compact bar + full-screen overlay menu.
   ============================================================ */

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

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

  // menu open: lock body scroll, close on Escape / desktop resize
  React.useEffect(() => {
    document.body.classList.toggle("no-scroll", open);
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    const onResize = () => { if (window.innerWidth > 940) setOpen(false); };
    window.addEventListener("keydown", onKey);
    window.addEventListener("resize", onResize);
    return () => {
      document.body.classList.remove("no-scroll");
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("resize", onResize);
    };
  }, [open]);

  const links = [
    { id: "home", label: "Home" },
    { id: "team", label: "Team" },
    { id: "achievements", label: "Our Legacy" },
    { id: "crowdfunding", label: "Sponsors" },
    { id: "about", label: "About" },
    { id: "alumni", label: "Alumni" },
    { id: "contact", label: "Contact" },
  ];

  const navClick = (id) => {
    setOpen(false);
    go(id);
    window.scrollTo({ top: 0 });
  };

  const solid = scrolled || open;

  return (
    <React.Fragment>
    <header style={{
      position: "sticky", top: 0, zIndex: 100,
      background: solid ? "rgba(10,10,10,0.92)" : "rgba(10,10,10,0)",
      backdropFilter: solid ? "blur(12px)" : "none",
      WebkitBackdropFilter: solid ? "blur(12px)" : "none",
      borderBottom: `1px solid ${solid ? "var(--border)" : "transparent"}`,
      transition: "background .25s ease, border-color .25s ease",
    }}>
      <div className="wrap" style={{ height: "var(--nav-h)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <Logo team={ORG} onClick={() => navClick("home")} />

        <nav className="nav-center" style={{ display: "flex", gap: 30 }}>
          {links.map((l) => {
            const active = l.id === page;
            return (
              <button key={l.id} onClick={() => navClick(l.id)}
                className={"nav-link" + (active ? " active" : "")}
                style={{
                  background: "none", border: "none", padding: "6px 0",
                  fontFamily: "var(--f-label)", fontWeight: 600,
                  textTransform: "uppercase", fontSize: 15, letterSpacing: "0.05em",
                  whiteSpace: "nowrap", position: "relative",
                  color: active ? "var(--orange)" : "var(--text)",
                }}>
                {l.label}
                <span className="nav-underline" style={{ position: "absolute", left: 0, right: 0, bottom: -2, height: 2, background: "var(--orange)" }} />
              </button>
            );
          })}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <button className="nav-join" onClick={() => { setOpen(false); setJoinOpen(true); }}
            style={{
              background: "var(--orange)", border: "none", color: "#0a0a0a",
              padding: "9px 20px", fontFamily: "var(--f-label)", fontWeight: 700,
              textTransform: "uppercase", fontSize: 13, letterSpacing: "0.05em",
              whiteSpace: "nowrap", cursor: "pointer",
            }}>
            Join Us
          </button>
          <button className="menu-btn" onClick={() => setOpen((o) => !o)}
            aria-expanded={open} aria-label={open ? "Close menu" : "Open menu"}
            style={{ display: "none", background: "none", border: "none", color: "var(--text)", padding: 10 }}>
            <Icon name={open ? "close" : "menu"} size={24} />
          </button>
        </div>
      </div>

    </header>

      {/* mobile menu — full-screen overlay below the bar.
          Rendered OUTSIDE <header> because header's backdrop-filter
          would otherwise become the containing block for this
          position:fixed element and collapse it. */}
      {open && (
        <div className="mobile-menu" role="dialog" aria-label="Site menu"
          style={{ background: "rgba(8,8,8,0.98)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)" }}>
          <div className="wrap" style={{ display: "flex", flexDirection: "column", minHeight: "100%", paddingTop: 8, paddingBottom: 30 }}>
            <nav style={{ display: "flex", flexDirection: "column" }}>
              {links.map((l, i) => {
                const active = l.id === page;
                return (
                  <button key={l.id} onClick={() => navClick(l.id)} className="head mm-item"
                    style={{
                      background: "none", border: "none", textAlign: "left",
                      padding: "16px 0", fontSize: "clamp(24px, 6.5vw, 30px)", letterSpacing: "0.03em",
                      borderBottom: "1px solid var(--border)",
                      color: active ? "var(--orange)" : "var(--text)", "--i": i,
                    }}>
                    <span className="label mm-idx">0{i + 1}</span>
                    <span>{l.label}</span>
                    <span className="mm-arrow"><Icon name="arrow" size={18} /></span>
                  </button>
                );
              })}
            </nav>

            <div className="mm-item" style={{ "--i": links.length, marginTop: "auto", paddingTop: 30, flexDirection: "column", alignItems: "flex-start", gap: 18, borderBottom: "none" }}>
              <button onClick={() => { setOpen(false); setJoinOpen(true); }}
                style={{
                  background: "var(--orange)", border: "none", color: "#0a0a0a",
                  padding: "14px 0", width: "100%", fontFamily: "var(--f-label)", fontWeight: 700,
                  textTransform: "uppercase", fontSize: 15, letterSpacing: "0.05em", cursor: "pointer",
                }}>
                Join Us
              </button>
              <span className="label" style={{ fontSize: 12, letterSpacing: "0.16em", color: "var(--muted)" }}>Follow SGSITS Teams</span>
              <div style={{ display: "flex", gap: 10 }}>
                {ORG.socials.map((s) => (
                  <a key={s.name} className="mm-social" href={s.href} aria-label={s.label}>
                    <Icon name={s.name} size={19} />
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {joinOpen && (
        <div role="dialog" aria-label="Join us" onClick={() => setJoinOpen(false)}
          style={{ position: "fixed", inset: 0, zIndex: 200, display: "grid", placeItems: "center", padding: 24,
            background: "rgba(6,6,6,0.82)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)" }}>
          <div onClick={(e) => e.stopPropagation()} className="card"
            style={{ position: "relative", maxWidth: 460, width: "100%", textAlign: "center",
              borderTop: "4px solid var(--orange)", padding: "clamp(36px,5vw,56px) clamp(28px,4vw,44px)" }}>
            <button onClick={() => setJoinOpen(false)} aria-label="Close"
              style={{ position: "absolute", top: 14, right: 14, background: "none", border: "none", color: "var(--muted)", padding: 6, cursor: "pointer" }}>
              <Icon name="close" size={22} />
            </button>
            <div className="label" style={{ fontSize: 12, letterSpacing: "0.18em", color: "var(--orange)", marginBottom: 16 }}>Recruitment</div>
            <div className="head" style={{ fontSize: "clamp(38px,7vw,58px)", lineHeight: 0.92 }}>Coming Soon</div>
            <p className="body muted" style={{ fontSize: 15, lineHeight: 1.65, margin: "16px auto 0", maxWidth: 340 }}>
              Applications for the next season aren’t open yet. Follow us to hear the moment they go live.
            </p>
            <div style={{ display: "flex", justifyContent: "center", gap: 10, marginTop: 26 }}>
              {ORG.socials.map((s) => (
                <a key={s.name} className="mm-social" href={s.href} aria-label={s.label}>
                  <Icon name={s.name} size={19} />
                </a>
              ))}
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

Object.assign(window, { Navbar });