// tweaks-app.jsx — Tweaks island for the Ocote landing.
// Mounts only the TweaksPanel; applies values to the vanilla DOM via CSS vars + content.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#E8843A", "#F4B265"],
  "heroBg": "carbon",
  "heroMedia": "terminal",
  "headline": "negra"
}/*EDITMODE-END*/;

const HEADLINES = {
  negra:  'Enciende la<br><span class="lit">pantalla negra.</span>',
  lumbre: 'La <span class="lit">lumbre</span><br>de tu terminal.',
  ruido:  'Tu shell,<br><span class="lit">sin ruido.</span>',
};

function hexToRgba(hex, a) {
  const h = hex.replace('#', '');
  const n = parseInt(h.length === 3 ? h.split('').map((c) => c + c).join('') : h, 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
}

function applyTweaks(t) {
  const root = document.documentElement.style;
  const acc = Array.isArray(t.accent) ? t.accent : [t.accent, t.accent];
  root.setProperty('--accent', acc[0]);
  root.setProperty('--accent-hi', acc[1]);
  root.setProperty('--ember-glow', hexToRgba(acc[0], 0.16));

  const hero = document.querySelector('.hero');
  if (hero) {
    hero.classList.toggle('brasa', t.heroBg === 'brasa');
    hero.classList.toggle('shot', t.heroMedia === 'shot');
  }
  const h1 = document.querySelector('.hero h1');
  if (h1) h1.innerHTML = HEADLINES[t.headline] || HEADLINES.negra;
}

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color" />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={[
          ['#E8843A', '#F4B265'],
          ['#E8A53A', '#F4C56B'],
          ['#6DD8C8', '#A6E8DD'],
          ['#D9602E', '#F08A52'],
        ]}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Hero" />
      <TweakRadio
        label="Fondo"
        value={t.heroBg}
        options={[{ value: 'carbon', label: 'Carbón' }, { value: 'brasa', label: 'Brasa' }]}
        onChange={(v) => setTweak('heroBg', v)}
      />
      <TweakRadio
        label="Visual"
        value={t.heroMedia}
        options={[{ value: 'terminal', label: 'Terminal' }, { value: 'shot', label: 'Captura' }]}
        onChange={(v) => setTweak('heroMedia', v)}
      />
      <TweakSelect
        label="Titular"
        value={t.headline}
        options={[
          { value: 'negra', label: 'Pantalla negra' },
          { value: 'lumbre', label: 'La lumbre' },
          { value: 'ruido', label: 'Sin ruido' },
        ]}
        onChange={(v) => setTweak('headline', v)}
      />
    </TweaksPanel>
  );
}

// Persisted tweak values live in the EDITMODE block above (the host rewrites it
// on disk); useTweaks seeds from it and the effect applies them on mount.
ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);