// Barra de navegación superior, estilo "liquid glass": fija durante todo el
// scroll. Al bajar de la parte superior de la página se repliega en una
// píldora flotante y más compacta; al volver arriba se restablece.
// Incluye el megamenú desplegable "Servicios" (contenido en
// frontend/config/servicios-data.js), que se cierra al hacer clic fuera, con
// Escape, o al navegar a otra parte de la página.
// Selector de idioma ES / EN / 中文 (config/i18n.js).
const IDIOMAS = [['es', 'ES'], ['en', 'EN'], ['zh', '中文']];
function LangSwitch() {
  return (
    <div className="tl-lang" role="group" aria-label={window.t('lang.aria')}>
      {IDIOMAS.map(([code, label], i) => (
        <React.Fragment key={code}>
          {i > 0 && <span className="tl-lang-sep" aria-hidden="true">/</span>}
          <button
            type="button"
            className={`tl-lang-btn ${window.LANG === code ? 'is-active' : ''}`}
            aria-pressed={window.LANG === code}
            onClick={() => window.setLang(code)}
          >{label}</button>
        </React.Fragment>
      ))}
    </div>
  );
}

function ServiciosMenu() {
  const { useState: useStateServ, useEffect: useEffectServ, useRef: useRefServ } = React;
  const [open, setOpen] = useStateServ(false);
  const wrapRef = useRefServ(null);

  useEffectServ(() => {
    if (!open) return undefined;
    const onDocClick = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    const onKeyDown = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDocClick);
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('mousedown', onDocClick);
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [open]);

  return (
    <div className="servicios-menu" ref={wrapRef}>
      <button
        type="button"
        className={`nav__link servicios-menu__trigger ${open ? 'is-open' : ''}`}
        onClick={() => setOpen(!open)}
        aria-expanded={open}
      >
        {window.t('nav.services')}
        <svg className="servicios-menu__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>

      {open && (
        <div className="servicios-menu__panel">
          <div className="servicios-menu__grid">
            {window.SERVICIOS_DATA.map((cat) => (
              <div className="servicios-menu__col" key={cat.titulo}>
                <h4 className="servicios-menu__titulo">{cat.titulo}</h4>
                <ul className="servicios-menu__list">
                  {cat.items.map((item) => <li key={item}>{item}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function Nav({ onAbrirContacto }) {
  const { useState: useStateNav, useEffect: useEffectNav } = React;
  const [scrolled, setScrolled] = useStateNav(false);

  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="container nav__inner">
        <a href="#inicio" className="nav__brand">{window.SITE_CONFIG.brandName}</a>
        <div className="nav__links">
          <ServiciosMenu />
          <a href="#como-trabajamos" className="nav__link">{window.t('nav.how')}</a>
          <a href="#faq" className="nav__link">{window.t('nav.faq')}</a>
        </div>
        <div className="nav__actions">
          <LangSwitch />
          <button type="button" className="btn btn--accent btn--sm" onClick={onAbrirContacto}>
            {window.t('nav.cta')}
          </button>
        </div>
      </div>
    </nav>
  );
}