// ============================================
// Navigation
// ============================================

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const PC = window.PC;

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: "#services", label: "Services" },
    { href: "#work",     label: "Work" },
    { href: "#process",  label: "Process" },
    { href: "#tools",    label: "Tools" },
    { href: "#pricing",  label: "Pricing" },
  ];

  return (
    <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`} aria-label="Primary">
      <div className="wrap nav__inner">
        <a href="#top" className="nav__brand" aria-label="PolyCraft Visuals home">
          <img src="assets/polycraft-mark.png" alt="" className="nav__mark"/>
          <span className="serif nav__name">Poly<span className="gold-text it">Craft</span> Visuals</span>
        </a>

        <div className={`nav__links ${open ? 'is-open' : ''}`}>
          {links.map((l, i) => (
            <a key={l.href} href={l.href}
               className="nav__link"
               onClick={() => setOpen(false)}
               style={{ '--i': i }}>
              <span className="nav__num">{String(i+1).padStart(2, '0')}</span>
              <span>{l.label}</span>
            </a>
          ))}
        </div>

        <div className="nav__right">
          <a href="#contact" className="btn btn--ghost nav__cta">
            <span>Start a Project</span>
            <span className="btn__arrow"></span>
          </a>
          <button className={`nav__burger ${open ? 'is-open' : ''}`} onClick={() => setOpen(!open)} aria-label="Menu">
            <span></span><span></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;