/* global React, useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio */
const App = () => {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "density": 1,
    "accent": "gold",
    "darkHero": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--density', t.density);
    if (t.accent === 'green') {
      document.documentElement.style.setProperty('--gold', '#2E6A4E');
      document.documentElement.style.setProperty('--gold-2', '#3C8260');
    } else if (t.accent === 'olive') {
      document.documentElement.style.setProperty('--gold', '#7A846A');
      document.documentElement.style.setProperty('--gold-2', '#8F9A7E');
    } else {
      document.documentElement.style.setProperty('--gold', '#B88A3B');
      document.documentElement.style.setProperty('--gold-2', '#C99C4D');
    }
  }, [t]);

  return (
    <div>
      <Nav/>
      <Hero/>
      <ProductTour/>
      <HowItWorks/>
      <OrdersTable/>
      <Testimonials/>
      <CTA/>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Accent" value={t.accent}
          options={['gold','green','olive']}
          onChange={v => setTweak('accent', v)} />
        <TweakSection label="Layout" />
        <TweakSlider label="Density" value={t.density} min={0.7} max={1.2} step={0.05}
          onChange={v => setTweak('density', v)} />
      </TweaksPanel>
    </div>
  );
};

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