// Tweaks for the Borja Obeso site
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "warm-ochre",
  "headline_treatment": "italic-em",
  "show_strip": true,
  "price_floor": 5000
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  "warm-ochre":   { accent: "oklch(0.58 0.14 50)",  ink: "oklch(0.32 0.08 50)",  hi: "oklch(0.72 0.14 60)" },
  "deep-rust":    { accent: "oklch(0.52 0.16 30)",  ink: "oklch(0.30 0.10 30)",  hi: "oklch(0.68 0.16 35)" },
  "forest":       { accent: "oklch(0.50 0.10 150)", ink: "oklch(0.28 0.06 150)", hi: "oklch(0.66 0.12 150)" },
  "ink-only":     { accent: "#161513",              ink: "#161513",              hi: "#F4F1EC" },
  "electric":     { accent: "oklch(0.62 0.20 260)", ink: "oklch(0.36 0.14 260)", hi: "oklch(0.74 0.16 260)" }
};

function applyAccent(name) {
  const p = ACCENT_PRESETS[name] || ACCENT_PRESETS["warm-ochre"];
  const root = document.documentElement;
  root.style.setProperty("--accent", p.accent);
  root.style.setProperty("--accent-ink", p.ink);
  let style = document.getElementById("__accent-override");
  if (!style) {
    style = document.createElement("style");
    style.id = "__accent-override";
    document.head.appendChild(style);
  }
  style.textContent = `
    .final h2 em { color: ${p.hi} !important; }
    .final .cta-primary:hover { background: ${p.hi} !important; border-color: ${p.hi} !important; }
  `;
}

function applyHeadlineTreatment(mode) {
  let style = document.getElementById("__headline-override");
  if (!style) {
    style = document.createElement("style");
    style.id = "__headline-override";
    document.head.appendChild(style);
  }
  if (mode === "italic-em") {
    style.textContent = `
      .hero h1 em, .block h2 em, .post-card .post-body em, .stat .num em {
        font-style: italic; color: var(--accent-ink);
      }
    `;
  } else if (mode === "underline") {
    style.textContent = `
      .hero h1 em, .block h2 em {
        font-style: normal; color: var(--ink);
        background-image: linear-gradient(var(--accent), var(--accent));
        background-repeat: no-repeat;
        background-size: 100% 8px;
        background-position: 0 88%;
        padding: 0 4px;
      }
      .post-card .post-body em, .stat .num em { font-style: italic; color: var(--accent-ink); }
    `;
  } else if (mode === "all-ink") {
    style.textContent = `
      .hero h1 em, .block h2 em, .post-card .post-body em, .stat .num em {
        font-style: italic; color: var(--ink);
      }
    `;
  }
}

function applyStrip(show) {
  const strip = document.querySelector(".strip");
  if (strip) strip.style.display = show ? "" : "none";
}

function applyPrice(p) {
  const v = document.querySelector(".price-card .pc-v");
  if (v) v.innerHTML = `<em>$${p.toLocaleString()}</em>`;
  // Only update the final CTA's fineprint with price; keep hero copy soft.
  const finalFp = document.querySelector(".final .cta-fineprint");
  if (finalFp) finalFp.textContent = `Sprints start at $${p.toLocaleString()}. Two-week turnaround.`;
}

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyAccent(tweaks.accent); }, [tweaks.accent]);
  useEffect(() => { applyHeadlineTreatment(tweaks.headline_treatment); }, [tweaks.headline_treatment]);
  useEffect(() => { applyStrip(tweaks.show_strip); }, [tweaks.show_strip]);
  useEffect(() => { applyPrice(tweaks.price_floor); }, [tweaks.price_floor]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Accent color" />
      <window.TweakRadio
        label="Hue"
        value={tweaks.accent}
        onChange={(v) => setTweak("accent", v)}
        options={[
          { label: "Ochre",  value: "warm-ochre" },
          { label: "Rust",   value: "deep-rust" },
          { label: "Forest", value: "forest" },
          { label: "Ink",    value: "ink-only" },
          { label: "Blue",   value: "electric" }
        ]}
      />

      <window.TweakSection label="Headline treatment" />
      <window.TweakRadio
        label="Style"
        value={tweaks.headline_treatment}
        onChange={(v) => setTweak("headline_treatment", v)}
        options={[
          { label: "Italic", value: "italic-em" },
          { label: "Underline", value: "underline" },
          { label: "All ink", value: "all-ink" }
        ]}
      />

      <window.TweakSection label="Layout" />
      <window.TweakToggle
        label="Tech strip"
        value={tweaks.show_strip}
        onChange={(v) => setTweak("show_strip", v)}
      />

      <window.TweakSection label="Pricing" />
      <window.TweakSlider
        label="Floor"
        value={tweaks.price_floor}
        onChange={(v) => setTweak("price_floor", v)}
        min={2500} max={15000} step={500}
        unit=""
      />
    </window.TweaksPanel>
  );
}

const mountEl = document.createElement("div");
document.body.appendChild(mountEl);
ReactDOM.createRoot(mountEl).render(<App />);