/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect, useTweaks */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#D97757",
  "density": "default",
  "heroVariant": "negocios"
}/*EDITMODE-END*/;

const HERO_VARIANTS = {
  negocios: {
    h1: 'Engenharia que serve<br/>o <em>negócio</em>.',
    sub: 'Não o contrário. Há 30 anos.',
  },
  regulados: {
    h1: 'Tecnologia que escala onde erro <em>custa caro</em>.',
    sub: 'Para empresas que não podem improvisar com engenharia.',
  },
  founder: {
    h1: 'Já fundei, escalei, captei e <em>vendi</em>.',
    sub: 'Agora ajudo você a fazer o mesmo.',
  },
};

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

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.setAttribute('data-density', t.density);
    document.documentElement.style.setProperty('--accent', t.accent);

    const variant = HERO_VARIANTS[t.heroVariant] || HERO_VARIANTS.negocios;
    const h1El = document.querySelector('.h1');
    const subEl = document.querySelector('.hero-sub');
    if (h1El) h1El.innerHTML = variant.h1;
    if (subEl) subEl.textContent = variant.sub;
  }, [t]);

  return (
    <TweaksPanel title="Tweaks" subtitle="MMC Tech · variações">
      <TweakSection title="Tema">
        <TweakRadio label="Modo" value={t.theme} options={[
          { value: 'dark', label: 'Dark' },
          { value: 'light', label: 'Light' },
        ]} onChange={v => setTweak('theme', v)} />
      </TweakSection>

      <TweakSection title="Acento">
        <TweakColor label="Cor" value={t.accent} options={['#D97757','#FF6B35','#E8B931','#5EB4A4','#7C9CFF']} onChange={v => setTweak('accent', v)} />
      </TweakSection>

      <TweakSection title="Densidade">
        <TweakRadio label="Respiro" value={t.density} options={[
          { value: 'compact', label: 'Compacto' },
          { value: 'default', label: 'Padrão' },
          { value: 'spacious', label: 'Amplo' },
        ]} onChange={v => setTweak('density', v)} />
      </TweakSection>

      <TweakSection title="Hero — posicionamento">
        <TweakSelect label="Ângulo" value={t.heroVariant} options={[
          { value: 'negocios', label: 'Â1 · Engenharia + negócio' },
          { value: 'regulados', label: 'Â2 · Regulados + crítico' },
          { value: 'founder', label: 'Â3 · DNA fundador' },
        ]} onChange={v => setTweak('heroVariant', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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