/* Baby's Day In — Tweaks
   Renders a small panel via TweaksPanel and applies values to CSS vars/DOM. */

const { useEffect } = React;

const DEFAULTS = (typeof window !== "undefined" && window.__BDI_TWEAKS_DEFAULTS) || {
  hero_headline: "You got this. And we got you.",
  hero_sub: "A baby monitor and care-tracking app that doesn't replace your instinct — it backs it up. Quietly, calmly, all day long.",
  gradient_intensity: "soft",
  cta_palette: ["#C17ADB", "#E8A042"],
  soothe_intensity: "subtle"
};

// Gradient intensity → page background overrides
const GRADIENTS = {
  soft:    { pink: "#FFE8F0", lavender: "#E8E4F8" },
  medium:  { pink: "#FFD7E5", lavender: "#DCD6F2" },
  bold:    { pink: "#FFC5D8", lavender: "#CFC6EE" }
};

// Soothe (dark) intensity
const SOOTHE = {
  subtle:  "#0E0C24",
  deeper:  "#08061A",
  airy:    "#1A1840"
};

function applyTweaks(t) {
  const root = document.documentElement;

  // Hero copy — wrap second sentence in <em>
  const heroH = document.getElementById("heroHeadline");
  const heroP = document.getElementById("heroSub");
  if (heroH) {
    const txt = (t.hero_headline || "").trim();
    const idx = txt.indexOf(".");
    if (idx > 0 && idx < txt.length - 1) {
      heroH.innerHTML = `${escapeHtml(txt.slice(0, idx + 1))} <em>${escapeHtml(txt.slice(idx + 1).trim())}</em>`;
    } else {
      heroH.textContent = txt;
    }
  }
  if (heroP) heroP.textContent = t.hero_sub || "";

  // Page gradient
  const g = GRADIENTS[t.gradient_intensity] || GRADIENTS.soft;
  root.style.setProperty("--bg-pink", g.pink);
  root.style.setProperty("--bg-lavender", g.lavender);

  // CTA palette (array of 2 hex)
  const cta = Array.isArray(t.cta_palette) ? t.cta_palette : DEFAULTS.cta_palette;
  root.style.setProperty("--cta-start", cta[0]);
  root.style.setProperty("--cta-end", cta[1] || cta[0]);

  // Soothe intensity
  const sBg = SOOTHE[t.soothe_intensity] || SOOTHE.subtle;
  root.style.setProperty("--dark-bg", sBg);
}

function escapeHtml(s) {
  return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
}

function BDITweaks() {
  const [t, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakText
        label="Headline"
        value={t.hero_headline}
        onChange={v => setTweak("hero_headline", v)}
      />
      <TweakText
        label="Sub"
        value={t.hero_sub}
        onChange={v => setTweak("hero_sub", v)}
      />

      <TweakSection label="Colour story" />
      <TweakRadio
        label="Day gradient"
        value={t.gradient_intensity}
        options={["soft", "medium", "bold"]}
        onChange={v => setTweak("gradient_intensity", v)}
      />
      <TweakRadio
        label="Night (soothe)"
        value={t.soothe_intensity}
        options={["subtle", "deeper", "airy"]}
        onChange={v => setTweak("soothe_intensity", v)}
      />

      <TweakSection label="CTA gradient" />
      <TweakColor
        label="Style"
        value={t.cta_palette}
        options={[
          ["#C17ADB", "#E8A042"],
          ["#9B6FE0", "#5D52B0"],
          ["#E87A8A", "#E8A042"],
          ["#2A2055", "#1A1040"]
        ]}
        onChange={v => setTweak("cta_palette", v)}
      />
    </TweaksPanel>
  );
}

// Apply defaults immediately so the initial render matches stored state
applyTweaks(DEFAULTS);

const tweakRoot = document.createElement("div");
tweakRoot.id = "__bdi_tweaks_root";
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<BDITweaks />);