// Grupo JOMI — corporate site header (sticky nav)
function SiteHeader({ route, onNav }) {
  const { Button } = window.GrupoJOMIDesignSystem_7a96bd;
  const [open, setOpen] = React.useState(false);
  const links = [
    { id: 'home', label: 'Inicio' },
    { id: 'units', label: 'Unidades de negocio' },
    { id: 'about', label: 'Nosotros' },
  ];
  return (
    <header className="site-header">
      <div className="site-header__inner">
        <a className="brand" href="#" onClick={(e) => { e.preventDefault(); onNav('home'); }}>
          <img className="brand__logo" src="assets/logos/grupo-jomi.png" alt="Grupo JOMI" />
        </a>
        <nav className={`site-nav ${open ? 'is-open' : ''}`}>
          {links.map((l) => (
            <a key={l.id} href="#"
              className={`site-nav__link ${route === l.id ? 'is-active' : ''}`}
              onClick={(e) => { e.preventDefault(); onNav(l.id); setOpen(false); }}>
              {l.label}
            </a>
          ))}
          <div className="site-nav__cta">
            <Button size="sm" variant="primary" onClick={() => onNav('contact')}>Contacto</Button>
          </div>
        </nav>
        <button className="site-header__burger" aria-label="Menú" onClick={() => setOpen((o) => !o)}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
        </button>
      </div>
    </header>
  );
}
window.SiteHeader = SiteHeader;