/* Agent33 — Tweaks wiring (mounts the panel, applies tweaks to the page) */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "cinema",
  "accent": ["#bf2a2c", "#d8413f"],
  "headfont": "slab",
  "grain": true
}/*EDITMODE-END*/;

const HERO_OPTS = [
  { value: "dossier", label: "Dossier" },
  { value: "signal", label: "Signal" },
  { value: "cinema", label: "Cinema" }
];
const HEADFONT_OPTS = [
  { value: "slab", label: "Slab" },
  { value: "typewriter", label: "Typewriter" }
];

const ACCENTS = [
  ["#bf2a2c", "#d8413f"], // brick red (logo)
  ["#c01438", "#e0344f"], // crimson
  ["#c8791a", "#e29a36"], // amber
  ["#2f8f4e", "#3fae62"]  // tactical green
];

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

  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-hero", t.hero);
    r.setAttribute("data-headfont", t.headfont);
    const a = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent];
    r.style.setProperty("--accent", a[0]);
    r.style.setProperty("--accent-2", a[1] || a[0]);
    r.style.setProperty("--grain", t.grain ? "1" : "0");
  }, [t.hero, t.headfont, t.accent, t.grain]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero direction" />
      <TweakRadio
        label="Layout"
        value={t.hero}
        options={HERO_OPTS}
        onChange={(v) => setTweak("hero", v)}
      />

      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakRadio
        label="Heading type"
        value={t.headfont}
        options={HEADFONT_OPTS}
        onChange={(v) => setTweak("headfont", v)}
      />
      <TweakToggle
        label="Film grain"
        value={t.grain}
        onChange={(v) => setTweak("grain", v)}
      />
    </TweaksPanel>
  );
}

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