// brodo-app.jsx — root app + Tweaks
const { useEffect } = React;
const { useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;

// ---- tweak option maps ----
const ACCENTS = {
  "Menta":    { brand: "25 200 154", brand2: "251 139 60",  soft: "#E2F6EF", soft2: "#CFF0E4" },
  "Naranja":  { brand: "251 139 60", brand2: "25 200 154",  soft: "#FDEBDD", soft2: "#FADBC2" },
  "Amarillo": { brand: "246 197 68", brand2: "25 200 154",  soft: "#FBF2D6", soft2: "#F6E6AE" },
};
const FONTS = {
  "Bricolage":   { d: "'Bricolage Grotesque', sans-serif", b: "'Hanken Grotesk', sans-serif" },
  "Redondeado":  { d: "'Quicksand', sans-serif",           b: "'Nunito Sans', sans-serif" },
  "Geométrico":  { d: "'Space Grotesk', sans-serif",        b: "'Hanken Grotesk', sans-serif" },
};
const RADII = {
  "Suave": { r: "18px", lg: "26px", btn: "14px" },
  "Medio": { r: "12px", lg: "18px", btn: "11px" },
  "Recto": { r: "4px",  lg: "6px",  btn: "4px" },
};
const DENSITY = {
  "Compacto": { gap: "12px", pad: "10px" },
  "Normal":   { gap: "18px", pad: "14px" },
  "Amplio":   { gap: "26px", pad: "18px" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Menta",
  "font": "Bricolage",
  "radius": "Medio",
  "density": "Normal"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const s = document.documentElement.style;
    const a = ACCENTS[t.accent] || ACCENTS.Menta;
    s.setProperty("--brand-rgb", a.brand);
    s.setProperty("--brand2-rgb", a.brand2);
    s.setProperty("--brand-soft", a.soft);
    s.setProperty("--brand-soft-2", a.soft2);
    const f = FONTS[t.font] || FONTS.Bricolage;
    s.setProperty("--font-display", f.d);
    s.setProperty("--font-body", f.b);
    const r = RADII[t.radius] || RADII.Medio;
    s.setProperty("--radius", r.r);
    s.setProperty("--radius-lg", r.lg);
    s.setProperty("--radius-btn", r.btn);
    const d = DENSITY[t.density] || DENSITY.Normal;
    s.setProperty("--gap", d.gap);
    s.setProperty("--card-pad", d.pad);
  }, [t.accent, t.font, t.radius, t.density]);

  return React.createElement(window.CartProvider, null,
    React.createElement("div", { className: "min-h-screen bg-paper" },
      React.createElement(window.Header, null),
      React.createElement("main", null,
        React.createElement(window.Hero, null),
        React.createElement(window.Catalog, null)),
      React.createElement(window.Footer, null),
      React.createElement(window.QuickView, null),
      React.createElement(window.CartDrawer, null)),
    React.createElement(TweaksPanel, null,
      React.createElement(TweakSection, { label: "Color" }),
      React.createElement(TweakRadio, { label: "Acento", value: t.accent, options: Object.keys(ACCENTS), onChange: (v) => setTweak("accent", v) }),
      React.createElement(TweakSection, { label: "Tipografía" }),
      React.createElement(TweakRadio, { label: "Pareja", value: t.font, options: Object.keys(FONTS), onChange: (v) => setTweak("font", v) }),
      React.createElement(TweakSection, { label: "Forma" }),
      React.createElement(TweakRadio, { label: "Esquinas", value: t.radius, options: Object.keys(RADII), onChange: (v) => setTweak("radius", v) }),
      React.createElement(TweakRadio, { label: "Densidad", value: t.density, options: Object.keys(DENSITY), onChange: (v) => setTweak("density", v) })));
}

ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));