/* NiLa — Tweaks app. Drives CSS variables on :root; site itself is plain HTML. */
const { useEffect } = React;

const NILA_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headingScale": 1,
  "headingWeight": "Regular",
  "bodySize": 18,
  "sectionRhythm": 1,
  "accent": "#5F7A6B",
  "italicEmphasis": true
}/*EDITMODE-END*/;

const WEIGHT_MAP = { "Light": 400, "Regular": 500, "Medium": 600 };

function NilaTweaks() {
  const [t, setTweak] = useTweaks(NILA_TWEAK_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--display-scale", String(t.headingScale));
    r.style.setProperty("--heading-weight", String(WEIGHT_MAP[t.headingWeight] || 500));
    r.style.setProperty("--body-size", t.bodySize + "px");
    r.style.setProperty("--section-rhythm", String(t.sectionRhythm));
    r.style.setProperty("--accent", t.accent);
    document.body.classList.toggle("no-emph", !t.italicEmphasis);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typography" />
      <TweakSlider label="Heading scale" value={t.headingScale} min={0.85} max={1.18} step={0.01}
                   onChange={(v) => setTweak('headingScale', v)} />
      <TweakRadio label="Heading weight" value={t.headingWeight}
                  options={['Light', 'Regular', 'Medium']}
                  onChange={(v) => setTweak('headingWeight', v)} />
      <TweakSlider label="Body size" value={t.bodySize} min={16} max={20} step={0.5} unit="px"
                   onChange={(v) => setTweak('bodySize', v)} />

      <TweakSection label="Spacing & rhythm" />
      <TweakSlider label="Section spacing" value={t.sectionRhythm} min={0.8} max={1.3} step={0.01}
                   onChange={(v) => setTweak('sectionRhythm', v)} />

      <TweakSection label="Accent & emphasis" />
      <TweakColor label="Button accent" value={t.accent}
                  options={['#5F7A6B', '#37485F', '#0F1113']}
                  onChange={(v) => setTweak('accent', v)} />
      <TweakToggle label="Italic emphasis (hero)" value={t.italicEmphasis}
                   onChange={(v) => setTweak('italicEmphasis', v)} />
    </TweaksPanel>
  );
}

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