// GSP Navbar — two-tier fixed bar with mega-menus, compacts on scroll.
// Faithful to the canonical wireframe-home: Guardias · Electrónica · Nosotros · Clientes · Conocimiento · Contacto.
function Navbar() {
  const [open, setOpen] = React.useState(null);
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [mobileSec, setMobileSec] = React.useState(null);
  // Anchor links a secciones de la home deben funcionar también desde las páginas internas.
  const onHome = /(^|\/)index\.html$/.test(location.pathname) || location.pathname.endsWith('/');
  const hp = onHome ? '' : 'index.html';
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);
  React.useEffect(() => {
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => { setScrolled(window.scrollY > 60); ticking = false; });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const Icon = window.Icon;

  const item = (key, label, href, dropdown, wide) => (
    <li
      className={open === key ? 'open' : ''}
      onMouseEnter={() => dropdown && setOpen(key)}
      onMouseLeave={() => setOpen(null)}
    >
      <a
        href={href}
        onClick={(e) => { if (dropdown && open !== key) { e.preventDefault(); setOpen(key); } }}
      >{label}{dropdown && <span className="nav-arrow"><Icon name="chevron" size={11} /></span>}</a>
      {dropdown && <div className={'mega-dropdown' + (wide ? ' wide' : '')}>{dropdown}</div>}
    </li>
  );

  const megaItem = (icon, title, desc, href) => (
    <a className="mega-item" href={href || undefined}>
      <div className="mega-item-title"><Icon name={icon} size={15} /> {title}</div>
      <div className="mega-item-desc">{desc}</div>
    </a>
  );

  const mGroup = (key, label, links) => (
    <div className={'mnav-group' + (mobileSec === key ? ' open' : '')}>
      <button type="button" className="mnav-group-btn" aria-expanded={mobileSec === key} onClick={() => setMobileSec(mobileSec === key ? null : key)}>
        {label}<span className="nav-arrow"><Icon name="chevron" size={15} /></span>
      </button>
      <div className="mnav-sub">
        {links.map(([l, h]) => <a key={l} className="mnav-link sub" href={h}>{l}</a>)}
      </div>
    </div>
  );

  return (
    <div className={'navbar-wrapper' + (scrolled ? ' scrolled' : '')}>
      <div className="navbar-top">
        <a className="nav-logo" href="index.html"><img className="nav-logo-img" src="gsp-logo.svg" alt="GSP Seguridad Privada" style={{ height: 54 }} /></a>
        <div className="nav-right">
          <div className="nav-phone"><Icon name="phone" size={14} /> 0810-220-0477</div>
          <Button as="a" href="#contacto" variant="primary" size="sm">Cotizar</Button>
          <button
            type="button"
            className="nav-burger"
            aria-label={mobileOpen ? 'Cerrar menú' : 'Abrir menú'}
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen(!mobileOpen)}
          ><Icon name={mobileOpen ? 'x' : 'menu'} size={22} /></button>
        </div>
      </div>
      <div
        className={'mnav' + (mobileOpen ? ' open' : '')}
        onClick={(e) => { if (e.target.closest('a')) setMobileOpen(false); }}
      >
        {mGroup('guardias', 'Guardias de Seguridad', [
          ['Empresas e Industrias', 'empresas-industrias.html'],
          ['Barrios Privados', 'barrios-privados.html'],
          ['Guardias en CABA', 'guardias-caba.html'],
          ['Guardias en GBA', 'guardias-gba.html'],
          ['Guardias en Costa Atlántica', 'guardias-costa-atlantica.html'],
          ['Guardias en La Plata', 'guardias-la-plata.html'],
        ])}
        {mGroup('electronica', 'Electrónica', [
          ['Alarma Hogar — AX Home', 'alarmas-axhome.html'],
          ['Alarma Profesional — AX Pro', 'axpro.html'],
          ['Upgrade Smart', 'upgrade-smart.html'],
          ['Cámaras Wi-Fi', 'camaras-wifi.html'],
          ['Cámaras IP Profesional (IA)', 'cctv-ip.html'],
          ['CCTV Analógico Residencial', 'cctv-analogico.html'],
          ['Accesos — Empresas', 'accesos-empresas.html'],
          ['Accesos — Residencial', 'accesos-residencial.html'],
          ['Geolocalización de Flotas', 'geolocalizacion.html'],
        ])}
        {mGroup('nosotros', 'Nosotros', [
          ['Historia, Misión y Valores', 'nosotros.html'],
          ['Certificaciones y Habilitaciones', 'certificaciones.html'],
        ])}
        <a className="mnav-link" href={hp + '#clientes'}>Clientes</a>
        {mGroup('conocimiento', 'Conocimiento', [
          ['Blog', 'conocimiento.html'],
          ['Preguntas Frecuentes', 'faq.html'],
        ])}
        <a className="mnav-link" href="contacto.html">Contacto</a>
        <div className="mnav-footer">
          <a className="mnav-phone" href="tel:08102200477"><Icon name="phone" size={16} /> 0810-220-0477</a>
          <a className="mnav-empleo" href="https://empleo.gspseguridad.com.ar/" rel="nofollow">Trabajá con nosotros</a>
        </div>
      </div>
      <nav className="navbar-bottom">
        <ul className="nav-menu">
          {item('guardias', 'Guardias de Seguridad', hp + '#servicios', (
            <React.Fragment>
              <div className="mega-col">
                <div className="mega-col-title">Vigilancia Privada</div>
                {megaItem('shield', 'Empresas e Industrias', 'Custodia, control de accesos y rondas', 'empresas-industrias.html')}
                {megaItem('home', 'Barrios Privados', 'Seguridad perimetral y control vehicular', 'barrios-privados.html')}
                <a className="mega-parent-link" href="https://empleo.gspseguridad.com.ar/" rel="nofollow">Trabajá con nosotros →</a>
              </div>
              <div className="mega-col">
                <div className="mega-col-title">Cobertura por zona</div>
                {megaItem('map-pin', 'Guardias en CABA', 'Vigilancia privada en Capital Federal', 'guardias-caba.html')}
                {megaItem('map-pin', 'Guardias en GBA', 'Cobertura en Gran Buenos Aires', 'guardias-gba.html')}
                {megaItem('map-pin', 'Guardias en Costa Atlántica', 'Pinamar y la Costa Atlántica', 'guardias-costa-atlantica.html')}
                {megaItem('map-pin', 'Guardias en La Plata', 'Vigilancia en La Plata y alrededores', 'guardias-la-plata.html')}
              </div>
            </React.Fragment>
          ), true)}
          <div className="nav-divider" />
          {item('electronica', 'Electrónica', hp + '#servicios', (
            <React.Fragment>
              <div className="mega-col">
                <div className="mega-col-title">Alarmas</div>
                {megaItem('home', 'Hogar — AX Home', 'Sistema de alarma inalámbrico residencial', 'alarmas-axhome.html')}
                {megaItem('shield', 'Profesional — AX Pro', 'Sistema de alarma grado 2 con videoverificación', 'axpro.html')}
                {megaItem('navigation', 'Upgrade Smart', 'Migración DSC a inalámbrico', 'upgrade-smart.html')}
              </div>
              <div className="mega-col">
                <div className="mega-col-title">Cámaras</div>
                {megaItem('eye', 'Wi-Fi', 'Autónomas, sin cableado', 'camaras-wifi.html')}
                {megaItem('monitor', 'IP Profesional (IA)', 'Analítica inteligente y NVR', 'cctv-ip.html')}
                {megaItem('video', 'Analógico Residencial', 'CCTV HD económico', 'cctv-analogico.html')}
              </div>
              <div className="mega-col">
                <div className="mega-col-title">Más soluciones</div>
                {megaItem('lock', 'Control de Accesos — Empresas', 'Biometría y gestión corporativa', 'accesos-empresas.html')}
                {megaItem('home', 'Control de Accesos — Residencial', 'Cerraduras smart premium', 'accesos-residencial.html')}
                {megaItem('navigation', 'Geolocalización de Flotas', 'Tracking vehicular en tiempo real', 'geolocalizacion.html')}
              </div>
            </React.Fragment>
          ), true)}
          <div className="nav-divider" />
          {item('nosotros', 'Nosotros', hp + '#why', (
            <div className="mega-col">
              <div className="mega-col-title">Empresa</div>
              {megaItem('clock', 'Historia, Misión y Valores', 'Nuestra trayectoria y compromiso', 'nosotros.html')}
              {megaItem('shield-check', 'Certificaciones y Habilitaciones', 'ISO 9001, ANMAC, ASIS, Prefectura', 'certificaciones.html')}
              <a className="mega-empleo-btn" href="https://empleo.gspseguridad.com.ar/" rel="nofollow">Trabajá con nosotros</a>
            </div>
          ))}
          <div className="nav-divider" />
          <li><a href={hp + '#clientes'}>Clientes</a></li>
          <div className="nav-divider" />
          {item('conocimiento', 'Conocimiento', 'conocimiento.html', (
            <div className="mega-col">
              <div className="mega-col-title">Centro de Conocimiento</div>
              {megaItem('monitor', 'Blog', 'Artículos y novedades del sector', 'conocimiento.html')}
              {megaItem('clock', 'Preguntas Frecuentes', 'Respuestas a las dudas más comunes', 'faq.html')}
              <a className="mega-parent-link" href="conocimiento.html">Ir al Centro de Conocimiento →</a>
            </div>
          ))}
          <div className="nav-divider" />
          <li><a href="contacto.html">Contacto</a></li>
        </ul>
      </nav>
    </div>
  );
}
window.Navbar = Navbar;