// tweaks-app.jsx — reconstrukt.ai tweak controls (React island driving CSS variables)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3D6FFF",
  "motion": true,
  "heroLayout": "centered",
  "gridTexture": true
}/*EDITMODE-END*/;

// hex -> "r,g,b"
function rgbOf(hex) {
  var h = hex.replace("#", "");
  if (h.length === 3) h = h.split("").map(function (c) { return c + c; }).join("");
  var n = parseInt(h, 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255].join(",");
}

function applyTweaks(t) {
  var root = document.documentElement;
  var rgb = rgbOf(t.accent);
  root.style.setProperty("--accent", t.accent);
  root.style.setProperty("--accent-hi", "rgba(" + rgb + ",0.85)");
  root.style.setProperty("--accent-tint", "rgba(" + rgb + ",0.12)");
  root.style.setProperty("--accent-line", "rgba(" + rgb + ",0.42)");

  document.body.setAttribute("data-motion", t.motion ? "on" : "off");
  document.body.classList.toggle("hero-left", t.heroLayout === "left");
  root.style.setProperty("--grid-size", t.gridTexture ? "56px" : "0px");
  document.body.classList.toggle("no-grid", !t.gridTexture);
}

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

  React.useEffect(function () { applyTweaks(t); }, [t.accent, t.motion, t.heroLayout, t.gridTexture]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor
        label="Accent color"
        value={t.accent}
        options={["#3D6FFF", "#19D3C5", "#7A5AE0", "#E5484D"]}
        onChange={function (v) { setTweak("accent", v); }}
      />
      <TweakSection label="Hero" />
      <TweakRadio
        label="Alignment"
        value={t.heroLayout}
        options={["centered", "left"]}
        onChange={function (v) { setTweak("heroLayout", v); }}
      />
      <TweakSection label="Motion & texture" />
      <TweakToggle
        label="Scroll motion"
        value={t.motion}
        onChange={function (v) { setTweak("motion", v); }}
      />
      <TweakToggle
        label="Grid texture"
        value={t.gridTexture}
        onChange={function (v) { setTweak("gridTexture", v); }}
      />
    </TweaksPanel>
  );
}

(function mount() {
  var root = document.getElementById("tweaks-root");
  if (!root) { root = document.createElement("div"); root.id = "tweaks-root"; document.body.appendChild(root); }
  ReactDOM.createRoot(root).render(<App />);
})();