/* i18n — bilingual ES/EN system for Booster Block */

const LangContext = React.createContext({ lang: 'en', setLang: () => {} });

const LangProvider = ({ children }) => {
  const [lang, setLangState] = React.useState(() => {
    try { return localStorage.getItem('bb-lang') || 'en'; } catch (_) { return 'en'; }
  });
  const setLang = React.useCallback((l) => {
    try { localStorage.setItem('bb-lang', l); } catch (_) {}
    setLangState(l);
    document.documentElement.lang = l;
  }, []);
  React.useEffect(() => { document.documentElement.lang = lang; }, [lang]);
  return (
    <LangContext.Provider value={{ lang, setLang }}>
      {children}
    </LangContext.Provider>
  );
};
const useLang = () => React.useContext(LangContext);

/* Drop-in translate component: <T en="Hello" es="Hola"/> */
const T = ({ en, es }) => {
  const { lang } = useLang();
  return lang === 'es' ? es : en;
};

/* tx(en, es) — for use inside attributes / string templates */
const tx = (lang, en, es) => (lang === 'es' ? es : en);

/* Language switcher pill */
const LangSwitch = () => {
  const { lang, setLang } = useLang();
  return (
    <div className="lang-switch" role="group" aria-label="Language">
      <button
        className={lang === 'en' ? 'active' : ''}
        onClick={() => setLang('en')}
        aria-pressed={lang === 'en'}
      >EN</button>
      <span className="lang-sep"/>
      <button
        className={lang === 'es' ? 'active' : ''}
        onClick={() => setLang('es')}
        aria-pressed={lang === 'es'}
      >ES</button>
    </div>
  );
};

Object.assign(window, { LangContext, LangProvider, useLang, T, tx, LangSwitch });