function Nav() {
  const scrollTo = (id) => (e) => {
    e.preventDefault();
    if (id === 'top') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: 'smooth' });
    }
    history.replaceState(null, '', '/');
  };

  return (
    <nav className="nav">
      <a href="/" className="nav__brand" aria-label="Cuarto As Studio — Inicio" onClick={scrollTo('top')}>
        <img src="assets/logo-light.svg" alt="Cuarto As Studio" className="nav__logo" />
      </a>
      <div className="nav__menu">
        <a href="#fuerzas" onClick={scrollTo('fuerzas')}>Las 4 fuerzas</a>
        <a href="#servicios" onClick={scrollTo('servicios')}>Servicios</a>
        <a href="#proceso" onClick={scrollTo('proceso')}>Proceso</a>
        <a href="#trabajo" onClick={scrollTo('trabajo')}>Trabajo</a>
      </div>
      <a href="#contacto" className="nav__cta" onClick={scrollTo('contacto')}>
        <span>Iniciar jugada</span>
        <span aria-hidden>→</span>
      </a>
    </nav>
  );
}
window.Nav = Nav;