// tweaks-app.jsx — drives the SHIN homepage CSS variables.
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroOverlay": 0.74,
  "accentIntensity": 1.0,
  "density": 1.0
}/*EDITMODE-END*/;

// brand purple #2E008B ≈ hsl(265,100%,27%); scale toward muted / electric
function accentFor(i){
  // i: 0.4 (muted) .. 1.4 (electric)
  const t = (i - 0.4) / 1.0;              // 0..1
  const h = 266 - t * 4;                  // 266 -> 262
  const s = 70 + t * 30;                  // 70 -> 100
  const l = 23 + t * 18;                  // 23 -> 41
  return `hsl(${h.toFixed(1)} ${s.toFixed(0)}% ${l.toFixed(0)}%)`;
}

function apply(t){
  const r = document.documentElement.style;
  r.setProperty('--hero-overlay', String(t.heroOverlay));
  r.setProperty('--accent-strength', String(t.accentIntensity));
  r.setProperty('--accent', accentFor(t.accentIntensity));
  r.setProperty('--density', String(t.density));
}

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { apply(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakSlider label="Overlay darkness" value={t.heroOverlay} min={0.3} max={0.95} step={0.01}
                   onChange={(v) => setTweak('heroOverlay', v)} />
      <TweakSection label="Brand" />
      <TweakSlider label="Accent intensity" value={t.accentIntensity} min={0.4} max={1.4} step={0.05}
                   onChange={(v) => setTweak('accentIntensity', v)} />
      <TweakSection label="Layout" />
      <TweakSlider label="Section density" value={t.density} min={0.78} max={1.3} step={0.02}
                   onChange={(v) => setTweak('density', v)} />
    </TweaksPanel>
  );
}

// apply defaults immediately so look is right before any interaction
apply(TWEAK_DEFAULTS);
ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);