/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "dark"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);
  const onDarkHeader = t.heroVariant === "dark";
  return (
    <>
      <SiteHeader onDark={onDarkHeader} />
      <Hero variant={t.heroVariant} />
      <Pillars />
      <Stages />
      <Cases />
      <EngagementSnapshot />
      <Cta />
      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero variant">
          <TweakRadio
            value={t.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "dark", label: "Dark" },
              { value: "paper", label: "Paper" },
              { value: "split", label: "Split" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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