const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 78,
  "navyDepth": 30
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    const goldL = 60 - (tweaks.navyDepth - 30) * 0.3;
    root.style.setProperty('--gold', `oklch(${goldL}% 0.10 ${tweaks.accentHue})`);
    root.style.setProperty('--gold-soft', `oklch(${goldL + 14}% 0.09 ${tweaks.accentHue})`);
    const navyL = tweaks.navyDepth;
    root.style.setProperty('--navy', `oklch(${navyL}% 0.06 250)`);
    root.style.setProperty('--navy-deep', `oklch(${Math.max(navyL - 8, 12)}% 0.05 250)`);
    root.style.setProperty('--navy-soft', `oklch(${navyL + 10}% 0.06 250)`);
  }, [tweaks.accentHue, tweaks.navyDepth]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Trust />
        <Leistungen />
        <Partners />
        <UeberUns />
        <Rechner />
        <CTA />
      </main>
      <Footer />
      <ContactModal />

      <TweaksPanel title="Tweaks · Hell">
        <TweakSection title="Farbpalette">
          <TweakSlider label="Gold-Hue" value={tweaks.accentHue} min={50} max={110} step={1} onChange={v=>setTweak('accentHue', v)} />
          <TweakSlider label="Navy-Helligkeit" value={tweaks.navyDepth} min={20} max={45} step={1} onChange={v=>setTweak('navyDepth', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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