/* GÊNESIS S/A — bootstrap da landing page dentro do WordPress */
const { useState, useEffect } = React;

function GenesisLP() {
  const cfg = window.GEN_LP_CONFIG || {};
  const [theme, setTheme] = useState(cfg.theme || "dark");
  const [accentMode, setAccent] = useState(cfg.accent || "mint");

  useEffect(() => {
    document.body.classList.remove("gen-theme-dark", "gen-theme-glass", "gen-theme-light");
    document.body.classList.add("gen-theme-" + theme);
  }, [theme]);

  useEffect(() => {
    const root = document.documentElement.style;
    let pair;
    if (theme === "glass") {
      pair = ["#19D2FF", "25, 210, 255"];
    } else if (theme === "light") {
      pair = accentMode === "mint" ? ["#1F8A52", "31, 138, 82"] : ["#0E86C7", "14, 134, 199"];
    } else {
      pair = accentMode === "mint" ? ["#3CE285", "60, 226, 133"] : ["#10CAFE", "16, 202, 254"];
    }
    root.setProperty("--accent", pair[0]);
    root.setProperty("--accent-rgb", pair[1]);
    root.setProperty("--accent-mode", accentMode);
    document.body.setAttribute("data-accent", accentMode);
  }, [theme, accentMode]);

  return (
    <>
      <Header theme={theme} accentMode={accentMode} onTheme={setTheme} onAccent={setAccent} />
      {cfg.showThemeRail ? <ThemeRail theme={theme} onTheme={setTheme} /> : null}
      <main>
        <Hero />
        <Assinaturas />
        <ContaCorrente />
        <IAAtendimento />
        <Fechamento />
        <FeedbackRH />
        <MetasDiarias />
        <Comparativo />
        <Depoimento />
        <CTAFinal />
        <Planos />
        <FAQ />
      </main>
      <Footer />
    </>
  );
}

(function mount() {
  const el = document.getElementById((window.GEN_LP_CONFIG && window.GEN_LP_CONFIG.mountId) || "genesis-lp-root");
  if (el) ReactDOM.createRoot(el).render(<GenesisLP />);
})();