// Top navigation — sticky hot-pink bar that turns translucent on scroll
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

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

  return (
    <nav className={`mm-nav ${scrolled ? "mm-nav--scrolled" : ""}`} aria-label="Primary">
      <div className="container mm-nav__inner">
        <a href="#top" className="mm-nav__logo" aria-label="Mahjong Matchmaker home">
          <img src="assets/MM_AppIcon_180.png" alt="" />
          <span className="mm-nav__wordmark">Mahjong Matchmaker</span>
        </a>
        <div className="mm-nav__links" role="menubar">
          <a href="#how-it-works">How it works</a>
          <a href="#features">What's inside</a>
          <a href="#founding">Beta rewards</a>
          <a href="#partner">Partner with us</a>
        </div>
        <div className="mm-nav__cta">
          <a href="#founding" className="btn btn--primary btn--sm">Join the beta</a>
          <button className="mm-nav__toggle" aria-label="Menu" onClick={() => setMobileOpen(o => !o)}>
            {mobileOpen ? <IconClose size={22} /> : <IconMenu size={22} />}
          </button>
        </div>
      </div>
      {mobileOpen && (
        <div style={{
          padding: "16px 20px 20px", borderTop: "1px solid rgba(255,255,255,0.15)",
          display: "grid", gap: 14, fontFamily: "var(--mm-font-sans)", fontSize: 15
        }}>
          {[
            ["How it works", "#how-it-works"],
            ["What's inside", "#features"],
            ["Beta rewards", "#founding"],
            ["Partner with us", "#partner"],
            ["Join the beta", "#join"]
          ].map(([l, h]) => (
            <a key={h} href={h} style={{ color: "#fff", textDecoration: "none" }} onClick={() => setMobileOpen(false)}>{l}</a>
          ))}
        </div>
      )}
    </nav>
  );
};

Object.assign(window, { Nav });