// Navbar — fixed, blurred, darkens (shadow) on scroll.
function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    const stage = document.querySelector('.kit-scroll');
    const target = stage || window;
    const handler = () => setScrolled((stage ? stage.scrollTop : window.scrollY) > 40);
    target.addEventListener('scroll', handler);
    return () => target.removeEventListener('scroll', handler);
  }, []);

  const links = [['#about','Sobre mí'],['#ritmos','Ritmos'],['#clases','Clases']];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: 'rgba(253,250,248,0.92)', backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--blush)', padding: '0 3rem',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      height: 'var(--nav-height)',
      boxShadow: scrolled ? 'var(--shadow-sm)' : 'none',
      transition: 'box-shadow var(--dur-base) var(--ease-soft)',
    }}>
      <a href="#hero" style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', textDecoration: 'none' }}>
        <img src="assets/logo-emblem.png?v=2" alt="" style={{ height: '40px', width: 'auto' }} />
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: '1.5rem', fontWeight: 600, letterSpacing: '0.22em',
          background: 'var(--grad-gold-text)', WebkitBackgroundClip: 'text', backgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
        }}>LUMERA</span>
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: '2.5rem' }}>
        <ul style={{ display: 'flex', gap: '2.5rem', listStyle: 'none', margin: 0, padding: 0 }}>
          {links.map(([h, t]) => (
            <li key={h}><a href={h} style={{
              fontFamily: 'var(--font-label)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--ls-nav)',
              textTransform: 'uppercase', color: 'var(--taupe)', textDecoration: 'none',
            }}>{t}</a></li>
          ))}
        </ul>
        <Button href="#contacto" size="sm">Reservar clase</Button>
      </div>
    </nav>
  );
}
window.Navbar = Navbar;