// Top navigation + menu overlay
function Nav({ onNavigate, route }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const go = (r) => { setMenuOpen(false); onNavigate(r); window.scrollTo({ top: 0, behavior: 'instant' }); };

  return (
    <>
      <header className={'de-nav ' + (scrolled ? 'is-scrolled' : '')}>
        <button className="de-nav__menu" onClick={() => setMenuOpen(true)} aria-label="Open menu">
          <span></span><span></span>
          <span className="de-nav__menu-label">MENU</span>
        </button>

        <a className="de-nav__logo" onClick={() => go('home')}>
          <span>DIGIT</span><em>estate</em>
        </a>

        <nav className="de-nav__links">
          <a className={route === 'about' ? 'is-active' : ''} onClick={() => go('about')}>About</a>
          <a className={route === 'portfolio' ? 'is-active' : ''} onClick={() => go('portfolio')}>Portfolio</a>
          <a className={route === 'contact' ? 'is-active' : ''} onClick={() => go('contact')}>Contact</a>
        </nav>
      </header>

      <div className={'de-menu ' + (menuOpen ? 'is-open' : '')}>
        <button className="de-menu__close" onClick={() => setMenuOpen(false)} aria-label="Close menu">
          <Icon name="close" size={20} />
        </button>
        <div className="de-menu__inner">
          <div className="de-menu__visual">
            <img src="assets/imagery/marble-brass-texture.png" alt="" />
            <div className="de-menu__mark">DE</div>
          </div>
          <div className="de-menu__lists">
            <div className="de-eyebrow" style={{marginBottom: 28}}>Menu</div>
            <ul className="de-menu__primary">
              <li><a onClick={() => go('home')}>Home</a></li>
              <li><a onClick={() => go('about')}>About</a></li>
              <li><a onClick={() => go('portfolio')}>Portfolio</a></li>
              <li><a onClick={() => go('contact')}>Contact</a></li>
              <li><a onClick={() => go('home')}>Atelier</a></li>
              <li><a onClick={() => go('home')}>Journal</a></li>
            </ul>
            <div style={{display:'flex', gap: 56, marginTop: 64, flexWrap: 'wrap'}}>
              <div>
                <div className="de-eyebrow" style={{marginBottom: 14}}>Contact</div>
                <p className="de-menu__meta">info@digit.estate<br/>+971 02 — 44 88 991</p>
              </div>
              <div>
                <div className="de-eyebrow" style={{marginBottom: 14}}>Social</div>
                <div style={{display:'flex', gap: 16}}>
                  <a className="de-menu__social"><Icon name="instagram"/></a>
                  <a className="de-menu__social"><Icon name="linkedin"/></a>
                  <a className="de-menu__social"><Icon name="facebook"/></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.Nav = Nav;