function Footer() {
  const cols = [
    { h: 'Soluções', items: ['Administração condominial', 'App do síndico', 'App do condômino', 'Métricas em tempo real', 'Atendimento humano'] },
    { h: 'Empresa', items: ['Sobre a Semog', 'Manifesto', 'Nossos valores', '35 anos', 'Carreiras'] },
    { h: 'Cidades', items: ['Recife · PE', 'João Pessoa · PB', 'Belém · PA', 'Caruaru · PE'] },
    { h: 'Contato', items: ['proposta@semog.com.br', '+55 81 0000 0000', 'WhatsApp do plantão'] }
  ];
  return (
    <footer style={{ padding: '24px 16px 16px' }}>
      <div style={{ background: '#0A1330', color: '#fff', borderRadius: 36, padding: '80px 80px 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 56, marginBottom: 64 }}>
          <div>
            <img src="../../assets/semog-logo.svg" alt="Semog" style={{ height: 36, filter: 'brightness(0) invert(1)', marginBottom: 24 }} />
            <p style={{ fontFamily: 'Saira', fontSize: 18, color: '#ACBCE0', lineHeight: 1.4, margin: 0, maxWidth: 280 }}>
              Preocupe-se apenas em morar.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
              {['Baixar app', 'Linkedin'].map((b) => (
                <a key={b} href="#" style={{
                  fontFamily: 'Inter', fontSize: 12, fontWeight: 500, color: '#fff',
                  padding: '8px 14px', borderRadius: 999, border: '1px solid rgba(255,255,255,0.18)', textDecoration: 'none'
                }}>{b}</a>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#7E96CC', marginBottom: 18 }}>{c.h}</div>
              {c.items.map((it) => (
                <div key={it} style={{ fontFamily: 'Inter', fontSize: 14, color: '#fff', marginBottom: 10, opacity: 0.9 }}>{it}</div>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#7E96CC' }}>© 2026 Semog Administradora · Todos os direitos reservados.</div>
          <div style={{ display: 'flex', gap: 24, fontFamily: 'Inter', fontSize: 12, color: '#7E96CC' }}>
            <a href="#" style={{ color: '#7E96CC' }}>Privacidade</a>
            <a href="#" style={{ color: '#7E96CC' }}>Termos</a>
            <a href="#" style={{ color: '#7E96CC' }}>Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.SemogFooter = Footer;