/* global React */
// Top navigation — sparse, wordmark left, a few links right.
// Mobile: hamburger → full-screen overlay menu.
function Nav({ home = '' }) {
  const [open, setOpen] = React.useState(false);

  const links = [
    { label: 'What we offer', href: home + '#what-we-build' },
  ];

  // Close menu on link click (anchor navigation)
  function handleLinkClick() {
    setOpen(false);
  }

  // Lock body scroll when menu is open
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <React.Fragment>
      <header className="site-nav">
        <div className="page">
          <div className="site-nav__row">
            <a href={home || '#top'} className="site-nav__brand" aria-label="Holdpoint home">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 90" height="42" aria-hidden="true">
                <g transform="translate(6,5) scale(0.72)">
                  <g fill="none" stroke="#141414" strokeWidth="2.361" strokeLinecap="round">
                    <line x1="50" y1="15" x2="81" y2="33" />
                    <line x1="81" y1="33" x2="81" y2="67" strokeDasharray="3 3.5" />
                    <line x1="81" y1="67" x2="50" y2="85" />
                    <line x1="50" y1="85" x2="19" y2="67" strokeDasharray="3 3.5" />
                    <line x1="19" y1="67" x2="19" y2="33" />
                    <line x1="19" y1="33" x2="50" y2="15" strokeDasharray="3 3.5" />
                    <line x1="50" y1="15" x2="50" y2="50" strokeDasharray="3 3.5" />
                    <line x1="81" y1="33" x2="50" y2="50" />
                    <line x1="81" y1="67" x2="50" y2="50" strokeDasharray="3 3.5" />
                    <line x1="50" y1="85" x2="50" y2="50" />
                    <line x1="19" y1="67" x2="50" y2="50" strokeDasharray="3 3.5" />
                    <line x1="19" y1="33" x2="50" y2="50" />
                  </g>
                  <circle cx="50" cy="15" r="2.9" fill="#F3F2EE" stroke="#141414" strokeWidth="2.361" />
                  <circle cx="81" cy="33" r="2.5" fill="#141414" />
                  <circle cx="81" cy="67" r="2.9" fill="#F3F2EE" stroke="#141414" strokeWidth="2.361" />
                  <circle cx="50" cy="85" r="2.5" fill="#141414" />
                  <circle cx="19" cy="67" r="2.9" fill="#F3F2EE" stroke="#141414" strokeWidth="2.361" />
                  <circle cx="19" cy="33" r="2.5" fill="#141414" />
                  <circle cx="50" cy="50" r="5" fill="#141414" />
                </g>
                <text x="82" y="55" fontFamily="'Space Grotesk', sans-serif" fontWeight="600" fontSize="36" letterSpacing="-0.65" fill="#141414">Holdpoint</text>
              </svg>
            </a>

            {/* Desktop links */}
            <nav className="site-nav__links">
              {links.map((l) => (
                <a key={l.href} href={l.href} className="site-nav__link">{l.label}</a>
              ))}
              <a href="/contact" className="site-nav__cta">Request access</a>
            </nav>

            {/* Mobile hamburger button */}
            <button
              className="site-nav__burger"
              onClick={() => setOpen(!open)}
              aria-label={open ? 'Close menu' : 'Open menu'}
              aria-expanded={open}
            >
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                {open ? (
                  <React.Fragment>
                    <line x1="6" y1="6" x2="18" y2="18" />
                    <line x1="18" y1="6" x2="6" y2="18" />
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <line x1="4" y1="7" x2="20" y2="7" />
                    <line x1="4" y1="17" x2="20" y2="17" />
                  </React.Fragment>
                )}
              </svg>
            </button>
          </div>
        </div>
      </header>

      {/* Mobile overlay — outside header to escape backdrop-filter stacking context */}
      {open && (
        <div className="site-nav__overlay">
          <nav className="site-nav__overlay-links">
            {links.map((l) => (
              <a key={l.href} href={l.href} className="site-nav__overlay-link" onClick={handleLinkClick}>{l.label}</a>
            ))}
            <a href="/contact" className="site-nav__overlay-cta" onClick={handleLinkClick}>Request access</a>
          </nav>
        </div>
      )}
    </React.Fragment>
  );
}

window.Nav = Nav;