/* ============================================================
   Tweaks island — controls the visual "style direction"
   and accent color of the (vanilla) site.
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "style": "industrial",
  "accent": "#3b82f6",
  "heroX": 32,
  "heroY": 16
}/*EDITMODE-END*/;

const STYLE_OPTS = [
  { id: "editorial",  label: "Editorial" },
  { id: "industrial", label: "Industrial" },
  { id: "corporate",  label: "Corporativo" },
];

// curated accents (corporate-blue forward)
const ACCENTS = ["#3b82f6", "#1356d6", "#0891b2", "#b45309"];

function applyAccent(color, style) {
  const root = document.documentElement;
  root.style.setProperty("--accent", color);
  // on dark "industrial" skin, lighten the text-accent for contrast
  const ink = style === "industrial"
    ? `color-mix(in srgb, ${color} 72%, white)`
    : color;
  root.style.setProperty("--accent-ink", ink);
}

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

  React.useEffect(() => {
    document.documentElement.setAttribute("data-style", t.style);
  }, [t.style]);

  React.useEffect(() => {
    applyAccent(t.accent, t.style);
  }, [t.accent, t.style]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--hero-focus-x", t.heroX + "%");
    document.documentElement.style.setProperty("--hero-focus-y", t.heroY + "%");
  }, [t.heroX, t.heroY]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Estilo visual" />
      <TweakRadio
        label="Dirección"
        value={t.style}
        options={STYLE_OPTS.map((s) => ({ value: s.id, label: s.label }))}
        onChange={(v) => setTweak("style", v)}
      />
      <TweakSection label="Color de acento" />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Foto del hero" />
      <TweakSlider
        label="Horizontal"
        value={t.heroX} min={0} max={100} unit="%"
        onChange={(v) => setTweak("heroX", v)}
      />
      <TweakSlider
        label="Vertical"
        value={t.heroY} min={0} max={100} unit="%"
        onChange={(v) => setTweak("heroY", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  function go() {
    const el = document.getElementById("tweaks-root");
    if (el && window.ReactDOM && window.useTweaks) {
      ReactDOM.createRoot(el).render(<TweaksApp />);
    } else {
      setTimeout(go, 60);
    }
  }
  go();
})();