// ─── App — assemble everything + tweaks ─────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "marksShow": true,
  "marksColor": "#D4E04A",
  "marksBleed": 0.5,
  "marksSize": 380,
  "accent": "#D4E04A"
}/*EDITMODE-END*/;

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

  // Apply accent across the page via CSS var
  React.useEffect(() => {
    document.documentElement.style.setProperty('--eso-accent', t.accent);
  }, [t.accent]);

  useRevealOnScroll();

  return (
    <React.Fragment>
      <NavBar />
      <Hero
        marksShow={t.marksShow}
        marksColor={t.marksColor}
        marksBleed={t.marksBleed}
        marksSize={t.marksSize}
      />
      <Filosofie />
      <Pijlers />
      <Coaches />
      <Programma />
      <Testimonial />
      <WatKrijgt />
      <FAQ />
      <Inschrijven />
      <Footer />

      <TweaksPanel title="Site Tweaks">
        <TweakSection label="Accent kleur" />
        <TweakColor label="Accent" value={t.accent}
                    onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label="Snel kiezen"
                    value={t.accent}
                    options={[
                      { label: 'Lime', value: '#D4E04A' },
                      { label: 'Rood', value: '#D24B3F' },
                      { label: 'Cream', value: '#FBF7EC' },
                    ]}
                    onChange={(v) => setTweak('accent', v)} />

        <TweakSection label="Bleed marks (¡ + !) in hero" />
        <TweakToggle label="Toon marks" value={t.marksShow}
                     onChange={(v) => setTweak('marksShow', v)} />
        <TweakColor label="Mark color" value={t.marksColor}
                    onChange={(v) => setTweak('marksColor', v)} />
        <TweakSlider label="Bleed off page" value={t.marksBleed}
                     min={0} max={1} step={0.05}
                     onChange={(v) => setTweak('marksBleed', v)} />
        <TweakSlider label="Mark size" value={t.marksSize}
                     min={180} max={560} step={10} unit="px"
                     onChange={(v) => setTweak('marksSize', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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