/* Tweaks para la landing — aplica cambios al DOM real (vanilla) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "calido",
  "brand": "#2D5F3F",
  "cta": "#E8883C",
  "headline": "Kit Maestro de Cocina 3-en-1",
  "showCountdown": true
}/*EDITMODE-END*/;

function darken(hex, amt) {
  const n = parseInt(hex.replace("#", ""), 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.max(0, Math.round(r * (1 - amt)));
  g = Math.max(0, Math.round(g * (1 - amt)));
  b = Math.max(0, Math.round(b * (1 - amt)));
  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
}

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--brand", t.brand);
    root.style.setProperty("--brand-700", darken(t.brand, 0.2));
    root.style.setProperty("--cta", t.cta);
    root.style.setProperty("--cta-700", darken(t.cta, 0.15));
  }, [t.brand, t.cta]);

  React.useEffect(() => {
    const h = document.querySelector(".bb-title");
    if (h) h.textContent = t.headline;
  }, [t.headline]);

  React.useEffect(() => {
    document.documentElement.dataset.theme = t.theme === "limpio" ? "" : t.theme;
  }, [t.theme]);

  React.useEffect(() => {
    const cd = document.getElementById("countdown");
    if (cd) cd.style.display = t.showCountdown ? "" : "none";
  }, [t.showCountdown]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Apariencia" />
      <TweakRadio
        label="Tema"
        value={t.theme}
        options={["calido", "limpio"]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakSection label="Color" />
      <TweakColor
        label="Marca"
        value={t.brand}
        options={["#2D5F3F", "#1A1A1A", "#1f5a6b", "#6b4a2b"]}
        onChange={(v) => setTweak("brand", v)}
      />
      <TweakColor
        label="Botón CTA"
        value={t.cta}
        options={["#E8883C", "#E0552F", "#2D7A4F", "#1A1A1A"]}
        onChange={(v) => setTweak("cta", v)}
      />
      <TweakSection label="Copy & urgencia" />
      <TweakText
        label="Título del producto"
        value={t.headline}
        onChange={(v) => setTweak("headline", v)}
      />
      <TweakToggle
        label="Mostrar contador"
        value={t.showCountdown}
        onChange={(v) => setTweak("showCountdown", v)}
      />
    </TweaksPanel>
  );
}

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