function Footer() {
  const cols = [
    {
      title: 'Produto',
      links: [
        { l: 'Como funciona', h: '#como-funciona' },
        { l: 'Recursos', h: '#recursos' },
        { l: 'Diferenciais', h: '#diferenciais' },
      ],
    },
    {
      title: 'Conta',
      links: [
        { l: 'Criar conta', h: 'https://app.econome.com.br/register' },
        { l: 'Entrar no app', h: 'https://app.econome.com.br' },
      ],
    },
    {
      title: 'Legal',
      links: [
        { l: 'Termos de uso', h: '/termos.html' },
        { l: 'Privacidade', h: '/privacidade.html' },
        { l: 'Contato', h: '#contato', onClick: (e) => { e.preventDefault(); window.openContactModal && window.openContactModal(); } },
      ],
    },
  ];

  return (
    <footer style={{
      background: 'var(--bg-warm)',
      borderTop: '1px solid var(--line)',
      padding: '64px 0 32px',
    }}>
      <div className="container">
        <div className="footer-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.5fr repeat(3, 1fr)',
          gap: 48,
          marginBottom: 48,
        }}>
          <div>
            <Logo size={22} />
            <p style={{ marginTop: 16, fontSize: 14.5, color: 'var(--ink-3)', maxWidth: 280, lineHeight: 1.55 }}>
              Controle financeiro simples, consciente e responsivo.
            </p>
          </div>
          {cols.map(c => (
            <div key={c.title}>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 16 }}>
                {c.title}
              </div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.links.map(l => (
                  <li key={l.l}>
                    <a href={l.h} onClick={l.onClick} style={{ fontSize: 14.5, color: 'var(--ink-2)', transition: 'color 0.15s' }}
                      onMouseEnter={(e) => e.currentTarget.style.color = 'var(--purple)'}
                      onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-2)'}
                    >{l.l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 24,
          borderTop: '1px solid var(--line)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 16,
        }}>
          <p className="mono" style={{ fontSize: 12, color: 'var(--ink-4)' }}>
            © 2026 ECONOME · WWW.ECONOME.COM.BR
          </p>
          <p style={{ fontSize: 13, color: 'var(--ink-4)' }}>
            Feito com consciência no Brasil.
          </p>
        </div>

        <style>{`
          @media (max-width: 720px) {
            .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
          }
          @media (max-width: 480px) {
            .footer-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}

window.Footer = Footer;