/* App */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

const App = () => {
  const [theme, setTheme] = React.useState(DEFAULTS.theme);
  const [locale, setLocale] = React.useState("en");
  const [, setTick] = React.useState(0);

  React.useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);
  React.useEffect(() => { window.__locale = locale; document.documentElement.lang = locale; setTick((t) => t + 1); }, [locale]);

  const persist = (edits) => { window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*"); };

  return (
    <>
      <Navbar theme={theme} setTheme={setTheme} locale={locale} setLocale={setLocale} />
      <main>
        <Hero />
        <Features />
        <Pains />
        <Stats />
        <HowItWorks />
        <Testimonials />
        <Pricing />
        <Comparison />
        <Sectors />
        <Contact />
        <FAQ />
        <CTABanner />
      </main>
      <SiteFooter />
      <Tweaks theme={theme} setTheme={setTheme} persist={persist} />
    </>
  );
};

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