/* 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, DotMark } = DS;

  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">
              <span className="nav-mark-full" aria-hidden="true">
                <Wordmark variant="domain" size={21} color="var(--fg)" />
              </span>
              <span className="nav-mark-r" aria-hidden="true"
                style={{ display: 'inline-flex', alignItems: 'flex-end', lineHeight: 1 }}>
                {/* r. monogram en Cera Pro (workhorse) — iguala el asset oficial
                   assets/logos/r-mark.png: r geometrica de trazo grueso, terminal
                   recto (NO el gancho de Coolvetica). Color adaptativo (var(--fg))
                   + punto sienna de la firma de marca. NO usa DotMark (Coolvetica). */}
                <span style={{
                  fontFamily: 'var(--type-family-workhorse)',
                  fontWeight: 800,
                  fontSize: '28px',
                  lineHeight: 0.78,
                  letterSpacing: '-0.02em',
                  color: 'var(--fg)'
                }}>r</span>
                <span style={{
                  width: '0.34em',
                  height: '0.34em',
                  fontSize: '28px',
                  borderRadius: '50%',
                  background: 'var(--cat-sienna)',
                  marginLeft: '0.04em',
                  marginBottom: '0.04em',
                  flexShrink: 0,
                  alignSelf: 'flex-end'
                }} />
              </span>
            </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;
})();