/* Tweaks island — drives the poster's CSS vars + classes */
const POSTER_TWEAKS = {
  "grain": 0.06,
  "marquee": true,
  "spin": true,
  "shadows": "on"
};

function applyPosterTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty("--grain", String(t.grain));
  document.body.classList.toggle("no-marquee", !t.marquee);
  document.body.classList.toggle("no-spin", !t.spin);
  document.body.classList.toggle("flat-shadows", t.shadows === "off");
}

function PosterTweaks() {
  const [t, setTweak] = useTweaks(POSTER_TWEAKS);
  React.useEffect(() => { applyPosterTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Texture" />
      <TweakSlider label="Paper grain" value={t.grain} min={0} max={0.16} step={0.01}
        onChange={(v) => setTweak("grain", v)} />
      <TweakRadio label="Drop shadows" value={t.shadows} options={["on", "off"]}
        onChange={(v) => setTweak("shadows", v)} />
      <TweakSection label="Motion" />
      <TweakToggle label="Marquee scroll" value={t.marquee}
        onChange={(v) => setTweak("marquee", v)} />
      <TweakToggle label="Spin photo ring" value={t.spin}
        onChange={(v) => setTweak("spin", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<PosterTweaks />);