/* reservaime — Tweaks island.
   Mounts only the Tweaks panel into #tweaks-root and writes the chosen
   values to CSS custom properties on :root, so the vanilla landing
   restyles live. */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "#1B3461",
  "accent": "#C9932A",
  "font": "Inter",
  "headingFont": "match",
  "radius": 16
}/*EDITMODE-END*/;

const FONT_STACK = {
  "Inter": "'Inter', system-ui, sans-serif",
  "Manrope": "'Manrope', system-ui, sans-serif",
  "Plus Jakarta Sans": "'Plus Jakarta Sans', system-ui, sans-serif",
  "Sora": "'Sora', system-ui, sans-serif"
};

function applyTweaks(t) {
  const root = document.documentElement.style;
  root.setProperty("--navy", t.brand);
  root.setProperty("--gold", t.accent);
  root.setProperty("--font", FONT_STACK[t.font] || FONT_STACK.Inter);
  const r = Number(t.radius);
  root.setProperty("--radius", r + "px");
  root.setProperty("--radius-sm", Math.round(r * 0.62) + "px");
  root.setProperty("--radius-lg", Math.round(r * 1.5) + "px");
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marca" />
      <TweakColor
        label="Color principal"
        value={t.brand}
        options={["#1B3461", "#143A34", "#262338", "#1f2937", "#3A1530"]}
        onChange={(v) => setTweak("brand", v)}
      />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={["#C9932A", "#C2683E", "#1F8A5B", "#2A6FDB", "#B23A48"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Tipografía" />
      <TweakSelect
        label="Fuente"
        value={t.font}
        options={["Inter", "Manrope", "Plus Jakarta Sans", "Sora"]}
        onChange={(v) => setTweak("font", v)}
      />
      <TweakSection label="Formas" />
      <TweakSlider
        label="Redondeo"
        value={t.radius}
        min={0}
        max={28}
        step={2}
        unit="px"
        onChange={(v) => setTweak("radius", v)}
      />
    </TweaksPanel>
  );
}

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