/* global React */
/* BoldBrandz — Language / Dir Context
 * Loaded FIRST before all section partials.
 * Exposes window.LangContext, window.LangProvider, window.useLang
 * for consumption by any partial via React.useContext(window.LangContext).
 */

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

function LangProvider({ children }) {
  const [lang, setLangState] = React.useState(() => {
    try {
      const stored = localStorage.getItem('boldbrandz_lang');
      if (stored === 'ar' || stored === 'en') return stored;
    } catch (e) {}
    return 'en';
  });

  const dir = lang === 'ar' ? 'rtl' : 'ltr';

  const setLang = React.useCallback((newLang) => {
    if (newLang !== 'ar' && newLang !== 'en') return;
    setLangState(newLang);
    try { localStorage.setItem('boldbrandz_lang', newLang); } catch (e) {}
  }, []);

  React.useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = dir;
    document.documentElement.setAttribute('data-lang', lang);
  }, [lang, dir]);

  return (
    <LangContext.Provider value={{ lang, setLang, dir }}>
      {children}
    </LangContext.Provider>
  );
}

function useLang() {
  return React.useContext(LangContext);
}

window.LangContext  = LangContext;
window.LangProvider = LangProvider;
window.useLang      = useLang;