// XENOCIPHER — Tweaks island. Applies accent / headline / animation intensity
// to the static page via CSS vars + DOM. Loaded after React, Babel, tweaks-panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2E9BFF",
  "headline": "Mission-grade systems, engineered end-to-end.",
  "intensity": 62
}/*EDITMODE-END*/;

function luminanceInk(hex) {
  var h = String(hex).replace("#", "");
  if (h.length === 3) h = h.replace(/./g, function (c) { return c + c; });
  var n = parseInt(h.slice(0, 6), 16);
  if (isNaN(n)) return "#ffffff";
  var r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return (r * 299 + g * 587 + b * 114) > 150000 ? "#06070B" : "#ffffff";
}

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

  React.useEffect(function () {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty("--accent-ink", luminanceInk(t.accent));
    window.dispatchEvent(new CustomEvent("tweakchange"));
  }, [t.accent]);

  React.useEffect(function () {
    var el = document.querySelector("[data-headline]");
    if (el) el.textContent = t.headline;
  }, [t.headline]);

  React.useEffect(function () {
    window.__cipherIntensity = t.intensity;
    try { localStorage.setItem("xc_intensity", String(t.intensity)); } catch (e) {}
  }, [t.intensity]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#2E9BFF", "#19C7E6", "#21D07A", "#7C5BFF", "#FF9F2E"]}
        onChange={function (v) { setTweak("accent", v); }}
      />
      <TweakSection label="Hero" />
      <TweakText
        label="Headline"
        value={t.headline}
        onChange={function (v) { setTweak("headline", v); }}
      />
      <TweakSection label="Motion" />
      <TweakSlider
        label="Cipher intensity"
        value={t.intensity}
        min={0} max={100} step={1} unit="%"
        onChange={function (v) { setTweak("intensity", v); }}
      />
    </TweaksPanel>
  );
}

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