/* global React, ReactDOM, Cursor, Nav, Hero, About, Services, Manifesto, Cases, HowWeWork, Founder, Contact, Outro, Footer, useReveal,
          useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "dark",
  "showCursor": true
}/*EDITMODE-END*/;

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

  useEffect(() => {
    document.documentElement.setAttribute('data-mode', t.mode);
    document.body.style.cursor = t.showCursor ? 'none' : 'auto';
  }, [t.mode, t.showCursor]);

  return (
    <>
      {t.showCursor && <Cursor />}
      <Nav />
      <main>
        <Hero />
        <About />
        <Services />
        <Manifesto />
        <Cases />
        <HowWeWork />
        <Founder />
        <Contact />
      </main>
      <Outro />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aparência">
          <TweakRadio
            label="Modo"
            value={t.mode}
            onChange={v => setTweak('mode', v)}
            options={[{label:'Escuro', value:'dark'}, {label:'Claro', value:'light'}]}
          />
        </TweakSection>
        <TweakSection label="Interações">
          <TweakToggle
            label="Cursor"
            value={t.showCursor}
            onChange={v => setTweak('showCursor', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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