const { useState: useStateT, useEffect: useEffectT } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "coral",
  "hero": "default",
  "font": "instrument"
}/*EDITMODE-END*/;

const ACCENTS = {
  coral:    { color: "oklch(0.68 0.17 35)",  ink: "#1a1814", label: "Coral" },
  electric: { color: "oklch(0.72 0.21 145)", ink: "#0a1a0c", label: "Verde eléctrico" },
  cobalt:   { color: "oklch(0.62 0.20 255)", ink: "#0a1018", label: "Cobalto" },
  mustard:  { color: "oklch(0.78 0.16 90)",  ink: "#1a1408", label: "Mostaza" },
  magenta:  { color: "oklch(0.65 0.25 350)", ink: "#1a0a18", label: "Magenta" },
};

function applyTweaks(t) {
  const root = document.documentElement;
  const a = ACCENTS[t.accent] || ACCENTS.coral;
  root.style.setProperty("--accent", a.color);
  root.style.setProperty("--accent-ink", a.ink);
  document.body.setAttribute("data-hero", t.hero);
  document.body.setAttribute("data-font", t.font);
}

function CitadoTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectT(() => {
    applyTweaks(tweaks);
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks · Tu Marca en IA">
      <TweakSection title="Color de acento">
        <TweakRadio
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "coral",    label: "Coral" },
            { value: "electric", label: "Verde" },
            { value: "cobalt",   label: "Cobalto" },
            { value: "mustard",  label: "Mostaza" },
            { value: "magenta",  label: "Magenta" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Variante de hero">
        <TweakRadio
          value={tweaks.hero}
          onChange={(v) => setTweak("hero", v)}
          options={[
            { value: "default",  label: "Editorial (split)" },
            { value: "centered", label: "Centrado" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Tipografía display">
        <TweakRadio
          value={tweaks.font}
          onChange={(v) => setTweak("font", v)}
          options={[
            { value: "instrument", label: "Instrument" },
            { value: "fraunces",   label: "Fraunces" },
            { value: "newsreader", label: "Newsreader" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Apply defaults on load
applyTweaks(TWEAK_DEFAULTS);

const tweaksMount = document.createElement("div");
document.body.appendChild(tweaksMount);
ReactDOM.createRoot(tweaksMount).render(<CitadoTweaks />);