const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dreamnest-light",
  "layout": "cozy",
  "lang": "ko"
}/*EDITMODE-END*/;

function App() {
  const [lang, setLang] = React.useState(() => {
    try { return localStorage.getItem("ss_lang") || TWEAK_DEFAULTS.lang; } catch(e){ return TWEAK_DEFAULTS.lang; }
  });
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("ss_theme") || TWEAK_DEFAULTS.theme; } catch(e){ return TWEAK_DEFAULTS.theme; }
  });
  const [layout, setLayout] = React.useState(TWEAK_DEFAULTS.layout);
  const [tweaksOn, setTweaksOn] = React.useState(false);

  const t = window.I18N[lang] || window.I18N.ko;

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    document.documentElement.setAttribute("data-layout", layout);
    document.documentElement.setAttribute("lang", lang);
  }, [theme, layout, lang]);

  React.useEffect(() => {
    const s = t.seo;
    if (!s) return;
    document.title = s.title;
    const setMeta = (name, content, prop = "name") => {
      let el = document.querySelector(`meta[${prop}="${name}"]`);
      if (!el) { el = document.createElement("meta"); el.setAttribute(prop, name); document.head.appendChild(el); }
      el.setAttribute("content", content);
    };
    setMeta("description", s.description);
    setMeta("og:title", s.title, "property");
    setMeta("og:description", s.description, "property");
    setMeta("og:image:alt", s.ogImageAlt, "property");
    setMeta("twitter:title", s.title);
    setMeta("twitter:description", s.description);
  }, [lang, t]);

  React.useEffect(() => {
    try { localStorage.setItem("ss_lang", lang); } catch(e){}
  }, [lang]);

  React.useEffect(() => {
    try { localStorage.setItem("ss_theme", theme); } catch(e){}
  }, [theme]);

  // Edit-mode protocol
  React.useEffect(() => {
    const onMsg = (ev) => {
      const d = ev.data || {};
      if (d.type === "__activate_edit_mode") setTweaksOn(true);
      if (d.type === "__deactivate_edit_mode") setTweaksOn(false);
    };
    window.addEventListener("message", onMsg);
    window.parent?.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  useReveal();

  const ctx = { lang, setLang, t, theme, setTheme, layout, setLayout, tweaksOn };

  return (
    <AppCtx.Provider value={ctx}>
      <a className="skip-to-main" href="#main-content">{t.a11y?.skipToMain}</a>
      <TopBar />
      <main id="main-content">
        <Hero />
        <About />
        <Timeline />
        <ProgressUpdates />
        <Partners />
        <CheerWall />
        <DonateStrip />
      </main>
      <Footer />
      <Tweaks />
    </AppCtx.Provider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);