// App entry — composes the page and wires the Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "density": "comfy"
}/*EDITMODE-END*/;

// Pull components registered on window by their owning files
const { Nav, Hero, Integrations, Dashboard, HowItWorks, UseCases, ROI, Security, CTABanner, Footer } = window;
const { TweaksPanel, TweakSection, TweakRadio, useTweaks } = window;

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

  React.useEffect(() => {
    document.body.setAttribute('data-theme', t.theme);
    document.body.setAttribute('data-density', t.density);
  }, [t.theme, t.density]);

  const toggleTheme = () => setTweak('theme', t.theme === 'dark' ? 'light' : 'dark');

  return (
    <>
      <Nav theme={t.theme} onToggleTheme={toggleTheme}/>
      <main>
        <Hero/>
        <Integrations/>
        <Dashboard/>
        <HowItWorks/>
        <UseCases/>
        <ROI/>
        <Security/>
        <CTABanner/>
      </main>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Appearance"/>
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={['light','dark']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['compact','comfy','spacious']}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
    </>
  );
}

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