// Tweaks customizados — paleta, tipografia, grão, layout
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#991004", "#f2eadb", "#2e2d2d"],
  "displayFont": "Anton",
  "grain": 0.18,
  "heroLayout": "split",
  "foundersVariant": "board"
}/*EDITMODE-END*/;

const PALETTES = [
  ["#991004", "#f2eadb", "#2e2d2d"],
  ["#B91819", "#f2eadb", "#2e2d2d"],
  ["#7A0A0A", "#ece4d2", "#1f1e1d"],
  ["#C73E1D", "#efe6d4", "#2e2d2d"],
  ["#374454", "#f2eadb", "#2e2d2d"],
];

const FONTS = ["Anton", "Bebas Neue", "Archivo Black", "Big Shoulders Display"];
const HERO_LAYOUTS = ["split", "stacked", "marquee"];
const FOUNDERS_VARIANTS = ["carousel", "board", "parallax"];

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--color-red", t.palette[0]);
    r.style.setProperty("--color-sand", t.palette[1]);
    r.style.setProperty("--color-dark", t.palette[2]);
    r.style.setProperty("--grain-opacity", t.grain);
    r.style.setProperty("--font-display", `"${t.displayFont}", "Anton", Impact, sans-serif`);
    document.body.dataset.heroLayout = t.heroLayout;
    document.body.dataset.foundersVariant = t.foundersVariant || "board";
  }, [t]);

  React.useEffect(() => {
    if (t.displayFont !== "Anton") {
      const id = "tweak-font-" + t.displayFont.replace(/\s/g, "-");
      if (!document.getElementById(id)) {
        const link = document.createElement("link");
        link.id = id;
        link.rel = "stylesheet";
        link.href = `https://fonts.googleapis.com/css2?family=${t.displayFont.replace(/\s/g,"+")}:wght@400;700&display=swap`;
        document.head.appendChild(link);
      }
    }
  }, [t.displayFont]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Paleta" />
      <TweakColor label="Cores" value={t.palette} options={PALETTES}
        onChange={v => setTweak("palette", v)} />

      <TweakSection label="Tipografia" />
      <TweakSelect label="Display" value={t.displayFont} options={FONTS}
        onChange={v => setTweak("displayFont", v)} />

      <TweakSection label="Textura" />
      <TweakSlider label="Grão" value={t.grain} min={0} max={0.45} step={0.01}
        onChange={v => setTweak("grain", v)} />

      <TweakSection label="Hero (home)" />
      <TweakSelect label="Layout" value={t.heroLayout} options={HERO_LAYOUTS}
        onChange={v => setTweak("heroLayout", v)} />

      <TweakSection label="Idealizadores (about)" />
      <TweakRadio label="Variante" value={t.foundersVariant || "Board"} options={FOUNDERS_VARIANTS}
        onChange={v => setTweak("foundersVariant", v)} />
    </TweaksPanel>
  );
}

window.MaraTweaks = MaraTweaks;