// Main app — Tweaks panel + render
const { useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sage",
  "density": "default",
  "heroVariant": "default"
}/*EDITMODE-END*/;

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

  useEffectApp(() => {
    document.documentElement.dataset.palette = tweaks.palette;
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.palette, tweaks.density]);

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <About />
      <Services />
      <Process />
      <Team />
      <Testimonials />
      <Gallery />
      <Pricing />
      <Location />
      <FAQ />
      <Booking />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Farbwelt">
          <TweakRadio label="Palette" value={tweaks.palette}
            options={[
              { value: 'sage', label: 'Sage' },
              { value: 'cream', label: 'Cream' },
              { value: 'forest', label: 'Forest' },
            ]}
            onChange={(v) => setTweak('palette', v)} />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio label="Dichte" value={tweaks.density}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'default', label: 'Standard' },
              { value: 'airy', label: 'Airy' },
            ]}
            onChange={(v) => setTweak('density', v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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