/* Footer.jsx — institutional footer */
const Footer = ({ onNav }) => {
  const groups = [
    { t: 'Serviços', items: [
      { label: 'Agentes de IA para atendimento', href: '/servicos/agentes-de-ia/' },
      { label: 'Automações de processos', href: '/servicos/automacoes/' },
      { label: 'Integrações de canais', href: '/servicos/integracoes/' },
      { label: 'Criação de sites com IA', href: '/servicos/sites-e-sistemas/' },
      { label: 'Aplicativos web e mobile', href: '/servicos/sites-e-sistemas/' },
      { label: 'Sistemas internos', href: '/servicos/sites-e-sistemas/' },
      { label: 'Consultoria em IA', href: '/servicos/consultoria/' },
    ] },
    { t: 'Agência', items: [
      { label: 'Sobre', nav: 'sobre' },
      { label: 'Como funciona', nav: 'como' },
      { label: 'Soluções', nav: 'solucoes' },
      { label: 'Benefícios', nav: 'beneficios' },
    ] },
    { t: 'Contato', items: [
      { label: 'WhatsApp', nav: 'contato' },
      { label: 'E-mail', nav: 'contato' },
      { label: 'Solicitar demonstração', nav: 'contato' },
    ] },
  ];
  return (
    <footer id="sobre" style={{ background: '#05070D', borderTop: '1px solid rgba(255,255,255,0.06)', padding: '64px 0 32px' }}>
      <Container>
        <div className="grid-4" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <img src="/assets/logo-white.png" alt="AR · Agência de IA & Automações" style={{ width: 42, height: 42 }} />
              <span style={{ fontFamily: 'var(--ar-font-body)', fontSize: 11.5, fontWeight: 600, letterSpacing: '0.16em', color: 'var(--ar-text-muted)', textTransform: 'uppercase' }}>Agência de IA<br />&amp; Automações</span>
            </div>
            <p style={{ fontFamily: 'var(--ar-font-body)', fontSize: 14, color: 'var(--ar-text-muted)', lineHeight: 1.55, maxWidth: 360, margin: 0 }}>
              Tecnologia inteligente, acessível e estratégica para empresas modernas. Transformamos IA em resultado prático.
            </p>
          </div>
          {groups.map(g => (
            <div key={g.t}>
              <div style={{ fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 13, color: 'var(--ar-text-main)', marginBottom: 14, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{g.t}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {g.items.map(it => (
                  it.href
                    ? <a key={it.label} href={it.href} style={{ fontFamily: 'var(--ar-font-body)', fontSize: 14, color: 'var(--ar-text-muted)', cursor: 'pointer' }}>{it.label}</a>
                    : <a key={it.label} href={'/#' + it.nav} onClick={(e) => { e.preventDefault(); onNav && onNav(it.nav); }} style={{ fontFamily: 'var(--ar-font-body)', fontSize: 14, color: 'var(--ar-text-muted)', cursor: 'pointer' }}>{it.label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--ar-font-body)', fontSize: 12, color: 'var(--ar-text-muted)', flexWrap: 'wrap', gap: 12 }}>
          <div>© 2026 AR · Agência de IA &amp; Automações</div>
          <div style={{ display: 'flex', gap: 18 }}>
            <a style={{ cursor: 'pointer' }}>Termos</a><a style={{ cursor: 'pointer' }}>Privacidade</a><a style={{ cursor: 'pointer' }}>Cookies</a>
          </div>
        </div>
      </Container>
    </footer>
  );
};

window.Footer = Footer;