// Mesmo convite e mesma configuração nas duas páginas. Sem link publicado válido, não desenha nada.
function CanalWhatsApp({ palette, inicio = false }) {
  const S = window.OBPC_SITE;
  const dados = S.useSite().dados_igreja;
  const link = S.canalWhatsApp(dados.canal_whatsapp);
  if (!link) return null;
  const tituloId = inicio ? 'inicio-canal-titulo' : 'mensagem-canal-titulo';
  const ajudaId = inicio ? 'inicio-canal-ajuda' : 'mensagem-canal-ajuda';
  return (
    <aside className={`obpc-canal${inicio ? ' obpc-canal--inicio' : ''}`} aria-labelledby={tituloId}
      style={{ borderColor: `${palette.accent}40`, background: `${palette.accent}08`, color: palette.fg }}>
      <div>
        <h2 id={tituloId}>Uma palavra de fé no WhatsApp</h2>
        <p style={{ color: palette.muted }}>Reflexões e mensagens do dia da OBPC Jundiaí.</p>
        {inicio && <a className="obpc-canal-mensagem" href="/mensagem-do-dia/" style={{ color: palette.accent }}>Ler a mensagem de hoje →</a>}
      </div>
      <div className="obpc-canal-acao">
        <a className="obpc-btn" href={link} target="_blank" rel="noopener noreferrer" aria-describedby={ajudaId}
          style={{ background: palette.accent, color: palette.bg, textDecoration: 'none' }}>
          Seguir canal no WhatsApp <span aria-hidden="true">↗</span>
        </a>
        <p id={ajudaId} className="obpc-canal-ajuda" style={{ color: palette.muted }}>
          Abra o canal e escolha “Seguir”.
        </p>
      </div>
    </aside>
  );
}
window.CanalWhatsApp = CanalWhatsApp;