/* Clínica Viver v2 — Tweaks panel (headlines v2 + marca) */
const { useEffect } = React;

const HEADLINES = {
  A: {
    eyebrow: 'Exames de imagem em Brasília · Asa Sul e Taguatinga',
    html: 'Seu exame marcado para <span class="hl">hoje</span>. Convênio ou particular, sem esperar semanas.'
  },
  B: {
    eyebrow: 'Cuidado e prevenção · Asa Sul e Taguatinga',
    html: 'Cuidar da sua saúde com tranquilidade, <span class="hl">sem perder o dia inteiro numa fila</span>.'
  },
  C: {
    eyebrow: '+20 anos · +1 milhão de exames',
    html: '+1 milhão de exames realizados. O seu pode ficar pronto <span class="hl">em 15 minutos</span>.'
  }
};

const GREENS = {
  'Marca': ['#00A860', '#008049', '#007A47'],
  'Esmeralda': ['#10b981', '#059669', '#047857'],
  'Teal': ['#0d9488', '#0f766e', '#115e59']
};

const RADII = {
  'Suave': ['4px', '8px', '16px'],
  'Reto': ['2px', '3px', '4px'],
  'Arredondado': ['8px', '14px', '22px']
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "A",
  "green": ["#00A860", "#008049", "#007A47"],
  "cantos": "Suave",
  "heroImg": "Direita"
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const h = HEADLINES[t.headline] || HEADLINES.A;
    const elH = document.getElementById('heroHeadline');
    const elE = document.getElementById('heroEyebrow');
    if (elH) elH.innerHTML = h.html;
    if (elE) elE.textContent = h.eyebrow;

    const g = Array.isArray(t.green) ? t.green : GREENS.Marca;
    const root = document.documentElement.style;
    root.setProperty('--primary', g[0]);
    root.setProperty('--primary-dark', g[1]);
    root.setProperty('--primary-deep', g[2]);

    const r = RADII[t.cantos] || RADII.Suave;
    root.setProperty('--r-sm', r[0]);
    root.setProperty('--r-md', r[1]);
    root.setProperty('--r-lg', r[2]);

    const hero = document.querySelector('.hero .container');
    const media = document.querySelector('.hero-media');
    if (hero && media) {
      if (t.heroImg === 'Oculta') {
        media.style.display = 'none';
        hero.style.gridTemplateColumns = '1fr';
      } else {
        media.style.display = '';
        hero.style.gridTemplateColumns = '';
        media.style.order = (t.heroImg === 'Esquerda') ? '-1' : '';
      }
    }
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Conteúdo" />
      <TweakRadio label="Headline do hero" value={t.headline}
        options={['A', 'B', 'C']}
        onChange={(v) => setTweak('headline', v)} />
      <TweakSection label="Marca" />
      <TweakColor label="Verde da marca" value={t.green}
        options={Object.values(GREENS)}
        onChange={(v) => setTweak('green', v)} />
      <TweakRadio label="Cantos" value={t.cantos}
        options={Object.keys(RADII)}
        onChange={(v) => setTweak('cantos', v)} />
      <TweakSection label="Layout" />
      <TweakRadio label="Imagem do hero" value={t.heroImg}
        options={['Direita', 'Esquerda', 'Oculta']}
        onChange={(v) => setTweak('heroImg', v)} />
    </TweaksPanel>
  );
}

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