// tweaks-app.jsx — small React app that drives the landing page's CSS variables.
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentPair": ["#6d7bff", "#22d3ee"],
  "bgTone": "navy",
  "glow": 55,
  "showChat": true
}/*EDITMODE-END*/;

const BG_TONES = {
  navy:   { bg: "#060819", bg2: "#0a0e26", panel: "#0e1330", panel2: "#121838" },
  black:  { bg: "#04050d", bg2: "#080a17", panel: "#0c0e1c", panel2: "#101324" },
  indigo: { bg: "#0a0a22", bg2: "#101035", panel: "#16163e", panel2: "#1b1b48" }
};

function applyTweaks(t) {
  const r = document.documentElement;
  r.style.setProperty("--accent", t.accentPair[0]);
  r.style.setProperty("--accent-2", t.accentPair[1]);
  const tone = BG_TONES[t.bgTone] || BG_TONES.navy;
  r.style.setProperty("--bg", tone.bg);
  r.style.setProperty("--bg-2", tone.bg2);
  r.style.setProperty("--panel", tone.panel);
  r.style.setProperty("--panel-2", tone.panel2);
  document.querySelectorAll(".blob.b1").forEach(b => b.style.opacity = (t.glow / 100));
  document.querySelectorAll(".phone-glow").forEach(b => b.style.opacity = (t.glow / 130));
  const chat = document.querySelector(".phone-stage");
  if (chat) chat.style.display = t.showChat ? "" : "none";
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Identidade visual" />
      <TweakColor label="Cor de destaque" value={t.accentPair}
        options={[["#6d7bff","#22d3ee"],["#7c3aed","#ff5d8f"],["#0ea5e9","#25d366"],["#f6a623","#ff5d8f"]]}
        onChange={(v) => setTweak("accentPair", v)} />
      <TweakRadio label="Tom de fundo" value={t.bgTone}
        options={["navy","black","indigo"]}
        onChange={(v) => setTweak("bgTone", v)} />
      <TweakSection label="Atmosfera" />
      <TweakSlider label="Intensidade do brilho" value={t.glow} min={0} max={100} unit="%"
        onChange={(v) => setTweak("glow", v)} />
      <TweakToggle label="Mockup do chat I.A." value={t.showChat}
        onChange={(v) => setTweak("showChat", v)} />
    </TweaksPanel>
  );
}

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