// Footer.jsx
const Footer = ({ onNavigate }) => (
  <footer style={{ background: '#001433', borderTop: '1px solid rgba(184,150,12,0.2)', padding: '48px 40px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 48, marginBottom: 40 }}>
      {/* Brand */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <button onClick={() => onNavigate('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <img src="assets/logo-dark.svg" alt="Dra. Ana Carolina Grillo" style={{ height: 40, width: 'auto', display: 'block' }}/>
        </button>
        <p style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.45)', lineHeight: 1.7, margin: 0, maxWidth: 280 }}>
          Endocrinologista com foco em cuidado humanizado e individualizado. Atendimento presencial em Brasília e online.
        </p>
        <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.08em' }}>CRM 27551/DF</div>
      </div>
      {/* Links */}
      <div>
        <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, fontWeight: 600, color: '#B8960C', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 16 }}>Navegação</div>
        {['sobre', 'especialidades', 'depoimentos', 'contato'].map(id => (
          <button key={id} onClick={() => onNavigate(id)} style={{
            display: 'block', background: 'none', border: 'none', cursor: 'pointer',
            fontFamily: "'Montserrat',sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.55)',
            padding: '5px 0', textAlign: 'left', textTransform: 'capitalize',
          }}>{id.charAt(0).toUpperCase() + id.slice(1)}</button>
        ))}
      </div>
      {/* Contact */}
      <div>
        <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, fontWeight: 600, color: '#B8960C', letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 16 }}>Contato</div>
        {[['WhatsApp', '(61) 9902-2123'], ['Instagram', '@draanacarolinagrillo'], ['Endereço', 'SGAS 614, Asa Sul\nBrasília, DF']].map(([k, v]) => (
          <div key={k} style={{ marginBottom: 12 }}>
            <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.08em', marginBottom: 2 }}>{k}</div>
            <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.6)', whiteSpace: 'pre-line' }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
    <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.25)' }}>© 2025 Dra. Ana Carolina Ferreira Grillo. Todos os direitos reservados.</span>
      <span style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 11, color: 'rgba(255,255,255,0.25)' }}>Identidade visual por Estúdio Belota</span>
    </div>
  </footer>
);

Object.assign(window, { Footer });