// tweaks-app.jsx — applies CSS variables based on user-selected theme

const XR_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "paper",
  "accent": "#245BFF",
  "showStats": true,
  "showCompare": true,
  "showTestimonial": true
}/*EDITMODE-END*/;

function XRaiseTweaks() {
  const [t, setTweak] = useTweaks(XR_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
  }, [t.theme]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--blue", t.accent);
    document.documentElement.style.setProperty("--blue-deep", darken(t.accent, 0.2));
    document.documentElement.style.setProperty("--blue-tint", lighten(t.accent, 0.85));
    document.documentElement.style.setProperty("--blue-glow", lighten(t.accent, 0.25));
  }, [t.accent]);

  React.useEffect(() => {
    const el = document.querySelector(".numbers");
    if (el) el.style.display = t.showStats ? "" : "none";
  }, [t.showStats]);

  React.useEffect(() => {
    document.querySelectorAll("section.section").forEach((s) => {
      const h = s.querySelector(".section-head .lbl");
      if (h && h.textContent.toLowerCase().includes("old way")) {
        s.style.display = t.showCompare ? "" : "none";
      }
    });
  }, [t.showCompare]);

  React.useEffect(() => {
    const el = document.querySelector(".testimonial-section");
    if (el) el.style.display = t.showTestimonial ? "" : "none";
  }, [t.showTestimonial]);

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakRadio
        label="Palette"
        value={t.theme}
        options={["paper", "ink"]}
        onChange={(v) => setTweak("theme", v)}
      />
      <TweakColor
        label="Brand accent"
        value={t.accent}
        options={["#245BFF", "#3B82FF", "#32C7FF", "#0e7c45", "#0F172A"]}
        onChange={(v) => setTweak("accent", v)}
      />

      <TweakSection label="Sections" />
      <TweakToggle label="Live stats strip"   value={t.showStats}       onChange={(v) => setTweak("showStats", v)} />
      <TweakToggle label="Old way / New way"  value={t.showCompare}     onChange={(v) => setTweak("showCompare", v)} />
      <TweakToggle label="Founder testimonial" value={t.showTestimonial} onChange={(v) => setTweak("showTestimonial", v)} />
    </TweaksPanel>
  );
}

// ─────────────── color helpers ───────────────
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map((c) => c + c).join("") : h, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
function rgbToHex({ r, g, b }) {
  return (
    "#" +
    [r, g, b]
      .map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0"))
      .join("")
  );
}
function darken(hex, amt) {
  const { r, g, b } = hexToRgb(hex);
  return rgbToHex({ r: r * (1 - amt), g: g * (1 - amt), b: b * (1 - amt) });
}
function lighten(hex, amt) {
  const { r, g, b } = hexToRgb(hex);
  return rgbToHex({ r: r + (255 - r) * amt, g: g + (255 - g) * amt, b: b + (255 - b) * amt });
}

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