// Nav.jsx — sticky, transforms on scroll past hero
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [drawerOpen, setDrawerOpen] = React.useState(false);

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

  const links = [
    { href: '#proceso', label: 'Proceso' },
    { href: '#planes', label: 'Planes' },
    { href: '#testimonios', label: 'Testimonios' },
    { href: '#faq', label: 'FAQ' },
    { href: '#contacto', label: 'Contacto' },
  ];

  const cls = ['nav', 'nav--hero-light', scrolled && 'nav--scrolled'].filter(Boolean).join(' ');

  return (
    <>
      <nav className={cls}>
        <div className="nav__inner">
          <a href="#top" className="nav__brand" aria-label="Daniela Cabrera Marketing">
            <span className="nav__brand-wordmark">
              Daniela<em>Cabrera</em>
            </span>
            <span className="nav__brand-sub">Marketing para Doctores</span>
          </a>
          <div className="nav__links">
            {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          </div>
          <Button variant={scrolled ? 'primary' : 'white'} size="sm" href="#contacto" className="nav__cta">
            Reservar diagnóstico
          </Button>
          <button className="nav__menu-btn" aria-label="Menú" onClick={() => setDrawerOpen(true)}>
            <Icon name="menu" size={18} />
          </button>
        </div>
      </nav>

      <div className={'drawer ' + (drawerOpen ? 'open' : '')}>
        <button className="drawer__close" aria-label="Cerrar" onClick={() => setDrawerOpen(false)}>
          <Icon name="x" size={22} />
        </button>
        {links.map(l => (
          <a key={l.href} href={l.href} onClick={() => setDrawerOpen(false)}>{l.label}</a>
        ))}
      </div>
    </>
  );
}

window.Nav = Nav;