// Tweaks: dark/light only, per user request
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false
}/*EDITMODE-END*/;

const App = () => {
  const tweaks = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { values: TWEAK_DEFAULTS, setTweak: () => {}, isEditing: false, dismiss: () => {} };
  const t = tweaks.values;

  React.useEffect(() => {
    document.documentElement.classList.toggle('dark', !!t.dark);
  }, [t.dark]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Marquee />
        <Features />
        <Demo />
        <Metrics />
        <Testimonials />
        <Comparison />
        <Pricing />
        <FAQ />
        <CTA />
      </main>
      <Footer />

      {tweaks.isEditing && window.TweaksPanel && (
        <window.TweaksPanel onClose={tweaks.dismiss}>
          <window.TweakSection title="Aparência">
            <window.TweakRadio
              label="Modo"
              value={t.dark ? 'dark' : 'light'}
              onChange={(v) => tweaks.setTweak('dark', v === 'dark')}
              options={[
                { label: 'Claro', value: 'light' },
                { label: 'Escuro', value: 'dark' },
              ]}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
};

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