const App = () => {
  const [t, setTweak] = useTweaks(window.__TWEAKS__);

  React.useEffect(() => {
    document.body.dataset.palette = t.palette || "ivory";
    document.body.dataset.density = t.density || "comfortable";
  }, [t.palette, t.density]);

  return (
    <>
      <Nav/>
      <Hero/>
      <Services/>
      <Process/>
      <Testimonials/>
      <Partners/>
      {t.showCalculator !== false && <Calculator/>}
      {t.showInsights && <Insights/>}
      <TeamFaq/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio label="Primary" value={t.palette} onChange={v => setTweak("palette", v)}
            options={[
              { value: "forest", label: "Forest" },
              { value: "midnight", label: "Midnight" },
              { value: "ivory", label: "Ivory" }
            ]}/>
        </TweakSection>
        <TweakSection label="Layout">
          <TweakRadio label="Density" value={t.density} onChange={v => setTweak("density", v)}
            options={[
              { value: "tight", label: "Tight" },
              { value: "comfortable", label: "Default" },
              { value: "airy", label: "Airy" }
            ]}/>
        </TweakSection>
        <TweakSection label="Sections">
          <TweakToggle label="SIP calculator" value={t.showCalculator} onChange={v => setTweak("showCalculator", v)}/>
          <TweakToggle label="Journal" value={t.showInsights} onChange={v => setTweak("showInsights", v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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