const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "simplified",
  "showLogos": true,
  "showStats": true,
  "showTestimonials": true,
  "showSponsorSplit": true
}/*EDITMODE-END*/;

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

  return (
    <>
      <Nav />
      <Hero tweaks={tweaks} />
      <ThreePillars />
      <Benefits />
      <CtaSection />
      <Footer />
      <PrototypeModal />
      <PrototypeGate />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero copy">
          <TweakRadio
            label="Hero direction"
            value={tweaks.heroVariant}
            options={[
              { label: "Simplified", value: "simplified" },
              { label: "Operations", value: "operations" },
              { label: "Partner", value: "partner" },
            ]}
            onChange={v => setTweak("heroVariant", v)}
          />
        </TweakSection>
        <TweakSection title="Sections">
          <TweakToggle label="Customer logos" value={tweaks.showLogos} onChange={v => setTweak("showLogos", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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