const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ground": "marfil",
  "mood": "#9a6a3c",
  "type": "grotesca",
  "density": "normal"
}/*EDITMODE-END*/;

const MOODS = [
  { hex: "#9a6a3c", key: "bronce" },
  { hex: "#9b4742", key: "oxblood" },
  { hex: "#6f6a61", key: "grafito" },
  { hex: "#5b7a55", key: "bosque" }
];
const moodKey = (hex) => (MOODS.find(m => m.hex === hex) || MOODS[0]).key;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    const b = document.body;
    b.dataset.ground = t.ground;
    b.dataset.mood = moodKey(t.mood);
    b.dataset.type = t.type;
    b.dataset.density = t.density;
    if (window.__applyTheme) window.__applyTheme();
  }, [t.ground, t.mood, t.type, t.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Ambiente" />
      <TweakRadio label="Fondo" value={t.ground}
        options={[{ value: "marfil", label: "Marfil" }, { value: "pizarra", label: "Pizarra" }]}
        onChange={(v) => setTweak("ground", v)} />
      <TweakSection label="Acento" />
      <TweakColor label="Mood" value={t.mood}
        options={MOODS.map((m) => m.hex)}
        onChange={(v) => setTweak("mood", v)} />
      <TweakSection label="Tipografia" />
      <TweakRadio label="Titulos" value={t.type}
        options={[{ value: "garamond", label: "Garamond" }, { value: "grotesca", label: "Grotesca" }]}
        onChange={(v) => setTweak("type", v)} />
      <TweakSection label="Disposicion" />
      <TweakRadio label="Densidad" value={t.density}
        options={[{ value: "compacto", label: "Compacto" }, { value: "normal", label: "Normal" }, { value: "galeria", label: "Galeria" }]}
        onChange={(v) => setTweak("density", v)} />
    </TweaksPanel>
  );
}
ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<App />);