// Footer.jsx
const Footer = ({ onNavigate }) => (
  <footer style={{ background: '#33395B', 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-vertical-tan.png" alt="Dra. Ana Carolina Grillo" style={{ height: 110, 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>
        {[
          { label: 'WhatsApp', value: '(61) 99902-2123', href: 'https://wa.me/5561999022123?text=' + encodeURIComponent('Olá Dra. Ana Carolina, gostaria de agendar uma consulta.') },
          { label: 'Instagram', value: '@draanacarolinagrillo', href: 'https://instagram.com/draanacarolinagrillo' },
          { label: 'E-mail', value: 'draanacarolinagrillo@gmail.com', href: 'mailto:draanacarolinagrillo@gmail.com' },
          { label: 'Endereço', value: 'SGAS 614, Asa Sul\nBrasília, DF', href: 'https://www.google.com/maps/search/?api=1&query=' + encodeURIComponent('SGAS 614 Asa Sul Brasília DF 70200-740') },
        ].map(({ label, value, href }) => (
          <a key={label} href={href} target="_blank" rel="noopener noreferrer" style={{ display: 'block', marginBottom: 12, textDecoration: 'none', transition: 'opacity 0.2s' }} onMouseEnter={e => e.currentTarget.style.opacity = '0.75'} onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
            <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 10, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.08em', marginBottom: 2 }}>{label}</div>
            <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.6)', whiteSpace: 'pre-line' }}>{value}</div>
          </a>
        ))}
      </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 });