/* SATIEN v2 — App entry */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "day",
  "voice": "editorial",
  "density": "standard"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const b = document.body;
    const groups = {
      mood: ['day', 'dusk', 'night'],
      voice: ['editorial', 'boutique', 'sport'],
      density: ['silencieux', 'standard', 'sature'],
    };
    Object.entries(groups).forEach(([k, vals]) => {
      vals.forEach(v => b.classList.remove(`${k}-${v}`));
    });
    b.classList.add('mood-' + t.mood);
    b.classList.add('voice-' + t.voice);
    b.classList.add('density-' + t.density);
  }, [t]);

  return (
    <ContentProvider>
    <ShopifyProductProvider>
      <Nav />
      <CartDrawer />
      <Hero />
      <Marquee />
      <Choc />
      <Product />
      <Benefits />
      <HowItWorks />
      <Testimonials />
      <FAQ />
      <Guarantee />
      <Newsletter />
      <Footer />

      <TweaksPanel title="Soyeux · jouer">
        <TweakSection label="Atmosphère" />
        <TweakRadio
          label="Lumière"
          value={t.mood}
          options={[
            { value: 'day', label: 'Jour' },
            { value: 'dusk', label: 'Crép.' },
            { value: 'night', label: 'Nuit' },
          ]}
          onChange={(v) => setTweak('mood', v)}
        />

        <TweakSection label="Voix" />
        <TweakRadio
          label="Typographie"
          value={t.voice}
          options={[
            { value: 'editorial', label: 'Édito' },
            { value: 'boutique', label: 'Bout.' },
            { value: 'sport', label: 'Sport' },
          ]}
          onChange={(v) => setTweak('voice', v)}
        />

        <TweakSection label="Rythme" />
        <TweakRadio
          label="Densité"
          value={t.density}
          options={[
            { value: 'silencieux', label: 'Silence' },
            { value: 'standard', label: 'Std' },
            { value: 'sature', label: 'Saturé' },
          ]}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
      <MobilePreviewButton />
    </ShopifyProductProvider>
    </ContentProvider>
  );
}

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