/* Tweaks panel: language toggle, accent palette, hero layout */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "language": "es",
  "palette": "warm",
  "heroLayout": "split"
}/*EDITMODE-END*/;

const { useEffect } = React;

const PALETTES = {
  warm:   ['#1b5566', '#e4a079', '#f7f4ec'],
  forest: ['#2f6a4f', '#d9b86a', '#f7f4ec'],
  violet: ['#4a3a8a', '#d6a094', '#f7f4ec'],
};
const PALETTE_KEYS = Object.keys(PALETTES);
const paletteOptions = PALETTE_KEYS.map((k) => PALETTES[k]);
const keyForPalette = (arr) => {
  const s = JSON.stringify(arr).toLowerCase();
  return PALETTE_KEYS.find((k) => JSON.stringify(PALETTES[k]).toLowerCase() === s) || 'warm';
};

/* ---- appliers ---- */
function applyLanguage(lang) {
  document.documentElement.lang = lang;
  const nodes = document.querySelectorAll('[data-es], [data-en]');
  nodes.forEach((n) => {
    const es = n.getAttribute('data-es');
    const en = n.getAttribute('data-en');
    if (!es || !en) return;
    const v = lang === 'en' ? en : es;
    // Inline-tag passthrough: if either string contains markup we trust (em/strong/br),
    // swap via innerHTML so the italic-coral accent or <strong> emphasis survives.
    if (/<(em|strong|br|small)\b/i.test(v)) {
      n.innerHTML = v;
    } else {
      n.textContent = v;
    }
  });
}
function applyPalette(p) { document.documentElement.setAttribute('data-palette', p); }
function applyHero(h)    { document.documentElement.setAttribute('data-hero', h); }

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

  useEffect(() => { applyLanguage(t.language); }, [t.language]);
  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => { applyHero(t.heroLayout); }, [t.heroLayout]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Idioma · Language">
        <TweakRadio
          label="Página en"
          value={t.language}
          onChange={(v) => setTweak('language', v)}
          options={[
            { value: 'es', label: 'Español' },
            { value: 'en', label: 'English' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Paleta de acentos">
        <TweakColor
          label="Combinación"
          value={PALETTES[t.palette]}
          onChange={(v) => setTweak('palette', keyForPalette(v))}
          options={paletteOptions}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakRadio
          label="Composición"
          value={t.heroLayout}
          onChange={(v) => setTweak('heroLayout', v)}
          options={[
            { value: 'split',    label: 'Dividido' },
            { value: 'centered', label: 'Centrado' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* Apply tweaks at load before React mounts (first paint matches defaults) */
applyLanguage(TWEAK_DEFAULTS.language);
applyPalette(TWEAK_DEFAULTS.palette);
applyHero(TWEAK_DEFAULTS.heroLayout);

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<App />);