/* app.jsx — SHIN homepage tweak controls
   Wires three sliders to CSS custom properties on :root:
   - hero background intensity  -> --gp-grid, --gp-plane
   - accent-color usage         -> --accent-opacity
   - section density            -> --pad-scale
*/

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroIntensity": 70,
  "accentUsage": 50,
  "density": 100
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    // hero intensity 0..100 -> grid 0.25..1.7, planes 0.2..1.6
    const i = t.heroIntensity / 100;
    r.setProperty('--gp-grid',  (0.25 + i * 1.45).toFixed(3));
    r.setProperty('--gp-plane', (0.20 + i * 1.40).toFixed(3));
    // accent usage 0..100 -> opacity 0..1
    r.setProperty('--accent-opacity', (t.accentUsage / 100).toFixed(3));
    // density 60..140 -> pad-scale 0.6..1.4
    r.setProperty('--pad-scale', (t.density / 100).toFixed(3));
  }, [t.heroIntensity, t.accentUsage, t.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakSlider label="Background intensity" value={t.heroIntensity} min={0} max={100} unit="%"
        onChange={(v) => setTweak('heroIntensity', v)} />

      <TweakSection label="Accent colour" />
      <TweakSlider label="Accent usage" value={t.accentUsage} min={0} max={100} unit="%"
        onChange={(v) => setTweak('accentUsage', v)} />

      <TweakSection label="Layout" />
      <TweakSlider label="Section density" value={t.density} min={60} max={140} unit="%"
        onChange={(v) => setTweak('density', v)} />
    </TweaksPanel>
  );
}

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