/* global React, ReactDOM, Nav, Hero, MeetSection, OnThisDayScene, FeatureSection, LunaSection, StatsShowcase, TestimonialsSection, ThemesSection, FaqSection, DownloadCTA, Footer, useTweaks, TweaksPanel, TweakSection, TweakRadio */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "warm"
}/*EDITMODE-END*/;

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

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

  return (
    <>
      <Nav />
      <Hero />
      <MeetSection />
      <OnThisDayScene />
      <FeatureSection />
      <LunaSection />
      <StatsShowcase />
      <TestimonialsSection />
      <ThemesSection current={t.theme} onPick={(id) => setTweak('theme', id)} />
      <FaqSection />
      <DownloadCTA />
      <Footer />

      <TweaksPanel title="Tweaks" subtitle="Ontwerpvarianten">
        <TweakSection title="Thema">
          <TweakRadio
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'warm', label: 'Warm' },
              { value: 'sage', label: 'Sage' },
              { value: 'lavender', label: 'Lavendel' },
              { value: 'ocean', label: 'Oceaan' },
              { value: 'bloom', label: 'Bloesem' },
              { value: 'stone', label: 'Stone' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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