// Nav.jsx — sticky, translucent on scroll, color-aware
const { useEffect: useEffectN, useState: useStateN } = React;

function Nav() {
  const scrolled = useScrolled(30);
  const onDark = useActiveSection();

  const go = (e, id) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
    }
  };

  return (
    <header className={`nav ${scrolled ? 'is-scrolled' : ''} ${onDark ? 'on-dark' : ''}`}>
      <div className="container-xl nav__inner">
        <a href="#top" className="nav__brand" onClick={(e) => go(e, 'top')}>
          <OrbitMark size={32} color={onDark ? 'var(--oz-purple-300)' : 'var(--oz-purple-500)'} animated />
          <span>Ozworks</span>
        </a>
        <nav className="nav__links">
          <a className="nav__link" href="#services" onClick={(e) => go(e, 'services')}>Services</a>
          <a className="nav__link" href="#process" onClick={(e) => go(e, 'process')}>How we work</a>
          <a className="nav__link" href="#about" onClick={(e) => go(e, 'about')}>About</a>
          <a className="nav__link" href="#contact" onClick={(e) => go(e, 'contact')}>Contact</a>
        </nav>
        <a className="nav__cta" href="#contact" onClick={(e) => go(e, 'contact')}>Book a chat</a>
      </div>
    </header>
  );
}

window.Nav = Nav;