/* ============================================================
   REVERSE MEDIA — home Tweaks panel (hero directions + accent)
   ============================================================ */
const RM_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "Aurora",
  "headline": "Borderless growth, engineered.",
  "accent": "#E6B43C",
  "showTrust": true
}/*EDITMODE-END*/;

function splitHeadline(el, text) {
  const words = text.trim().split(/\s+/);
  el.dataset.split = "1";
  el.innerHTML = words.map((w, i) => {
    const acc = i === words.length - 1 ? " accent" : "";
    return `<span class="w${acc}" style="opacity:1;transform:none;animation-delay:${i * 0.06}s">${w}</span>`;
  }).join(" ");
}

function RMTweaks() {
  const [t, setTweak] = useTweaks(RM_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.setAttribute("data-hero-style", String(t.heroStyle).toLowerCase());
  }, [t.heroStyle]);

  React.useEffect(() => {
    const el = document.getElementById("heroTitle");
    if (el) splitHeadline(el, t.headline);
  }, [t.headline]);

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--gold", t.accent);
    // derive a brighter + deeper tone so accents stay harmonious
    r.style.setProperty("--gold-bright", shade(t.accent, 18));
    r.style.setProperty("--gold-deep", shade(t.accent, -22));
    r.style.setProperty("--gold-glow", hexA(t.accent, 0.35));
  }, [t.accent]);

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero direction" />
      <TweakRadio label="Background" value={t.heroStyle}
        options={["Aurora", "Grid", "Spotlight"]}
        onChange={(v) => setTweak("heroStyle", v)} />
      <TweakText label="Headline" value={t.headline}
        onChange={(v) => setTweak("headline", v)} />
      <TweakToggle label="Show trust strip" value={t.showTrust}
        onChange={(v) => setTweak("showTrust", v)} />
      <TweakSection label="Brand accent" />
      <TweakColor label="Gold" value={t.accent}
        options={["#E6B43C", "#F2C75A", "#D8A23A", "#C9962E", "#EAC36B"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Intro" />
      <TweakButton label="Replay intro reveal" onClick={() => {
        try { sessionStorage.removeItem("rm_intro_seen"); } catch (e) {}
        location.reload();
      }} />
    </TweaksPanel>
  );
}

/* tiny color helpers */
function clamp(n) { return Math.max(0, Math.min(255, n)); }
function shade(hex, amt) {
  const c = hex.replace("#", "");
  const r = parseInt(c.slice(0, 2), 16), g = parseInt(c.slice(2, 4), 16), b = parseInt(c.slice(4, 6), 16);
  const f = (x) => clamp(Math.round(x + (amt / 100) * 255)).toString(16).padStart(2, "0");
  return "#" + f(r) + f(g) + f(b);
}
function hexA(hex, a) {
  const c = hex.replace("#", "");
  return `rgba(${parseInt(c.slice(0,2),16)},${parseInt(c.slice(2,4),16)},${parseInt(c.slice(4,6),16)},${a})`;
}

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