/* global React, ReactDOM,
   HeroSection, AgentsSection, ROISection, HowItWorksSection,
   IntegrationsSection, FounderSection, PricingSection, FinalCTASection, FooterSection,
   TweaksPanel, useTweaks, TweakSection, TweakRadio
*/

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "a"
}/*EDITMODE-END*/;

const goToIntake = () => { window.location.href = "intake.html"; };

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <>
      <HeroSection headline={tweaks.headline} onOpenForm={goToIntake} />
      <AgentsSection />
      <ROISection />
      <HowItWorksSection />
      <PricingSection onOpenForm={goToIntake} />
      <FinalCTASection onOpenForm={goToIntake} />
      <FooterSection />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Headline">
          <TweakRadio
            value={tweaks.headline}
            onChange={(v) => setTweak("headline", v)}
            options={[
              { value: "a", label: "Trained team" },
              { value: "b", label: "Hire dept" },
              { value: "c", label: "Industry-ready" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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