/* SiteTweaks.jsx — Tweaks panel: weave-texture theming */

const SITE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroWeave": 90,
  "darkWeave": 45,
  "oaWeave": 40,
  "paperWeave": 80,
  "selvedgeBand": true
}/*EDITMODE-END*/;

function SiteTweaks() {
  const [t, setTweak] = useTweaks(SITE_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const s = document.documentElement.style;
    s.setProperty('--weave-hero', String(t.heroWeave / 100));
    s.setProperty('--weave-dark', String(t.darkWeave / 100));
    s.setProperty('--weave-oa', String(t.oaWeave / 100));
    s.setProperty('--weave-paper', String(t.paperWeave / 100));
    document.body.classList.toggle('no-band', !t.selvedgeBand);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Weave texture" />
      <TweakSlider label="Hero" value={t.heroWeave} min={0} max={100} unit="%"
                   onChange={(v) => setTweak('heroWeave', v)} />
      <TweakSlider label="Praise (dark)" value={t.darkWeave} min={0} max={100} unit="%"
                   onChange={(v) => setTweak('darkWeave', v)} />
      <TweakSlider label="Open access" value={t.oaWeave} min={0} max={100} unit="%"
                   onChange={(v) => setTweak('oaWeave', v)} />
      <TweakSlider label="Paper" value={t.paperWeave} min={0} max={100} unit="%"
                   onChange={(v) => setTweak('paperWeave', v)} />
      <TweakToggle label="Selvedge band" value={t.selvedgeBand}
                   onChange={(v) => setTweak('selvedgeBand', v)} />
    </TweaksPanel>
  );
}

window.SiteTweaks = SiteTweaks;