// CTA final + footer + WhatsApp flutuante
function FinalCTA() {
  return (
    <section className="section" style={{ position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', width: 600, height: 600, left: '50%', top: '10%', transform: 'translateX(-50%)', background: 'radial-gradient(circle, rgba(216,230,221,.55), transparent 62%)', filter: 'blur(72px)' }} />
      </div>
      <div className="container" style={{ position: 'relative' }}>
        <Reveal>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(40px, 6.5vw, 84px)', lineHeight: 1.05, letterSpacing: '-.015em', color: 'var(--ink-2)', margin: '0 auto', maxWidth: '16ch' }}>
            Começar é o passo <span style={{ fontStyle: 'italic', color: 'var(--brand)' }}>mais difícil.</span>
          </h2>
          <p style={{ fontSize: 18, color: 'var(--muted)', marginTop: 22, maxWidth: '40ch', marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.6 }}>
            E também o mais importante. Quando estiver pronto, estarei aqui.
          </p>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
            <a href={window.DOCTORALIA} target="_blank" rel="noopener" className="btn btn-primary btn-lg">
              <Icon name="calendar" size={18} color="#fff" /> Agendar pelo Doctoralia
            </a>
            <a href={window.WHATSAPP} target="_blank" rel="noopener" className="btn btn-ghost btn-lg">
              <Icon name="whatsapp" size={18} /> Falar primeiro no WhatsApp
            </a>
          </div>
          <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 18 }}>Respondo em horário comercial · Sigilo profissional garantido.</p>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: '#fff', paddingTop: 56, paddingBottom: 32 }}>
      <div className="container grid-3" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 32 }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
            <img src="logo-mf-symbol-sm.png" alt="" style={{ display: 'block', height: 44, width: 'auto' }} />
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 500, color: '#fff' }}>Maria Fernanda Ribas</span>
          </div>
          <p style={{ fontSize: 13.5, lineHeight: 1.6, color: '#9fb0a8', marginTop: 16, maxWidth: '36ch' }}>
            Psicóloga clínica em Curitiba · CRP 08/11383 · Abordagem sistêmica · Atendimento presencial e online.
          </p>
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--mint)', marginBottom: 14 }}>Navegação</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[['Sobre', '#sobre'], ['Abordagem', '#abordagem'], ['Como funciona', '#como'], ['Investimento', '#precos'], ['FAQ', '#faq']].map(([l, h]) => (
              <a key={l} href={h} style={{ fontSize: 14, color: '#c7d4ce', textDecoration: 'none' }}>{l}</a>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--mint)', marginBottom: 14 }}>Contato</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <a href={window.WHATSAPP} target="_blank" rel="noopener" style={{ fontSize: 14, color: '#c7d4ce', textDecoration: 'none' }}>WhatsApp · (41) 99671-5556</a>
            <a href={window.DOCTORALIA} target="_blank" rel="noopener" style={{ fontSize: 14, color: '#c7d4ce', textDecoration: 'none' }}>Doctoralia</a>
            <a href="https://www.instagram.com/mfernandapsico/" target="_blank" rel="noopener" style={{ fontSize: 14, color: '#c7d4ce', textDecoration: 'none' }}>@mfernandapsico</a>
            <span style={{ fontSize: 13, color: '#9fb0a8', marginTop: 4 }}>Rua Fernando Simas, 705 · Sala 14 · Bigorrilho · Curitiba</span>
          </div>
        </div>
      </div>
      <div className="container" style={{ borderTop: '1px solid rgba(255,255,255,.1)', marginTop: 40, paddingTop: 22, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#7d8f88' }}>© 2026 Maria Fernanda Ribas · CRP 08/11383</span>
        <span style={{ fontSize: 12, color: '#7d8f88' }}>Feito com cuidado em Curitiba.</span>
      </div>
    </footer>
  );
}

function StickyWhatsApp() {
  return (
    <a href={window.WHATSAPP} target="_blank" rel="noopener" aria-label="Falar no WhatsApp" style={{ position: 'fixed', right: 22, bottom: 22, zIndex: 40, width: 58, height: 58, borderRadius: 999, background: '#1f8a5b', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 16px 32px -10px rgba(31,138,91,.6)' }}>
      <span className="pulsering" style={{ position: 'absolute', inset: 0, borderRadius: 999, border: '2px solid #1f8a5b' }} />
      <Icon name="whatsapp" size={26} color="#fff" />
      <style>{`@keyframes pr { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.7);opacity:0} } .pulsering{ animation: pr 2.4s ease-out infinite; }`}</style>
    </a>
  );
}

window.FinalCTA = FinalCTA;
window.Footer = Footer;
window.StickyWhatsApp = StickyWhatsApp;