// app.jsx — Tweaks panel + live theming for the landing page.
// The landing markup itself is plain HTML in the body; this React app only
// renders the Tweaks panel and applies palette / font / scale to :root.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "calida",
  "fonts": "calida",
  "scale": 1.0,
  "rounded": "suave"
}/*EDITMODE-END*/;

const PALETTES = {
  calida: {
    label: "Cálida",
    swatch: ["#c4673d", "#7a8b6f", "#faf4ea"],
    vars: {
      "--bg": "#f7efe2",
      "--surface": "#fffdf8",
      "--surface-2": "#f1e6d4",
      "--text": "#382f25",
      "--text-soft": "#6b5f50",
      "--accent": "#bd6038",
      "--accent-strong": "#9f4d2a",
      "--accent-soft": "#f3e0d3",
      "--accent-2": "#6f8064",
      "--accent-2-soft": "#e4ebdd",
      "--border": "#e7dac7"
    }
  },
  sereno: {
    label: "Sereno",
    swatch: ["#3f8d7e", "#4a7a9b", "#f1f5f4"],
    vars: {
      "--bg": "#eef4f2",
      "--surface": "#ffffff",
      "--surface-2": "#e0ece8",
      "--text": "#26312e",
      "--text-soft": "#566b65",
      "--accent": "#3a8576",
      "--accent-strong": "#2c685c",
      "--accent-soft": "#d7ebe6",
      "--accent-2": "#477594",
      "--accent-2-soft": "#dce8ef",
      "--border": "#d6e3df"
    }
  },
  pastel: {
    label: "Pastel",
    swatch: ["#e08a7d", "#9a8bc4", "#fdf6f3"],
    vars: {
      "--bg": "#fcf3ef",
      "--surface": "#ffffff",
      "--surface-2": "#f7e7e1",
      "--text": "#473a3e",
      "--text-soft": "#7d6b70",
      "--accent": "#d97a6c",
      "--accent-strong": "#c0604f",
      "--accent-soft": "#f7e1db",
      "--accent-2": "#8e7fbd",
      "--accent-2-soft": "#e9e3f3",
      "--border": "#f0e1db"
    }
  }
};

const FONTS = {
  calida:    { label: "Cálida",    head: "'Bitter', serif",     body: "'Mulish', sans-serif" },
  clasica:   { label: "Clásica",   head: "'Lora', serif",       body: "'Nunito Sans', sans-serif" },
  editorial: { label: "Editorial", head: "'Newsreader', serif", body: "'Work Sans', sans-serif" }
};

const ROUNDED = {
  recto:  { label: "Recto",  sm: "6px",  md: "10px", lg: "16px" },
  suave:  { label: "Suave",  sm: "12px", md: "20px", lg: "28px" },
  pildora:{ label: "Píldora",sm: "16px", md: "28px", lg: "40px" }
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    const pal = PALETTES[t.palette] || PALETTES.calida;
    Object.entries(pal.vars).forEach(([k, v]) => root.style.setProperty(k, v));

    const f = FONTS[t.fonts] || FONTS.calida;
    root.style.setProperty("--font-head", f.head);
    root.style.setProperty("--font-body", f.body);

    root.style.setProperty("--scale", String(t.scale));

    const r = ROUNDED[t.rounded] || ROUNDED.suave;
    root.style.setProperty("--r-sm", r.sm);
    root.style.setProperty("--r-md", r.md);
    root.style.setProperty("--r-lg", r.lg);
  }, [t.palette, t.fonts, t.scale, t.rounded]);

  return (
    <TweaksPanel>
      <TweakSection label="Color" />
      <TweakRadio
        label="Paleta"
        value={t.palette}
        options={Object.entries(PALETTES).map(([value, p]) => ({ value, label: p.label }))}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakSection label="Tipografía" />
      <TweakRadio
        label="Pareja"
        value={t.fonts}
        options={Object.entries(FONTS).map(([value, f]) => ({ value, label: f.label }))}
        onChange={(v) => setTweak("fonts", v)}
      />
      <TweakSlider
        label="Tamaño de texto"
        value={t.scale}
        min={0.9}
        max={1.25}
        step={0.05}
        onChange={(v) => setTweak("scale", v)}
      />
      <TweakSection label="Forma" />
      <TweakRadio
        label="Esquinas"
        value={t.rounded}
        options={Object.entries(ROUNDED).map(([value, r]) => ({ value, label: r.label }))}
        onChange={(v) => setTweak("rounded", v)}
      />
    </TweaksPanel>
  );
}

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