// Nav.jsx
const { useState: useStateNav, useEffect: useEffectNav } = React;
function Nav() {
  const [scrolled, setScrolled] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['#galeria','Resultados'],['#servicos','Serviços'],['#sobre','Sobre'],['#faq','Dúvidas']];
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="wrap nav-inner">
        <a href="#top" className="nav-logo" aria-label="Bronze Terê"><img src="assets/logo.png" alt="Bronze Terê" /></a>
        <div className="nav-links">{links.map(([h,l]) => (<a key={h} href={h}>{l}</a>))}</div>
        <div className="nav-cta"><WaButton variant="wa"><span className="long">Agendar pelo&nbsp;</span>WhatsApp</WaButton></div>
      </div>
    </nav>
  );
}
Object.assign(window, { Nav });