// Mounts the Karrie 29 site with a 3-way language toggle
// (English / Traditional Chinese / Simplified Chinese).
// Palette is locked to the cream/sage scheme.

const LANG_STORAGE_KEY = 'karrie29.lang';

const App = () => {
  const [lang, setLang] = React.useState(() => {
    try {
      const saved = localStorage.getItem(LANG_STORAGE_KEY);
      if (saved && STRINGS[saved]) return saved;
    } catch (e) {}
    return 'en';
  });

  React.useEffect(() => {
    try {
      localStorage.setItem(LANG_STORAGE_KEY, lang);
    } catch (e) {}
    const palette = PALETTES.cream;
    document.documentElement.style.background = palette.bg;
    document.body.style.background = palette.bg;
    document.documentElement.setAttribute('lang', STRINGS[lang].htmlLang);
    document.title = STRINGS[lang].content.brand + ' · ' + STRINGS[lang].content.tagline;
  }, [lang]);

  return (
    <KSite
      palette={PALETTES.cream}
      t={STRINGS[lang]}
      lang={lang}
      languages={STRINGS}
      onChangeLang={setLang}
    />
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);