/* Main App */
const { useEffect: useEffectApp, useState: useStateApp } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e6242b"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  const accent = tweaks.accent || "#e6242b";

  // reveal on scroll
  useEffectApp(() => {
    const els = document.querySelectorAll(".reveal");
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  // accent → CSS var so the whole sheet picks it up
  useEffectApp(() => {
    document.documentElement.style.setProperty("--accent", accent);
  }, [accent]);

  return (
    <>
      <Nav accent={accent}/>
      <Hero accent={accent}/>
      <ValueProp accent={accent}/>
      <CtaMid accent={accent}/>
      <Pain accent={accent}/>
      <Solution accent={accent}/>
      <CtaMid accent={accent} label="Quero tudo Empória na minha marca" tight/>
      <Benefits accent={accent}/>
      <Proof accent={accent}/>
      <CtaMid accent={accent} label="Quero esse padrão na minha marca" tight/>
      <Oferta accent={accent}/>
      <Objections accent={accent}/>
      <Garantia accent={accent}/>
      <Custo accent={accent}/>
      <CtaMid accent={accent} label="Vamos conversar antes do próximo trimestre" tight/>
      <FAQ accent={accent}/>
      <CtaForm accent={accent}/>
      <PS accent={accent}/>
      <Footer/>
      <WhatsAppFloat/>
      <BackToTop/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="CTA">
          <TweakColor
            label="Cor de destaque"
            value={accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#e6242b", "#ed1c24", "#d9342b", "#1a1a1a", "#c4a86a"]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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