// Header.jsx — sticky top nav, always frosted glass with dark text.
const Header = ({ active = "process", onNav }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const items = [
    { id: "process", label: "Process", href: "process.html" },
    { id: "case", label: "Case study", href: "case-study.html" },
    { id: "perspective", label: "Perspective", href: "perspective.html" },
    { id: "contact", label: "Contact", href: "contact.html" },
  ];

  const closeMenu = () => setMenuOpen(false);

  return (
    <header className="header">
      <div className="shell">
        <div className="header__inner">
          <a
            className="header__logo"
            href="#top"
            onClick={(e) => {
              e.preventDefault();
              closeMenu();
              onNav && onNav("top");
            }}
          >
            <img
              src="./assets/logos/emsley-logo.svg"
              alt="Emsley"
            />
          </a>

          {/* Desktop nav — hidden on mobile via CSS */}
          <nav className="header__nav">
            {items.map((it) => (
              <a
                key={it.id}
                className={
                  "header__link" +
                  (active === it.id ? " header__link--active" : "")
                }
                onClick={
                  it.href
                    ? undefined
                    : (e) => {
                        e.preventDefault();
                        onNav && onNav(it.id);
                      }
                }
                href={it.href || "#" + it.id}
              >
                {it.label}
              </a>
            ))}
            <button className="header__cta" onClick={() => window.openContactModal && window.openContactModal()}>
              Send us a note
            </button>
          </nav>

          {/* Hamburger — visible on mobile only */}
          <button
            className={"header__hamburger" + (menuOpen ? " is-open" : "")}
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      {/* Mobile menu — rendered below the header bar */}
      {menuOpen && (
        <div className="header__mobile-menu">
          <div className="shell">
            {items.map((it) => (
              <a
                key={it.id}
                className="header__mobile-link"
                href={it.href || "#" + it.id}
                onClick={closeMenu}
              >
                {it.label}
              </a>
            ))}
            <button
              className="header__cta header__mobile-cta"
              onClick={() => {
                closeMenu();
                window.openContactModal && window.openContactModal();
              }}
            >
              Send us a note
            </button>
          </div>
        </div>
      )}
    </header>
  );
};

window.Header = Header;