function NavLink({ label, active, onClick, mobile = false }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        border: 'none', background: 'none', cursor: 'pointer',
        padding: mobile ? '18px 4px' : '4px 0',
        width: mobile ? '100%' : undefined,
        textAlign: mobile ? 'left' : undefined,
        fontFamily: 'var(--font-primary)', fontSize: '11px',
        fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: (active || hovered) ? 'var(--color-terracota)' : 'var(--color-text)',
        borderBottom: active ? '1px solid var(--color-terracota)' : '1px solid transparent',
        transition: 'color 150ms ease, border-color 150ms ease',
      }}
    >
      {label}
    </button>
  );
}

function Nav({ activeSection, onNavigate }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  React.useEffect(() => {
    if (!menuOpen) return;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      document.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  const go = (section) => { onNavigate(section); setMenuOpen(false); };

  const links = [
    { label: 'Carta', section: 'carta' },
    { label: 'Historia', section: 'nosotros' },
    { label: 'Espacio', section: 'espacio' },
    { label: 'Contacto', section: 'contacto' },
  ];

  return (
    <nav className="calmaeta-nav" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      height: '72px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: scrolled ? 'rgba(248,247,242,0.95)' : 'transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--color-border)' : '1px solid transparent',
      transition: 'background 300ms ease, border-color 300ms ease',
    }}>
      <button onClick={() => go('home')} style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 0 }}>
        <img src="assets/logos/logo-principal.svg" style={{ height: 'clamp(48px, 9vw, 68px)', width: 'auto' }} alt="Calmaeta" />
      </button>

      <div className="calmaeta-nav-links">
        {links.map(({ label, section }) => (
          <NavLink key={section} label={label} active={activeSection === section} onClick={() => go(section)} />
        ))}
      </div>

      <button
        className={menuOpen ? 'calmaeta-nav-toggle calmaeta-nav-toggle-open' : 'calmaeta-nav-toggle'}
        onClick={() => setMenuOpen((o) => !o)}
        aria-expanded={menuOpen}
        aria-controls="calmaeta-mobile-menu"
        aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'}
      >
        <span /><span /><span />
      </button>

      {menuOpen && (
        <React.Fragment>
          <div className="calmaeta-nav-backdrop" onClick={() => setMenuOpen(false)} />
          <div id="calmaeta-mobile-menu" className="calmaeta-nav-mobile-menu">
            {links.map(({ label, section }) => (
              <NavLink key={section} label={label} active={activeSection === section} onClick={() => go(section)} mobile={true} />
            ))}
          </div>
        </React.Fragment>
      )}
    </nav>
  );
}

Object.assign(window, { Nav });