// Root App + Tweaks panel

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

  // Apply font-set tweak to <html data-font="…">
  React.useEffect(() => {
    if (t.fontSet === 'default') document.documentElement.removeAttribute('data-font');
    else document.documentElement.setAttribute('data-font', t.fontSet);
  }, [t.fontSet]);

  return (
    <>
      <Nav/>
      <main>
        <Hero/>
        <Marquee/>
        <Problem/>
        <Process/>
        <Results/>
        <Pricing/>
        {t.founderShown && <Founder/>}
        <Guarantee/>
        <FAQ/>
        <CTA/>
      </main>
      <Footer/>
      <SeoBotWidget/>

      <TweaksPanel>
        <TweakSection label="Шрифты"/>
        <TweakSelect
          label="Набор"
          value={t.fontSet}
          options={['default', 'onest', 'golos']}
          onChange={(v) => setTweak('fontSet', v)}
        />
        <TweakSection label="Контент"/>
        <TweakToggle
          label="Показывать основателя"
          value={t.founderShown}
          onChange={(v) => setTweak('founderShown', v)}
        />
      </TweaksPanel>
    </>
  );
}

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