/* tweaks-app.jsx — accent-color auditor (React island)
   Mounts only the Tweaks panel; rewrites the accent CSS variables live so
   the whole vanilla page re-themes. Default = current cobalt. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0F7A52"
}/*EDITMODE-END*/;

// each accent + its darker hover variant
const ACCENT_DARK = {
  "#1E33DC": "#1626AE", // Cobalt (current)
  "#2A52FF": "#1E3CCC", // Electric blue
  "#0F7A52": "#0A5C3D", // Emerald
  "#E5481F": "#BE3814", // Vermilion
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--cobalt", t.accent);
    root.style.setProperty("--cobalt-d", ACCENT_DARK[t.accent] || t.accent);
  }, [t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#0F7A52", "#1E33DC", "#2A52FF", "#E5481F"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <p style={{ fontSize: "11px", lineHeight: 1.5, opacity: 0.6, margin: "10px 2px 2px" }}>Emerald · Cobalt · Electric · Vermilion. The orange dot in the nav stays as a fixed warm accent.</p>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksApp />);