/* global React, ReactDOM, useTweaks, TweaksPanel, TweakRadio, TweakSection */
const { useState, useEffect } = React;

function App() {
  const [lang, setLang] = useState('pl');

  const defaults = /*EDITMODE-BEGIN*/{
    "density": "comfortable",
    "direction": "a"
  }/*EDITMODE-END*/;

  const [tweaks, setTweaks] = useTweaks(defaults);

  // Apply density to document
  useEffect(() => {
    document.documentElement.setAttribute('data-density', tweaks.density);
  }, [tweaks.density]);

  // Scroll reveal
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('in');
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    const observe = () => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el));
    };
    observe();
    const mo = new MutationObserver(observe);
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);

  return (
    <>
      <LangBar lang={lang} setLang={setLang} />
      <Hero lang={lang} />
      <Who lang={lang} />
      <Problem lang={lang} />
      <Products lang={lang} />
      <Rhythm lang={lang} />
      <Videos lang={lang} />
      <Ways lang={lang} />
      {/* <Event lang={lang} />
      <Testimonials lang={lang} /> */}
      <FAQ lang={lang} />
      <Final lang={lang} />
      <Footer lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Section density" subtitle="Vertical rhythm between sections">
          <TweakRadio
            value={tweaks.density}
            onChange={(v) => setTweaks({ density: v })}
            options={[
              { value: 'condensed', label: 'Condensed' },
              { value: 'comfortable', label: 'Comfortable' },
              { value: 'spacious', label: 'Spacious' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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