const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "v2-slider",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.body.style.fontSize = t.density === "compact" ? "14px" : t.density === "comfy" ? "16px" : "15px";
  }, [t.density]);

  return (
    <>
      <Nav/>
      {t.heroVariant === "v1-video" ? <Hero/> : <HeroV2/>}
      <Categories/>
      <BestSellers/>
      <WhyStannox/>
      <Trusted/>
      <InAction/>
      <WhereToBuy/>
      <Footer/>
      <TweaksPanel>
        <TweakSection label="Hero variant"/>
        <TweakRadio
          label="Style"
          value={t.heroVariant}
          options={["v1-video", "v2-slider"]}
          onChange={v => setTweak("heroVariant", v)}
        />
        <TweakSection label="Layout"/>
        <TweakRadio label="Density" value={t.density} options={["compact","regular","comfy"]} onChange={v=>setTweak("density",v)}/>
      </TweaksPanel>
    </>
  );
}

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