// Navbar.jsx
function Navbar({ onNav, hasGallery = true }) {
  const links = ['Servicios', 'Metodología', ...(hasGallery ? ['Galería'] : [])];
  const [hover, setHover] = React.useState(null);
  return (
    <nav style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
      height: 160, display: 'flex', alignItems: 'center',
      justifyContent: 'space-between', padding: '0 160px',
    }}>
      <img src="assets/logo-alfabeth.png" alt="AlfaBeth"
        style={{ height: 64, cursor: 'pointer' }}
        onClick={() => onNav && onNav('top')} />
      <div style={{ display: 'flex', gap: 56 }}>
        {links.map(l => (
          <a key={l} className="t-nav"
            onMouseEnter={() => setHover(l)} onMouseLeave={() => setHover(null)}
            onClick={() => onNav && onNav(l)}
            style={{
              color: hover === l ? 'var(--peach)' : 'var(--teal)',
              cursor: 'pointer', transition: 'color .15s ease',
            }}>{l}</a>
        ))}
      </div>
    </nav>
  );
}
window.Navbar = Navbar;