/* global React, ReactDOM */
const { useEffect: useEffectApp } = React;

function App() {
  // Tweaks
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(window.TWEAK_DEFAULTS) : [{}, () => {}];

  useEffectApp(() => {
    document.body.classList.toggle('theme-dark', tweaks.theme === 'dark');
  }, [tweaks.theme]);

  return (
    <>
      <window.Nav />
      <window.Hero />
      <window.Sobre />
      <window.Destinos />
      <window.Pasos />
      <window.Cotizar />
      <window.Testimonios />
      <window.FAQ />
      <window.IGBanner />
      <window.Footer />
      <window.WhatsAppFloat />

      {/* Tweaks panel */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Apariencia">
            <window.TweakRadio
              label="Modo"
              value={tweaks.theme}
              options={[{value: 'light', label: 'Claro'}, {value: 'dark', label: 'Oscuro'}]}
              onChange={(v) => setTweak('theme', v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

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