/* global React, ReactDOM */

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.theme = tweaks.theme;
    r.dataset.accent = tweaks.accent;
    r.dataset.displaySerif = String(tweaks.displaySerif);
    r.dataset.grid = String(tweaks.showBlueprintGrid);
    r.dataset.sticker = String(tweaks.stickerButtons);
  }, [tweaks]);

  return (
    <>
      <Nav/>
      <main>
        <Hero/>
        <LogoStrip/>
        <ValueBento/>
        <HowItWorks/>
        <Testimonials/>
        <Pricing/>
        <FAQ/>
        <DownloadCTA/>
      </main>
      <Footer/>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Theme">
          <window.TweakRadio
            label="Surface"
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'aether', label: 'Aether' },
              { value: 'cream', label: 'Cream' },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection title="Type">
          <window.TweakToggle
            label="Serif display headlines"
            value={tweaks.displaySerif}
            onChange={(v) => setTweak('displaySerif', v)}
          />
        </window.TweakSection>
        <window.TweakSection title="Decoration">
          <window.TweakToggle
            label="Blueprint grid background"
            value={tweaks.showBlueprintGrid}
            onChange={(v) => setTweak('showBlueprintGrid', v)}
          />
          <window.TweakToggle
            label="Sticker-style buttons"
            value={tweaks.stickerButtons}
            onChange={(v) => setTweak('stickerButtons', v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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