// Tweaks for the SATE landing — applies CSS variables live.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E96B22",
  "fontFamily": "Lufga",
  "highlightDark": "Laranja",
  "ctaShape": "Pílula",
  "heroScrim": 0
}/*EDITMODE-END*/;

const FONT_STACK = {
  "Lufga": '"Lufga", "Schibsted Grotesk", system-ui, sans-serif',
  "Schibsted Grotesk": '"Schibsted Grotesk", system-ui, sans-serif',
  "Plus Jakarta Sans": '"Plus Jakarta Sans", system-ui, sans-serif',
  "Hanken Grotesk": '"Hanken Grotesk", system-ui, sans-serif'
};
const ACCENT_STRONG = {
  "#E96B22": "#CE551A",
  "#F2912B": "#D9761A",
  "#D9531E": "#B53F12",
  "#E2533A": "#C53C26"
};
const CTA_RADIUS = { "Pílula": "999px", "Arredondado": "16px", "Reto": "4px" };

function hexToRgba(hex, a) {
  const h = hex.replace("#", "");
  const r = parseInt(h.substring(0, 2), 16);
  const g = parseInt(h.substring(2, 4), 16);
  const b = parseInt(h.substring(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const root = document.documentElement;

  React.useEffect(() => {
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-strong", ACCENT_STRONG[t.accent] || "#CE551A");
    root.style.setProperty("--accent-tint", hexToRgba(t.accent, 0.09));
  }, [t.accent]);

  React.useEffect(() => {
    const stack = FONT_STACK[t.fontFamily] || FONT_STACK["Schibsted Grotesk"];
    root.style.setProperty("--font-display", stack);
    root.style.setProperty("--font-body", stack);
  }, [t.fontFamily]);

  React.useEffect(() => {
    root.style.setProperty("--hl-dark", t.highlightDark === "Branco" ? "#ffffff" : "var(--accent)");
  }, [t.highlightDark]);

  React.useEffect(() => {
    root.style.setProperty("--r-pill", CTA_RADIUS[t.ctaShape] || "999px");
  }, [t.ctaShape]);

  React.useEffect(() => {
    root.style.setProperty("--scrim-boost", String((t.heroScrim || 0) / 100));
  }, [t.heroScrim]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Cor" />
      <TweakColor label="Laranja da marca" value={t.accent}
        options={["#E96B22", "#F2912B", "#D9531E", "#E2533A"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakRadio label="Destaque no fundo escuro" value={t.highlightDark}
        options={["Laranja", "Branco"]}
        onChange={(v) => setTweak("highlightDark", v)} />

      <TweakSection label="Tipografia" />
      <TweakSelect label="Fonte" value={t.fontFamily}
        options={["Lufga", "Schibsted Grotesk", "Plus Jakarta Sans", "Hanken Grotesk"]}
        onChange={(v) => setTweak("fontFamily", v)} />

      <TweakSection label="Estilo" />
      <TweakRadio label="Formato dos botões" value={t.ctaShape}
        options={["Pílula", "Arredondado", "Reto"]}
        onChange={(v) => setTweak("ctaShape", v)} />
      <TweakSlider label="Escurecer a hero" value={t.heroScrim} min={0} max={60} unit="%"
        onChange={(v) => setTweak("heroScrim", v)} />
    </TweaksPanel>
  );
}

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