// tweaks-app.jsx — mounts the Tweaks panel and applies changes to the static page.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "naranja",
  "headline": "Crear tu primer producto digital gastronómico",
  "showCountdown": true,
  "askWhatsapp": true,
  "dark": true
}/*EDITMODE-END*/;

const ACCENTS = {
  azul:    { main: "#1877ff", second: "#4f9bff" },
  naranja: { main: "#ff4e05", second: "#ff7d45" }
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS.azul;
    root.style.setProperty("--accent", a.main);
    root.style.setProperty("--accent-2", a.second);
  }, [t.accent]);

  React.useEffect(() => {
    document.body.classList.toggle("light", !t.dark);
  }, [t.dark]);

  // Leave the authored headline (and any manual edits/deletions) untouched on load.
  // Only rewrite it when the user actively changes the "Titular" tweak.
  const headlineFirst = React.useRef(true);
  React.useEffect(() => {
    if (headlineFirst.current) { headlineFirst.current = false; return; }
    const el = document.querySelector("[data-hero-headline]");
    if (el) {
      const txt = (t.headline || "").trim();
      // re-wrap the last 3 words in the accent span for emphasis
      const words = txt.split(/\s+/);
      if (words.length > 3) {
        const head = words.slice(0, words.length - 3).join(" ");
        const tail = words.slice(words.length - 3).join(" ");
        el.innerHTML = head + ' <span class="hl">' + tail + "</span>";
      } else {
        el.textContent = txt;
      }
    }
  }, [t.headline]);

  React.useEffect(() => {
    document.querySelectorAll("[data-countdown-section]").forEach((s) => {
      s.style.display = t.showCountdown ? "" : "none";
    });
  }, [t.showCountdown]);

  React.useEffect(() => {
    document.querySelectorAll('[data-field="whatsapp"]').forEach((f) => {
      f.style.display = t.askWhatsapp ? "" : "none";
      const inp = f.querySelector("input");
      if (inp) inp.required = t.askWhatsapp;
    });
  }, [t.askWhatsapp]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marca" />
      <TweakRadio
        label="Color de acento"
        value={t.accent}
        options={["azul", "naranja"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakToggle
        label="Tema oscuro"
        value={t.dark}
        onChange={(v) => setTweak("dark", v)}
      />

      <TweakSection label="Hero" />
      <TweakText
        label="Titular"
        value={t.headline}
        onChange={(v) => setTweak("headline", v)}
      />

      <TweakSection label="Secciones" />
      <TweakToggle
        label="Mostrar cuenta regresiva"
        value={t.showCountdown}
        onChange={(v) => setTweak("showCountdown", v)}
      />
      <TweakToggle
        label="Pedir WhatsApp en el formulario"
        value={t.askWhatsapp}
        onChange={(v) => setTweak("askWhatsapp", v)}
      />
    </TweaksPanel>
  );
}

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