/* navbar.jsx — NAVBAR ÚNICO del sitio (window.RMNavbar). Lo renderizan tanto la
   home (Pagina.jsx) como las páginas de servicio (Servicio.jsx); el markup vive
   AQUÍ y SOLO aquí, así cualquier cambio aplica a las dos. Los estilos viven en
   navbar.css (también única fuente). Cada página le pasa su config por props:

     wordmarkHref  — destino del logo ('#top' | 'Portal de entrada.html')
     links         — [{ href, label, cat }]  (labels ya resueltos al idioma)
     svcHref       — href que despliega el mini-dropdown de servicios
     svcItems      — [{ href, label, cat, num }] (los 4 servicios)
     headLabel     — texto del header del dropdown ('navegación' | 'navigation')
     lang/onPickLang — estado del selector ES/EN + handler
     onNavClick    — handler opcional de click (la home hace scroll por la intro)

   Carga con <script type="text/babel" src="navbar.jsx"> ANTES de Pagina/Servicio. */
(function () {
  const DS = window.RmorenodotcomDesignSystem_019de6 || window;
  const { Wordmark, Clock, DotIcon } = DS;

  /* ── FUENTE ÚNICA de navegación ────────────────────────────────────────
     TODAS las páginas obtienen sus links/servicios de aquí (window.RM_NAV /
     window.RM_NAV_SVC) para que el navbar sea IDÉNTICO en todo el sitio.
     Antes cada página definía su propio array (NAV / WORKS_NAV / SVC_NAV /
     NAV_LINKS…) y divergieron (a unas les faltaba "credenciales"). */
  const RM_NAV_LINKS = [
    ['/#manifiesto', 'manifiesto', 'manifesto', 'var(--cat-sienna)'],
    ['/#mapa', 'servicios', 'services', 'var(--cat-azure)'],
    ['/works', 'trabajos', 'works', 'var(--cat-yellow)'],
    ['/#contacto', 'contacto', 'contact', 'var(--cat-verde)'],
    ['/credentials', 'credenciales', 'credentials', 'var(--cat-sienna)'],
  ];
  const RM_NAV_SVC_DATA = [
    ['/web', 'web', 'web', 'var(--cat-azure)', '01'],
    ['/ecommerce', 'e-commerce', 'ecommerce', 'var(--cat-verde)', '02'],
    ['/marca', 'marca', 'brand', 'var(--cat-sienna)', '03'],
    ['/redes', 'redes', 'social', 'var(--cat-yellow)', '04'],
  ];
  window.RM_NAV = function (lang) {
    return RM_NAV_LINKS.map((a) => ({ href: a[0], label: lang === 'en' ? a[2] : a[1], cat: a[3] }));
  };
  window.RM_NAV_SVC = function (lang) {
    return RM_NAV_SVC_DATA.map((a) => ({ href: a[0], label: lang === 'en' ? a[2] : a[1], cat: a[3], num: a[4] }));
  };

  function RMNavbar(props) {
    const { wordmarkHref, links, svcHref, svcItems = [], headLabel, lang, onPickLang, onNavClick } = props;
    const [open, setOpen] = React.useState(false);
    React.useEffect(() => {
      if (!open) return;
      const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
      window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }, [open]);
    const handle = (e, href) => { if (onNavClick) onNavClick(e, href); setOpen(false); };

    return (
      <React.Fragment>
        <header className="site-nav" data-nav>
          <div className="nav-inner">
            <a href={wordmarkHref} aria-label="rmorenodot.com" className="nav-mark">
              <Wordmark variant="domain" size={21} color="var(--fg)" />
            </a>
            <nav className="nav-links" aria-label={lang === 'en' ? 'Main' : 'Principal'}>
              {links.map(({ href, label, cat }) => {
                if (href === svcHref && svcItems.length) {
                  return (
                    <div className="nav-svc" key={href}>
                      <a href={href} className="nav-link" style={cat ? { '--nav-cat': cat } : undefined} onClick={(e) => handle(e, href)}>{label}</a>
                      <div className="nav-mini" role="menu" aria-label={label}>
                        {svcItems.map((s) => (
                          <a key={s.href} href={s.href} className="nav-mini-row" role="menuitem" style={{ '--cat': s.cat }}>
                            <i className="nav-dd-dot" aria-hidden="true" /><span>{s.label}</span><span className="nav-mini-num">{s.num}</span>
                          </a>
                        ))}
                      </div>
                    </div>
                  );
                }
                return <a key={href} href={href} className="nav-link" style={cat ? { '--nav-cat': cat } : undefined} onClick={(e) => handle(e, href)}>{label}</a>;
              })}
            </nav>
            <div className="nav-right">
              <div className="lang-toggle" role="group" aria-label="idioma / language">
                {[['es', 'ES'], ['en', 'EN']].map(([code, txt]) => (
                  <button key={code} type="button" className={'lang-opt' + (lang === code ? ' on' : '')}
                    aria-pressed={lang === code} onClick={() => onPickLang(code)}>{txt}</button>
                ))}
              </div>
              <span className="nav-clock"><Clock variant="micro" showGeo /></span>
              <button type="button" className={'nav-burger' + (open ? ' is-open' : '')}
                aria-label={open ? (lang === 'en' ? 'Close menu' : 'Cerrar menú') : (lang === 'en' ? 'Open menu' : 'Abrir menú')} aria-expanded={open} onClick={() => setOpen((v) => !v)}>
                {open && DotIcon ? <DotIcon name="close" size={20} /> : (DotIcon ? <DotIcon name="more" size={22} /> : <span aria-hidden="true">⋮</span>)}
              </button>
            </div>
          </div>
        </header>

        <div className={'nav-dd-scrim' + (open ? ' on' : '')} onClick={() => setOpen(false)} aria-hidden="true" />
        <div className={'nav-dd' + (open ? ' on' : '')} role="menu" aria-label={lang === 'en' ? 'Main' : 'Principal'}>
          <div className="nav-dd-panel">
            <span className="nav-dd-br tl" aria-hidden="true" /><span className="nav-dd-br tr" aria-hidden="true" />
            <span className="nav-dd-br bl" aria-hidden="true" /><span className="nav-dd-br br" aria-hidden="true" />
            <div className="nav-dd-head" aria-hidden="true">
              <span><i className="an-rec" />{headLabel}</span>
              <span className="nav-dd-head-r">mxli</span>
            </div>
            <div className="nav-dd-list">
              {links.map(({ href, label, cat }) => (
                <React.Fragment key={href}>
                  <a href={href} className="nav-dd-row" role="menuitem" tabIndex={open ? 0 : -1}
                     style={{ '--cat': cat || 'var(--cat-sienna)' }} onClick={(e) => handle(e, href)}>
                    <span>{label}</span><i className="nav-dd-dot" aria-hidden="true" />
                  </a>
                  {href === svcHref && svcItems.length > 0 && (
                    <div className="nav-dd-subs">
                      {svcItems.map((s) => (
                        <a key={s.href} href={s.href} className="nav-dd-sub" role="menuitem" tabIndex={open ? 0 : -1}
                           style={{ '--cat': s.cat }} onClick={() => setOpen(false)}>
                          <i className="nav-dd-dot" aria-hidden="true" /><span>{s.label}</span><span className="nav-dd-sub-num">{s.num}</span>
                        </a>
                      ))}
                    </div>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }

  window.RMNavbar = RMNavbar;
})();