/* Nav.jsx — single morphing nav + full-screen mobile menu */
function Nav({ active = 'hero', scrollerRef, onNav }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const target = scrollerRef?.current || window;
    const getY = () => target === window ? window.scrollY : target.scrollTop;
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        setScrolled(getY() > 80);
      });
    };
    target.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => target.removeEventListener('scroll', onScroll);
  }, [scrollerRef]);

  const links = [
    { id: 'work',    label: 'Case studies' },
    { id: 'meai',    label: 'Me & AI' },
    { id: 'about',   label: 'About me' },
    { id: 'contact', label: 'Get in touch' },
  ];

  const handleNav = (id) => {
    setMenuOpen(false);
    onNav?.(id);
  };

  return (
    <>
      <header className={`nav-wrap ${scrolled ? 'is-scrolled' : 'is-top'} ${menuOpen ? 'menu-is-open' : ''}`}>
        <div className="nav" style={{ borderStyle: "none", borderWidth: "0px", gap: "49px", borderRadius: "8px" }}>
          <a className="brand" onClick={() => handleNav('hero')} style={{ gap: "15px" }}>
            <img className="brand-mark" src="assets/Logo.svg" alt="Zuzana Hrušovská" />
            <span className="brand-name">Zuzana Hrušovská</span>
          </a>

          {/* Desktop nav links */}
          <nav className="nav-links" style={{ gap: "24px" }}>
            {links.map((l) =>
              <a key={l.id}
                 className={l.id === active ? 'active' : ''}
                 onClick={() => handleNav(l.id)}>
                {l.label}
              </a>
            )}
          </nav>

          {/* Hamburger — mobile only, stays above overlay */}
          <button type="button"
            className={`nav-hamburger ${menuOpen ? 'is-open' : ''}`}
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Toggle menu">
            <span className="hb-top" />
            <span className="hb-bot" />
          </button>
        </div>
      </header>

      {/* Full-screen mobile overlay */}
      <div className={`nav-overlay ${menuOpen ? 'is-open' : ''}`}>
        <nav className="nav-overlay-links">
          {links.map((l, i) =>
            <a key={l.id}
               onClick={() => handleNav(l.id)}
               style={{
                 opacity:    menuOpen ? 1 : 0,
                 transform:  menuOpen ? 'translateY(0)' : 'translateY(8px)',
                 transition: `opacity 240ms cubic-bezier(0.2,0,0,1) ${menuOpen ? 120 + i * 60 : 0}ms,
                              transform 240ms cubic-bezier(0.2,0,0,1) ${menuOpen ? 120 + i * 60 : 0}ms`,
               }}>
              <span className="nav-overlay-num">0{i + 1}</span>
              <span className="nav-overlay-label">{l.label}</span>
            </a>
          )}
        </nav>

        <div className="nav-overlay-footer">
          Available from <strong>September 1st</strong><br />
          Based in Prague, working <strong>remotely</strong>
        </div>
      </div>
    </>
  );
}
window.Nav = Nav;