// Tweaks for the dark Molten + sky-blue main site.

const { useEffect } = React;

function TweaksApp() {
  const [t, setT] = useTweaks(window.__tweakDefaults);
  useEffect(() => { window.__applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Signature">
        <TweakToggle
          label="Ember rule under hero"
          value={t.showEmberRule}
          onChange={(v) => setT({ showEmberRule: v })}
        />
        <TweakToggle
          label="Pulsing status dot"
          value={t.showStatusDot}
          onChange={(v) => setT({ showStatusDot: v })}
        />
      </TweakSection>

      <TweakSection title="Accent">
        <TweakSlider
          label="Hue (sky → cyan → violet)"
          min={180} max={300} step={1}
          value={t.accentHue}
          onChange={(v) => setT({ accentHue: v })}
        />
        <TweakSlider
          label="Saturation"
          min={0.04} max={0.22} step={0.01}
          value={t.accentChroma}
          onChange={(v) => setT({ accentChroma: v })}
        />
      </TweakSection>

      <TweakSection title="Rhythm">
        <TweakSlider
          label="Column width"
          min={600} max={860} step={10}
          value={t.columnWidth}
          onChange={(v) => setT({ columnWidth: v })}
        />
        <TweakSlider
          label="Companions opacity"
          min={0.55} max={1} step={0.01}
          value={t.tierMute}
          onChange={(v) => setT({ tierMute: v })}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.createElement("div");
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<TweaksApp />);