/* ============================================================
   COMERDATA — Tweaks (panel de estilo)
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#D8B56D", "#F2D28A"],
  "bg": "Grafito",
  "titleFont": "Manrope",
  "bodyFont": "Inter",
  "corners": "Redondeadas",
  "glow": true
}/*EDITMODE-END*/;

/* Paletas de acento (cada opción = [dorado, dorado claro]) */
const ACCENTS = [
  ["#D8B56D", "#F2D28A"], // Dorado elegante (default)
  ["#C9A227", "#EBC85B"], // Oro intenso
  ["#B9C2CE", "#E8EEF6"], // Platino frío
  ["#C97C4C", "#E6A06E"]  // Cobre cálido
];

/* Tonos de fondo: [--bg, --graphite, --black] */
const BG_MAP = {
  "Grafito":    ["#070B12", "#0D1420", "#030508"],
  "Negro":      ["#050507", "#0B0D12", "#000000"],
  "Azul noche": ["#0A1320", "#0F1D31", "#05080F"]
};

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

  React.useEffect(() => {
    const r = document.documentElement;
    const a = t.accent || ACCENTS[0];
    r.style.setProperty("--gold", a[0]);
    r.style.setProperty("--gold-light", a[1]);

    const bg = BG_MAP[t.bg] || BG_MAP["Grafito"];
    r.style.setProperty("--bg", bg[0]);
    r.style.setProperty("--graphite", bg[1]);
    r.style.setProperty("--black", bg[2]);

    r.style.setProperty("--f-display", '"' + t.titleFont + '", sans-serif');
    r.style.setProperty("--f-body", '"' + t.bodyFont + '", sans-serif');

    document.body.classList.toggle("tw-noglow", !t.glow);
    document.body.classList.toggle("tw-sharp", t.corners === "Rectas");
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color" />
      <TweakColor label="Acento" value={t.accent} options={ACCENTS}
        onChange={(v) => setTweak("accent", v)} />
      <TweakRadio label="Fondo" value={t.bg} options={["Grafito", "Negro", "Azul noche"]}
        onChange={(v) => setTweak("bg", v)} />

      <TweakSection label="Tipografía" />
      <TweakSelect label="Títulos" value={t.titleFont} options={["Manrope", "Sora", "Space Grotesk"]}
        onChange={(v) => setTweak("titleFont", v)} />
      <TweakSelect label="Texto" value={t.bodyFont} options={["Inter", "IBM Plex Sans", "Manrope"]}
        onChange={(v) => setTweak("bodyFont", v)} />

      <TweakSection label="Estilo" />
      <TweakRadio label="Esquinas" value={t.corners} options={["Redondeadas", "Rectas"]}
        onChange={(v) => setTweak("corners", v)} />
      <TweakToggle label="Brillo dorado en botones" value={t.glow}
        onChange={(v) => setTweak("glow", v)} />
    </TweaksPanel>
  );
}

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