const Footer = ({ onNavigate }) => (
  <footer style={ftS.footer}>
    <div className="mc-footer-inner" style={ftS.inner}>
      <div className="mc-footer-top" style={ftS.topRow}>
        <div style={ftS.brand}>
          <img src="../../assets/logo-1cor-clara.png" alt="Morato & Costa" style={ftS.logo} />
        </div>
        <div className="mc-footer-links" style={ftS.links}>
          <div style={ftS.col}>
            <span style={ftS.colTitle}>Serviços</span>
            {['Aposentadoria', 'BPC / LOAS', 'Auxílio-Doença', 'Pensão por Morte', 'Revisão de Benefícios'].map(s => (
              <button key={s} style={ftS.link} onClick={() => onNavigate('services')}>{s}</button>
            ))}
          </div>
          <div style={ftS.col}>
            <span style={ftS.colTitle}>Escritório</span>
            {[['Início','home'],['Sobre','about'],['Contato','contact']].map(([l, id]) => (
              <button key={l} style={ftS.link} onClick={() => onNavigate(id)}>{l}</button>
            ))}
          </div>
          <div style={ftS.col}>
            <span style={ftS.colTitle}>Contato</span>
            <span style={ftS.info}>(11) 9 7192-7652</span>
            <span style={ftS.info}>juridico_moratoecosta@yahoo.com</span>
            <span style={ftS.info}>Osasco, SP</span>
          </div>
        </div>
      </div>
      <div style={ftS.rule}></div>
      <div className="mc-footer-bottom" style={ftS.bottom}>
        <span style={ftS.copy}>© {new Date().getFullYear()} Morato &amp; Costa Advogados Associados. Todos os direitos reservados.</span>
        <span style={ftS.oab}>OAB/SP</span>
      </div>
    </div>
  </footer>
);

const ftS = {
  footer: { background: '#000', borderTop: '1px solid #1a1a1a' },
  inner: { maxWidth: 1200, margin: '0 auto', padding: '60px 40px 32px' },
  topRow: { display: 'flex', gap: 80, marginBottom: 48 },
  brand: { flex: '0 0 220px', display: 'flex', alignItems: 'center', justifyContent: 'center' },
  logo: { height: 110, opacity: 0.5, objectFit: 'contain' },
  tagline: { fontFamily: "'Libre Caslon Text', serif", fontStyle: 'italic', fontSize: 13, fontWeight: 400, color: 'rgba(255,255,255,0.3)', lineHeight: 1.5 },
  links: { flex: 1, display: 'flex', gap: 48 },
  col: { display: 'flex', flexDirection: 'column', gap: 10 },
  colTitle: { fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#C4A76E', marginBottom: 4 },
  link: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 300, color: 'rgba(255,255,255,0.4)', textAlign: 'left', padding: 0 },
  info: { fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 300, color: 'rgba(255,255,255,0.4)' },
  rule: { height: 1, background: '#1a1a1a', marginBottom: 24 },
  bottom: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
  copy: { fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.2)' },
  oab: { fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.2)' },
};

Object.assign(window, { Footer });