// Nav — frosted top bar with anchor links + mobile hamburger

const Nav = ({ active, onNavigate }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const links = [
    { id: "work",     label: "Work" },
    { id: "about",    label: "About" },
    { id: "services", label: "Services" },
    { id: "contact",  label: "Contact" },
  ];

  const handleNav = (id) => {
    setMenuOpen(false);
    onNavigate(id);
  };

  // Close menu on outside click
  React.useEffect(() => {
    if (!menuOpen) return;
    const close = (e) => {
      if (!e.target.closest(".mr-nav")) setMenuOpen(false);
    };
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, [menuOpen]);

  return (
    <nav className="mr-nav" data-comment-anchor="nav">
      <div className="mr-nav-inner">
        {/* Logo */}
        <a
          className="mr-nav-logo"
          href="#top"
          onClick={(e) => { e.preventDefault(); handleNav("top"); }}
        >
          <img src="assets/logo-mateo-romero.png" alt="Mateo Romero Studio" />
        </a>

        {/* Desktop links */}
        <div className="mr-nav-links">
          {links.map(l => (
            <a
              key={l.id}
              className={"mr-nav-link" + (active === l.id ? " is-current" : "")}
              href={`#${l.id}`}
              onClick={(e) => { e.preventDefault(); handleNav(l.id); }}
            >
              {l.label}
            </a>
          ))}
        </div>

        {/* Mobile hamburger */}
        <button
          className={"mr-nav-burger" + (menuOpen ? " is-open" : "")}
          aria-label={menuOpen ? "Close menu" : "Open menu"}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(o => !o)}
        >
          <span /><span /><span />
        </button>
      </div>

      {/* Mobile dropdown */}
      {menuOpen && (
        <div className="mr-nav-mobile">
          {links.map(l => (
            <a
              key={l.id}
              className={"mr-nav-mobile-link" + (active === l.id ? " is-current" : "")}
              href={`#${l.id}`}
              onClick={(e) => { e.preventDefault(); handleNav(l.id); }}
            >
              {l.label}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
};

Object.assign(window, { Nav });