// Nav.jsx
const { useState: useNavState, useEffect: useNavEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useNavState(false);

  useNavEffect(() => {
    const fn = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  const links = [
    ['metodo', 'Método'],
    ['resultados', 'Resultados'],
    ['servicos', 'Serviços'],
    ['faq', 'FAQ'],
  ];

  return (
    <nav className={`nav-wrap${scrolled ? ' scrolled' : ''}`}>
      <div className="container nav-inner">
        <div className="nav-logo">
          <img src={(window.__resources && window.__resources['logoImg']) || 'assets/logo.png'} alt="Conectadas Fitness" style={{ height: 60, width: 'auto', display: 'block' }} />
        </div>
        <div className="nav-links">
          {links.map(([id, label]) => (
            <a key={id} href={`#${id}`} onClick={e => { e.preventDefault(); scrollTo(id); }}>
              {label}
            </a>
          ))}
        </div>
        <button className="btn-p" style={{ fontSize: 13, padding: '10px 22px' }}
          onClick={() => scrollTo('cta')}>
          Quero me destravar →
        </button>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });