/* Tweaks for VAL I. — accent color, paper tone, headline weight */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#b14a26",
  "paper": "#f3ede2",
  "ink": "#0e0d0b",
  "headlineWeight": 300,
  "grain": true
}/*EDITMODE-END*/;

const ACCENTS = [
  "#b14a26", // terracotta
  "#5a6b3a", // oliva
  "#6a1d2f", // vino
  "#8a6a3a", // ocre
  "#1f3a52", // azul tinta
  "#0e0d0b"  // ink only
];

const PAPERS = [
  "#f3ede2", // crema cálido (logo)
  "#efe6d4", // arena
  "#e8e2d4", // hueso
  "#f6f2eb", // marfil
  "#1a1814", // dark mode
];

function Tweaks() {
  const { useEffect } = React;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.accent);
    r.style.setProperty('--paper', t.paper);
    // when paper is dark, flip ink to a warm light
    const isDark = isDarkColor(t.paper);
    r.style.setProperty('--ink', isDark ? '#f3ede2' : t.ink);
    r.style.setProperty('--ink-soft', isDark ? 'rgba(243,237,226,.78)' : '#2a2622');
    r.style.setProperty('--rule', isDark ? '#f3ede2' : '#1a1814');
    r.style.setProperty('--paper-2', isDark ? '#22201c' : shade(t.paper, -0.04));
    document.body.style.setProperty('--grain-opacity', t.grain ? '.55' : '0');
    // headline weight
    document.querySelectorAll('.hero h1, .section-head h2, .manifesto-lead, .about-text, .contact-left h3, .foot-mark')
      .forEach(el => { el.style.fontWeight = t.headlineWeight; });
    // grain
    const style = document.getElementById('tweak-grain-style') || (() => {
      const s = document.createElement('style');
      s.id = 'tweak-grain-style';
      document.head.appendChild(s);
      return s;
    })();
    style.textContent = `body::before { opacity: ${t.grain ? .55 : 0} !important; }`;
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · VAL I.">
      <TweakSection label="Acento">
        <TweakColor
          label="Color de acento"
          value={t.accent}
          options={ACCENTS}
          onChange={v => setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection label="Paleta">
        <TweakColor
          label="Tono de papel"
          value={t.paper}
          options={PAPERS}
          onChange={v => setTweak('paper', v)}
        />
      </TweakSection>

      <TweakSection label="Tipografía">
        <TweakRadio
          label="Peso de titulares"
          value={t.headlineWeight}
          options={[
            { label: 'Light', value: 300 },
            { label: 'Regular', value: 400 },
            { label: 'Medium', value: 500 }
          ]}
          onChange={v => setTweak('headlineWeight', v)}
        />
      </TweakSection>

      <TweakSection label="Textura">
        <TweakToggle
          label="Grano de papel"
          value={t.grain}
          onChange={v => setTweak('grain', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

function isDarkColor(hex) {
  const c = hex.replace('#', '');
  const r = parseInt(c.slice(0,2), 16);
  const g = parseInt(c.slice(2,4), 16);
  const b = parseInt(c.slice(4,6), 16);
  return (r*0.299 + g*0.587 + b*0.114) < 100;
}
function shade(hex, amount) {
  const c = hex.replace('#','');
  const r = Math.max(0, Math.min(255, parseInt(c.slice(0,2),16) + Math.round(255*amount)));
  const g = Math.max(0, Math.min(255, parseInt(c.slice(2,4),16) + Math.round(255*amount)));
  const b = Math.max(0, Math.min(255, parseInt(c.slice(4,6),16) + Math.round(255*amount)));
  return '#' + [r,g,b].map(v => v.toString(16).padStart(2,'0')).join('');
}

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