/* Tweaks app — controla el portafolio vía variables CSS / clases.
   Renderiza solo el panel de Tweaks; monta en #tweaks-root. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["oklch(0.72 0.19 295)", "oklch(0.81 0.15 205)"],
  "heroBg": "grid",
  "displayFont": "Space Grotesk",
  "glow": 1,
  "cursor": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  if (Array.isArray(t.accent)) {
    root.style.setProperty("--accent", t.accent[0]);
    root.style.setProperty("--accent-2", t.accent[1] || t.accent[0]);
  }
  root.style.setProperty("--font-display", `"${t.displayFont}", system-ui, sans-serif`);
  root.style.setProperty("--glow", t.glow);
  root.style.setProperty(
    "--accent-glow",
    `color-mix(in oklab, var(--accent) ${Math.round(28 * t.glow)}%, transparent)`
  );
  document.body.classList.toggle("bg-plain", t.heroBg === "plain");
  // Activar/desactivar el cursor personalizado (solo en punteros finos)
  const fine = matchMedia("(pointer: fine)").matches;
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  document.body.classList.toggle("cursor-on", !!t.cursor && fine && !reduce);
}

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Acento" />
      <TweakColor
        label="Color"
        value={t.accent}
        options={[
          ["oklch(0.72 0.19 295)", "oklch(0.81 0.15 205)"],
          ["oklch(0.78 0.16 200)", "oklch(0.82 0.15 155)"],
          ["oklch(0.70 0.20 350)", "oklch(0.78 0.17 30)"],
          ["oklch(0.80 0.17 95)", "oklch(0.72 0.18 300)"]
        ]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSlider
        label="Intensidad aurora"
        value={t.glow} min={0} max={2} step={0.1}
        onChange={(v) => setTweak("glow", v)}
      />

      <TweakSection label="Fondo & tipografía" />
      <TweakRadio
        label="Fondo del hero"
        value={t.heroBg}
        options={["grid", "plain"]}
        onChange={(v) => setTweak("heroBg", v)}
      />
      <TweakRadio
        label="Fuente de títulos"
        value={t.displayFont}
        options={["Space Grotesk", "Instrument Sans"]}
        onChange={(v) => setTweak("displayFont", v)}
      />

      <TweakSection label="Interacción" />
      <TweakToggle
        label="Cursor personalizado"
        value={t.cursor}
        onChange={(v) => setTweak("cursor", v)}
      />
    </TweaksPanel>
  );
}

// Aplica los tweaks por defecto de inmediato (evita parpadeo).
applyTweaks(TWEAK_DEFAULTS);

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