/* global React */
function Nav({ view, setView }) {
  const [open, setOpen] = React.useState(false);

  const links = [
    { id: 'home', label: 'home', path: '/' },
    { id: 'manifesto', label: 'manifesto', path: '/manifesto' },
    { id: 'principles', label: 'principles', path: '/principles' },
    { id: 'work', label: 'work', path: '/work' },
    { id: 'contact', label: 'contact', path: '/contact' },
  ];

  const go = (e, id) => {
    // Allow open-in-new-tab (cmd/ctrl/middle-click) to behave like a real link.
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
    e.preventDefault();
    setView(id);
    setOpen(false);
  };

  // Close on ESC and lock body scroll while the overlay is open.
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open]);

  return (
    <nav className="cs-nav">
      <div className="container cs-nav-inner">
        <a className="cs-brand" onClick={(e) => go(e, 'home')} href="/">
          <img className="cs-brand-mark" src="assets/mark.svg" alt="" />
          <span className="cs-brand-word">conspand</span>
        </a>

        {/* Desktop links — hidden on mobile via CSS */}
        <div className="cs-nav-links">
          {links.map((l) => (
            <a
              key={l.id}
              href={l.path}
              className={'cs-nav-link' + (view === l.id ? ' is-active' : '')}
              onClick={(e) => go(e, l.id)}
            >
              {l.label}
            </a>
          ))}
          <a className="btn" href="/contact" onClick={(e) => go(e, 'contact')}>join the cycle</a>
        </div>

        {/* Mobile toggle — revealed below ~720px */}
        <button
          type="button"
          className={'cs-nav-toggle' + (open ? ' is-open' : '')}
          aria-label={open ? 'Close menu' : 'Open menu'}
          aria-expanded={open}
          aria-controls="cs-nav-overlay"
          onClick={() => setOpen(!open)}
        >
          <span></span>
          <span></span>
        </button>
      </div>

      {/* Mobile overlay */}
      {open && (
        <div id="cs-nav-overlay" className="cs-nav-overlay" role="dialog" aria-modal="true">
          <div className="cs-nav-overlay-inner">
            {links.map((l) => (
              <a
                key={l.id}
                href={l.path}
                className={'cs-nav-overlay-link' + (view === l.id ? ' is-active' : '')}
                onClick={(e) => go(e, l.id)}
              >
                {l.label}
              </a>
            ))}
            <a
              className="btn cs-nav-overlay-cta"
              href="/contact"
              onClick={(e) => go(e, 'contact')}
            >
              join the cycle
            </a>
          </div>
        </div>
      )}
    </nav>
  );
}

window.Nav = Nav;