// i18n — global lang state + useLang hook. Cargado antes que las secciones.
// Cada componente hace `const [lang, setLang] = window.useLang();` y elige texto por idioma.
(function () {
  const STORAGE_KEY = "celtis-lang";
  const initial = (function () {
    try {
      const saved = localStorage.getItem(STORAGE_KEY);
      if (saved === "es" || saved === "en") return saved;
    } catch (_) {}
    const nav = (navigator.language || "es").toLowerCase();
    return nav.startsWith("en") ? "en" : "es";
  })();

  window.__celtisLang = initial;
  document.documentElement.lang = initial;

  window.__setCeltisLang = function (lang) {
    if (lang !== "es" && lang !== "en") return;
    if (window.__celtisLang === lang) return;
    window.__celtisLang = lang;
    document.documentElement.lang = lang;
    try { localStorage.setItem(STORAGE_KEY, lang); } catch (_) {}
    window.dispatchEvent(new CustomEvent("celtis-lang-change", { detail: lang }));
  };

  window.useLang = function () {
    const [lang, setLangState] = React.useState(window.__celtisLang);
    React.useEffect(() => {
      const onChange = (e) => setLangState(e.detail);
      window.addEventListener("celtis-lang-change", onChange);
      return () => window.removeEventListener("celtis-lang-change", onChange);
    }, []);
    return [lang, window.__setCeltisLang];
  };
})();