// Flowpark homepage — Tweaks app
// Applies tweak values as CSS variables on :root. Panel only visible when Tweaks mode is on.

const FLOWPARK_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "bandColor": "#003c33",
  "accentColor": "#ff7759",
  "heroSize": 92
}/*EDITMODE-END*/;

function FlowparkTweaksApp() {
  const [t, setTweak] = useTweaks(FLOWPARK_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--band', t.bandColor);
    root.style.setProperty('--accent', t.accentColor);
    root.style.setProperty('--hero-size', t.heroSize + 'px');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Color" />
      <TweakColor
        label="Dark band"
        value={t.bandColor}
        options={['#003c33', '#071829', '#17171c']}
        onChange={(v) => setTweak('bandColor', v)}
      />
      <TweakColor
        label="Accent"
        value={t.accentColor}
        options={['#ff7759', '#1863dc', '#edfce9']}
        onChange={(v) => setTweak('accentColor', v)}
      />
      <TweakSection label="Type" />
      <TweakSlider
        label="Hero size"
        value={t.heroSize}
        min={72}
        max={112}
        step={2}
        unit="px"
        onChange={(v) => setTweak('heroSize', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<FlowparkTweaksApp />);