const { useState, useEffect } = React;

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

  // apply accent hue
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', `oklch(0.62 0.18 ${tweaks.accentHue})`);
    document.documentElement.style.setProperty('--accent-soft', `oklch(0.94 0.05 ${tweaks.accentHue})`);
    document.documentElement.style.setProperty('--accent-ink', `oklch(0.32 0.12 ${tweaks.accentHue})`);
  }, [tweaks.accentHue]);

  return (
    <>
      <Nav />
      <Hero tweaks={tweaks} />
      <Marquee />
      <Who />
      <How />
      <Included />
      <Pricing />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakSlider
            label="Accent hue"
            value={tweaks.accentHue}
            min={0} max={360} step={5}
            onChange={(v) => setTweak('accentHue', v)}
            suffix="°"
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Headline style"
            value={tweaks.headlineStyle}
            options={[
              { value: 'serif-mix', label: 'Serif mix' },
              { value: 'all-serif', label: 'All serif' },
              { value: 'all-sans', label: 'All sans' },
            ]}
            onChange={(v) => setTweak('headlineStyle', v)}
          />
          <TweakToggle
            label="Show grid background"
            value={tweaks.showGrid}
            onChange={(v) => setTweak('showGrid', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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