// tweaks.jsx — Tweaks panel for the Mila landing page
// Requires React + tweaks-panel.jsx loaded first.

const MilaTweaks = (() => {
  const { useEffect } = React;

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#FF5A1F",
    "bubble": "#0A84FF",
    "chatSpeed": 1
  }/*EDITMODE-END*/;

  // Curated accent ramps (hover / press / soft / fg) per option
  const RAMPS = {
    "#FF5A1F": { hover: "#E04510", press: "#B8350B", soft: "#FFF4EE", fg: "#FFF4EE" }, // ADP orange
    "#F5A623": { hover: "#D98E0B", press: "#B27307", soft: "#FFF4DC", fg: "#1B1913" }, // amber
    "#1F9D55": { hover: "#167A40", press: "#0E5A2D", soft: "#E8F6EE", fg: "#FFFFFF" }, // bull green
  };

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

    useEffect(() => {
      const root = document.documentElement.style;
      const ramp = RAMPS[t.accent] || RAMPS["#FF5A1F"];
      root.setProperty("--mila-accent", t.accent);
      root.setProperty("--mila-accent-hover", ramp.hover);
      root.setProperty("--mila-accent-press", ramp.press);
      root.setProperty("--mila-accent-soft", ramp.soft);
      root.setProperty("--mila-accent-fg", ramp.fg);
      root.setProperty("--mila-bubble", t.bubble);
      root.setProperty("--mila-chat-speed", String(t.chatSpeed));
    }, [t]);

    return (
      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
          options={["#FF5A1F", "#F5A623", "#1F9D55"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakColor label="Sent bubbles" value={t.bubble}
          options={["#0A84FF", "#FF5A1F", "#1B1913"]}
          onChange={(v) => setTweak("bubble", v)} />
        <TweakSection label="Motion" />
        <TweakSlider label="Chat speed" value={t.chatSpeed} min={0.5} max={2.5} step={0.25} unit="x"
          onChange={(v) => setTweak("chatSpeed", v)} />
      </TweaksPanel>
    );
  }

  return App;
})();

const tweaksRoot = document.getElementById("tweaks-root");
if (tweaksRoot) ReactDOM.createRoot(tweaksRoot).render(<MilaTweaks />);