// Footer da home-v3 — só ajusta as colunas/links pra bater com a nova
// navegação dessa página (ver header-v3.jsx). Reaproveita Logo e SocialIcon
// globais (definidos em icons.jsx / footer.jsx). Carregado DEPOIS de
// footer.jsx; sobrescreve window.Footer.
function Footer() {
  const cols = [
    {
      title: 'Produto',
      links: [
        { l: 'Como funciona', h: '#como-funciona' },
        { l: 'Recursos', h: '#entende-rapido' },
        { l: 'Para família', h: '#para-familia' },
        { l: 'Planos', h: '#planos' },
        { l: 'Dúvidas', h: '#faq' },
      ],
    },
    {
      title: 'Sobre o Econome',
      links: [
        { l: 'Quem somos', h: '/quem-somos.html' },
        { l: 'Contato', h: '#contato', onClick: (e) => { e.preventDefault(); window.openContactModal && window.openContactModal(); } },
      ],
    },
    {
      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: 'https://www.econome.com.br/termos.html' },
        { l: 'Privacidade', h: 'https://www.econome.com.br/privacidade.html' },
      ],
    },
  ];

  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(4, 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 }}>
              Organize sua vida financeira com mais clareza, sozinho ou em família.
            </p>
            <div className="footer-social" style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              {SOCIALS.map(s => (
                <a key={s.key} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label} title={s.label} className="footer-soc">
                  <SocialIcon kind={s.key} />
                </a>
              ))}
            </div>
          </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>{`
          .footer-soc { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elevated); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s; }
          .footer-soc:hover { color: var(--purple); border-color: var(--purple); }
          .footer-soc svg { display: block; }
          @media (max-width: 900px) {
            .footer-grid { grid-template-columns: 1.5fr repeat(2, 1fr) !important; }
          }
          @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;