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: 'planejamento', label: 'Planejamento' },
    { id: 'operacoes',   label: 'Atração & Conversão' },
    { id: 'tecnologia',  label: 'Tecnologia' },
    { id: 'otimizacao',  label: 'Otimização' },
    { id: 'diagnostico', label: 'Agendar Diagnóstico' },
  ];

  const solutions = [
    { label: 'Processo + Tecnologia + Gestão', anchor: 'hero' },
    { label: 'Diagnóstico',                    anchor: 'problema' },
    { label: 'Solução',                        anchor: 'solucao' },
    { label: 'Diferenciação',                  anchor: 'diferenciacao' },
    { label: 'Maturidade Comercial',           anchor: 'maturidade' },
    { label: 'Simulador de Funil Ideal',       anchor: 'simulador' },
    { label: 'Indicadores Comerciais',         anchor: 'indicadores' },
    { label: 'Para quem é',                    anchor: 'para-quem' },
    { label: 'Tecnologia Parceira',            anchor: 'tecnologia-parceira' },
    { label: 'Próximo passo',                  anchor: 'proximo-passo' },
  ];

  const navigateToSection = (anchor) => {
    navigate('home');
    setTimeout(() => {
      const el = document.getElementById(anchor);
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    }, 200);
  };

  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="logo-barpes-footer.png" alt="BARPES Prospecção Estratégica" style={{ width: 140, height: 'auto', maxWidth: '100%', cursor: 'pointer' }} />
            </div>
            <p style={s.desc}>
              A BARPES Prospecção Estratégica estrutura Prospecção Estratégica, automação comercial e análise de vendas para PMEs.
            </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.label}
                style={s.link}
                onClick={() => navigateToSection(sol.anchor)}
                onMouseEnter={e => e.target.style.color = '#fff'}
                onMouseLeave={e => e.target.style.color = '#A6A6A6'}
              >{sol.label}</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 Prospecção Estratégica. Todos os direitos reservados.</span>
          <span style={s.copy}>Integradora de Crescimento Comercial para PMEs</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });