/* i18n.jsx — language context + translation helpers
   Mirrors website/i18n.jsx; SN component dropped (no SPECIES data here). */

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

function LangProvider({ children }) {
  const [lang, setLang] = React.useState(() => {
    try { return localStorage.getItem('pop_lang') || 'zh'; } catch { return 'zh'; }
  });
  React.useEffect(() => {
    try { localStorage.setItem('pop_lang', lang); } catch {}
    document.documentElement.lang = lang === 'zh' ? 'zh' : 'en';
  }, [lang]);
  return <LangContext.Provider value={{ lang, setLang }}>{children}</LangContext.Provider>;
}

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

function T({ zh, en }) {
  const { lang } = useLang();
  return <>{lang === 'zh' ? zh : en}</>;
}

function CE({ zh, en }) {
  const { lang } = useLang();
  if (lang === 'zh') return <>{zh}<span className="cjk-en">（{en}）</span></>;
  return <em style={{fontStyle:'italic'}}>{en}</em>;
}

function YR({ y }) { return <span className="num">{y}</span>; }

Object.assign(window, { LangContext, LangProvider, useLang, T, CE, YR });

/* ---- Theme context ---- */

const ThemeContext = React.createContext({ theme: 'dark', setTheme: () => {} });

function ThemeProvider({ children }) {
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem('sc_theme') || 'dark'; } catch { return 'dark'; }
  });
  React.useEffect(() => {
    try { localStorage.setItem('sc_theme', theme); } catch {}
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);
  // set initial attribute on mount (before first paint would be better,
  // but Babel Standalone renders after DOM ready anyway)
  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
}

function useTheme() { return React.useContext(ThemeContext); }

Object.assign(window, { ThemeContext, ThemeProvider, useTheme });