// YAE Services — Tweaks panel
// Color treatment + accent intensity, applied via CSS variables on :root.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": "orange",
  "accentIntensity": 100,
  "darkHero": true
}/*EDITMODE-END*/;

const ACCENTS = {
  orange:    { base: "#E8542A", soft: "#F26A3F", label: "Orange (logo)" },
  plum:      { base: "#7A3CA0", soft: "#9555BD", label: "Plum" },
  electric:  { base: "#2A6FE8", soft: "#3F87F2", label: "Electric blue" },
  sage:      { base: "#5C9A6A", soft: "#7AB587", label: "Sage" },
  crimson:   { base: "#D03B3B", soft: "#E25555", label: "Crimson" }
};

function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }

function applyTweaks(t) {
  const a = ACCENTS[t.accentHue] || ACCENTS.orange;
  const k = clamp(t.accentIntensity, 30, 130) / 100;
  // mix accent toward neutral as intensity decreases (visual feel)
  const root = document.documentElement;
  root.style.setProperty('--accent', a.base);
  root.style.setProperty('--accent-soft', a.soft);
  root.style.setProperty('--orange', a.base);
  root.style.setProperty('--orange-soft', a.soft);
  // emulate intensity by adjusting an accent-driven CSS hint
  root.style.setProperty('--accent-intensity', k.toFixed(2));
  // hero treatment toggle (only affects pages that opt in via .hero-toggle)
  document.documentElement.dataset.hero = t.darkHero ? 'dark' : 'light';
}

function YaeTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent color">
        <TweakSelect
          label="Hue"
          value={tweaks.accentHue}
          onChange={(v) => setTweak('accentHue', v)}
          options={Object.keys(ACCENTS).map(k => ({ value: k, label: ACCENTS[k].label }))}
        />
        <TweakSlider
          label="Intensity"
          min={50} max={130} step={5}
          value={tweaks.accentIntensity}
          onChange={(v) => setTweak('accentIntensity', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const _yaeRoot = document.createElement('div');
_yaeRoot.id = 'yae-tweaks-root';
document.body.appendChild(_yaeRoot);
ReactDOM.createRoot(_yaeRoot).render(<YaeTweaks />);