/* global React, ReactDOM */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3367e3",
  "headlineStyle": "split",
  "density": "comfortable",
  "showFloatingCTAs": true
}/*EDITMODE-END*/;

function App() {
  useReveal();
  const [tweaks, setTweak] = (window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]);

  React.useEffect(() => {
    if (tweaks.accent) {
      document.documentElement.style.setProperty("--blue", tweaks.accent);
    }
  }, [tweaks.accent]);

  return (
    <>
      <Nav />
      <Hero />
      <TrustBar />
      <PlatformStack />
      <Services />
      <WhyUs />
      <Industries />
      <Process />
      <Results />
      <Testimonials />
      <LeadForm />
      <FAQ />
      <FinalCTA />
      <Footer />
      {tweaks.showFloatingCTAs && <Floaters />}
      <ExitIntent />
      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection label="Theme">
            <window.TweakColor
              label="Accent color"
              value={tweaks.accent}
              onChange={v => setTweak("accent", v)}
              options={["#3367e3", "#0d9488", "#e07712", "#7c3aed", "#d63864"]}
            />
            <window.TweakToggle
              label="Floating CTAs"
              value={tweaks.showFloatingCTAs}
              onChange={v => setTweak("showFloatingCTAs", v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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