const Footer = ({ navigate }) => {
  const s = {
    footer: {
      background: '#000000',
      borderTop: '1px solid rgba(255,255,255,0.07)',
      padding: '64px 32px 32px',
    },
    inner: { maxWidth: 1280, margin: '0 auto' },
    grid: {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 40,
      marginBottom: 48,
    },
    logo: {
      fontFamily: 'Montserrat, sans-serif',
      fontWeight: 800, fontSize: 18, color: '#fff',
      marginBottom: 12, cursor: 'pointer',
    },
    desc: { fontFamily: 'Arial, sans-serif', fontSize: 14, color: '#A6A6A6', lineHeight: 1.7 },
    colTitle: {
      fontFamily: 'Montserrat, sans-serif', fontWeight: 700,
      fontSize: 12, color: '#fc6466', letterSpacing: '1.2px',
      textTransform: 'uppercase', marginBottom: 16,
    },
    link: {
      fontFamily: 'Arial, sans-serif', fontSize: 14, color: '#A6A6A6',
      marginBottom: 10, cursor: 'pointer', display: 'block',
      transition: 'color 0.2s',
    },
    bottom: {
      borderTop: '1px solid rgba(255,255,255,0.07)',
      paddingTop: 24,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      flexWrap: 'wrap', gap: 12,
    },
    copy: { fontFamily: 'Arial, sans-serif', fontSize: 13, color: '#545454' },
  };

  const navLinks = [
    { id: 'home', label: 'Home' },
    { id: 'metodologia', label: 'Metodologia' },
    { id: 'servicos', label: 'Serviços' },
    { id: 'tecnologia', label: 'Tecnologia' },
    { id: 'diagnostico', label: 'Diagnóstico Comercial' },
  ];

  const solutions = [
    'Prospecção Estratégica','Inbound','Outbound','CRM',
    'Automação','Gestão de Propostas','Indicadores',
  ];

  return (
    <footer style={s.footer}>
      <div style={s.inner}>
        <div style={s.grid} className="footer-grid">
          {/* Col 1 */}
          <div>
            <div style={{...s.logo, display:'flex', alignItems:'center'}} onClick={() => navigate('home')}>
              <img src={window.__resources && window.__resources.barpesLogo ? window.__resources.barpesLogo : "uploads/barpes-logo-full.png"} alt="BARPES DIGITAL" style={{ height:32, width:'auto' }} />
            </div>
            <p style={s.desc}>
              A BARPES DIGITAL estrutura Prospecção Estratégica, automação comercial e análise de vendas para PMEs B2B.
            </p>
          </div>

          {/* Col 2 */}
          <div>
            <div style={s.colTitle}>Navegação</div>
            {navLinks.map(l => (
              <span
                key={l.id}
                style={s.link}
                onClick={() => navigate(l.id)}
                onMouseEnter={e => e.target.style.color = '#fff'}
                onMouseLeave={e => e.target.style.color = '#A6A6A6'}
              >{l.label}</span>
            ))}
          </div>

          {/* Col 3 */}
          <div>
            <div style={s.colTitle}>Soluções</div>
            {solutions.map(sol => (
              <span
                key={sol}
                style={s.link}
                onMouseEnter={e => e.target.style.color = '#fff'}
                onMouseLeave={e => e.target.style.color = '#A6A6A6'}
              >{sol}</span>
            ))}
          </div>

          {/* Col 4 */}
          <div>
            <div style={s.colTitle}>Contato</div>
            {[
              { label: 'WhatsApp', href: 'https://wa.me/5500000000000' },
              { label: 'E-mail', href: 'mailto:contato@barpesdigital.com.br' },
              { label: 'LinkedIn', href: '#' },
              { label: 'Instagram', href: '#' },
            ].map(c => (
              <a
                key={c.label}
                href={c.href}
                style={{ ...s.link, textDecoration: 'none' }}
                onMouseEnter={e => e.target.style.color = '#fff'}
                onMouseLeave={e => e.target.style.color = '#A6A6A6'}
              >{c.label}</a>
            ))}
          </div>
        </div>

        <div style={s.bottom}>
          <span style={s.copy}>© 2025 BARPES DIGITAL. Todos os direitos reservados.</span>
          <span style={s.copy}>Integradora de Crescimento Comercial para PMEs B2B</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });