// tweaks-app.jsx — Tweaks panel for Meus Links
// Three expressive controls that reshape the feel:
//   1. Paleta    — Ivory / Midnight / Blush (whole color world)
//   2. Serifa    — Bodoni / Playfair / Cormorant (display voice)
//   3. Cards     — Editorial / Capa (composition rhythm)

const TWEAK_DEFAULTS = {
  palette: "midnight",
  serif: "playfair",
  cards: "editorial",
};

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

  // Apply tweaks to <body> as data-* attributes so CSS can switch.
  React.useEffect(() => {
    const b = document.body;
    if (t.palette && t.palette !== "ivory") b.setAttribute("data-palette", t.palette);
    else b.removeAttribute("data-palette");
    if (t.serif && t.serif !== "bodoni") b.setAttribute("data-serif", t.serif);
    else b.removeAttribute("data-serif");
    if (t.cards && t.cards !== "editorial") b.setAttribute("data-cards", t.cards);
    else b.removeAttribute("data-cards");
  }, [t.palette, t.serif, t.cards]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Paleta" />
      <TweakRadio
        label="Mood"
        value={t.palette}
        options={[
          { value: "ivory", label: "Ivory" },
          { value: "midnight", label: "Midnight" },
          { value: "blush", label: "Blush" },
        ]}
        onChange={(v) => setTweak("palette", v)}
      />

      <TweakSection label="Tipografia" />
      <TweakRadio
        label="Serifa"
        value={t.serif}
        options={[
          { value: "bodoni", label: "Bodoni" },
          { value: "playfair", label: "Playfair" },
          { value: "cormorant", label: "Cormorant" },
        ]}
        onChange={(v) => setTweak("serif", v)}
      />

      <TweakSection label="Composição" />
      <TweakRadio
        label="Cards"
        value={t.cards}
        options={[
          { value: "editorial", label: "Editorial" },
          { value: "capa", label: "Capa" },
        ]}
        onChange={(v) => setTweak("cards", v)}
      />
    </TweaksPanel>
  );
}

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