// Anryx — Tweaks panel (single primary-blue hue control + extras)
const { useState, useEffect } = React;

function AnryxTweaksApp() {
  const initial = (window.ANRYX_getTweaks && window.ANRYX_getTweaks()) || {};
  const [tweaks, setTweaks] = useState({
    primaryHue: initial.primaryHue ?? 211,
  });

  useEffect(() => {
    Object.entries(tweaks).forEach(([k, v]) => {
      if (window.ANRYX_setTweak) window.ANRYX_setTweak(k, v);
    });
  }, [tweaks]);

  const setT = (k, v) => setTweaks((p) => ({ ...p, [k]: v }));

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Primary Blue Hue">
        <TweakSlider
          label="Hue"
          min={205}
          max={225}
          step={1}
          value={tweaks.primaryHue}
          onChange={(v) => setT("primaryHue", v)}
          formatValue={(v) => (v <= 210 ? `${v}° · warmer navy` : v >= 220 ? `${v}° · cooler azure` : `${v}°`)}
        />
        <p style={{ fontSize: 11, color: "#6B7280", margin: 0, lineHeight: 1.5 }}>
          Drag to shift the primary blue from a warmer navy toward a cooler azure. Affects accents and CTAs site-wide.
        </p>
      </TweakSection>
      <TweakSection title="Reset">
        <TweakButton onClick={() => setTweaks({ primaryHue: 211 })}>
          Reset to default
        </TweakButton>
      </TweakSection>
    </TweaksPanel>
  );
}

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