// Tweaks panel — accent gradient + headline copy + density
function CommitTweaks() {
  const [t, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS || {
    palette: ["#b8e23a", "#e8c829", "#ff7a1c"],
    headline: "default",
    grid: false,
    headlineSerif: true,
  });

  // Apply palette to CSS vars
  React.useEffect(() => {
    const [a, b, c] = t.palette || ["#b8e23a", "#e8c829", "#ff7a1c"];
    document.documentElement.style.setProperty("--grad-start", a);
    document.documentElement.style.setProperty("--grad-mid", b);
    document.documentElement.style.setProperty("--grad-end", c);
    document.documentElement.style.setProperty(
      "--grad",
      `linear-gradient(95deg, ${a}, ${b} 45%, ${c})`
    );
  }, [t.palette]);

  React.useEffect(() => {
    const grid = document.querySelector(".hero-grid-bg");
    if (grid) grid.style.opacity = t.grid ? "0.55" : "0.35";
  }, [t.grid]);

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakColor = window.TweakColor;
  const TweakToggle = window.TweakToggle;
  const TweakRadio = window.TweakRadio;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Gradiente">
        <TweakColor
          label="Paleta"
          value={t.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            ["#b8e23a", "#e8c829", "#ff7a1c"],
            ["#34d399", "#22d3ee", "#3b82f6"],
            ["#f472b6", "#a78bfa", "#60a5fa"],
            ["#fde047", "#fb923c", "#ef4444"],
            ["#f3f0e8", "#a8a89c", "#4a4a47"],
          ]}
        />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio
          label="Estilo de headline"
          value={t.headline}
          onChange={(v) => setTweak("headline", v)}
          options={[
            { value: "default", label: "Default" },
            { value: "loud", label: "Más grande" },
            { value: "tight", label: "Más compacto" },
          ]}
        />
        <TweakToggle
          label="Grid de fondo más visible"
          value={t.grid}
          onChange={(v) => setTweak("grid", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.CommitTweaks = CommitTweaks;