/* AVIO — Tweaks panel app (index.html only).
   Lets you live-adjust the accent pill and headline highlight colors.
   Applies changes by overriding CSS custom properties. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "pillBg": "#E8FF00",
  "slabBg": "#62FF2A"
}/*EDITMODE-END*/;

const PILL_BORDER = { "#E8FF00": "#c7db00", "#62FF2A": "#4ed81a", "#0802A3": "#0802A3" };
const isDarkSwatch = (hex) => String(hex).toLowerCase() === "#0802a3";

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    // Status pill ("Active in 195 countries", etc.)
    r.setProperty("--pill-bg", t.pillBg);
    r.setProperty("--pill-ink", isDarkSwatch(t.pillBg) ? "#ffffff" : "#0a0a14");
    r.setProperty("--pill-border", PILL_BORDER[t.pillBg] || t.pillBg);
    // Headline highlight slab
    r.setProperty("--slab-bg", t.slabBg);
    r.setProperty("--slab-ink", isDarkSwatch(t.slabBg) ? "#ffffff" : "#0a0a14");
  }, [t.pillBg, t.slabBg]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accents" />
      <TweakColor
        label="Status pill"
        value={t.pillBg}
        options={["#E8FF00", "#62FF2A", "#0802A3"]}
        onChange={(v) => setTweak("pillBg", v)}
      />
      <TweakColor
        label="Headline highlight"
        value={t.slabBg}
        options={["#62FF2A", "#E8FF00", "#0802A3"]}
        onChange={(v) => setTweak("slabBg", v)}
      />
    </TweaksPanel>
  );
}

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