// Migi Academy — Tweaks panel (applies CSS variables to :root)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentPair": ["#6C4DFF", "#FF4F9A"],
  "radius": 24,
  "glow": true
}/*EDITMODE-END*/;

function MigiTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    const pair = Array.isArray(t.accentPair) ? t.accentPair : ["#6C4DFF", "#FF4F9A"];
    r.setProperty('--accent', pair[0]);
    r.setProperty('--accent-2', pair[1]);
    r.setProperty('--radius', t.radius + 'px');
    r.setProperty('--glow-opacity', t.glow ? '1' : '0');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent gradient"
        value={t.accentPair}
        options={[
          ["#6C4DFF", "#FF4F9A"],
          ["#6C4DFF", "#3B82F6"],
          ["#FF4F9A", "#FF9800"],
          ["#3B82F6", "#4CAF50"]
        ]}
        onChange={(v) => setTweak('accentPair', v)}
      />
      <TweakSection label="Surface" />
      <TweakSlider label="Corner radius" value={t.radius} min={12} max={36} step={2} unit="px"
        onChange={(v) => setTweak('radius', v)} />
      <TweakToggle label="Glow effects" value={t.glow}
        onChange={(v) => setTweak('glow', v)} />
    </TweaksPanel>
  );
}

const migiTweaksRoot = document.createElement('div');
document.body.appendChild(migiTweaksRoot);
ReactDOM.createRoot(migiTweaksRoot).render(<MigiTweaks />);