/* UCIP — Tweaks app (drives CSS variables / body classes on the vanilla page) */

const ACCENTS = {
  'Ámbar':  { a: 'oklch(0.72 0.165 58)',  d: 'oklch(0.64 0.16 52)',  ink: 'oklch(0.22 0.04 60)' },
  'Mar':    { a: 'oklch(0.70 0.12 215)',  d: 'oklch(0.60 0.12 218)', ink: 'oklch(0.18 0.04 220)' },
  'Coral':  { a: 'oklch(0.68 0.17 30)',   d: 'oklch(0.60 0.17 28)',  ink: 'oklch(0.99 0 0)' },
  'Verde':  { a: 'oklch(0.70 0.14 150)',  d: 'oklch(0.60 0.13 152)', ink: 'oklch(0.18 0.04 150)' },
};
const ACCENT_SWATCH = { 'Ámbar': '#E89A3C', 'Mar': '#3FA8C4', 'Coral': '#E5683F', 'Verde': '#3FB07A' };

const FONTS = {
  'Moderna':    '"Archivo", system-ui, sans-serif',
  'Editorial':  '"Spectral", Georgia, serif',
  'Técnica':    '"Space Grotesk", system-ui, sans-serif',
};

const RADII = {
  'Suaves':   { r: '14px', lg: '22px' },
  'Marcadas': { r: '8px',  lg: '12px' },
  'Rectas':   { r: '0px',  lg: '0px' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Ámbar",
  "font": "Moderna",
  "radius": "Suaves",
  "heroLayout": "Imagen",
  "heroTone": "Oscuro"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement.style;
  const ac = ACCENTS[t.accent] || ACCENTS['Ámbar'];
  root.setProperty('--accent', ac.a);
  root.setProperty('--accent-700', ac.d);
  // keep accent ink readable on buttons
  document.querySelectorAll('.btn-accent').forEach(b => { b.style.color = ac.ink; });

  root.setProperty('--display', FONTS[t.font] || FONTS['Moderna']);

  const rd = RADII[t.radius] || RADII['Suaves'];
  root.setProperty('--r', rd.r);
  root.setProperty('--r-lg', rd.lg);

  document.body.classList.toggle('hero-center', t.heroLayout === 'Centrado');
  document.body.classList.toggle('hero-light', t.heroTone === 'Claro');
}

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identidad" />
      <TweakColor
        label="Color de acento"
        value={ACCENT_SWATCH[t.accent]}
        options={Object.values(ACCENT_SWATCH)}
        onChange={(hex) => {
          const name = Object.keys(ACCENT_SWATCH).find(k => ACCENT_SWATCH[k] === hex) || 'Ámbar';
          setTweak('accent', name);
        }}
      />
      <TweakRadio
        label="Titulares"
        value={t.font}
        options={Object.keys(FONTS)}
        onChange={(v) => setTweak('font', v)}
      />
      <TweakRadio
        label="Esquinas"
        value={t.radius}
        options={Object.keys(RADII)}
        onChange={(v) => setTweak('radius', v)}
      />
      <TweakSection label="Portada (hero)" />
      <TweakRadio
        label="Composición"
        value={t.heroLayout}
        options={['Imagen', 'Centrado']}
        onChange={(v) => setTweak('heroLayout', v)}
      />
      <TweakRadio
        label="Tono de fondo"
        value={t.heroTone}
        options={['Oscuro', 'Claro']}
        onChange={(v) => setTweak('heroTone', v)}
      />
    </TweaksPanel>
  );
}

const __tw = document.createElement('div');
document.body.appendChild(__tw);
ReactDOM.createRoot(__tw).render(<TweakApp />);