// ===== FINAL CTA + FOOTER =====
function FinalCTA() {
  return (
    <section className="relative overflow-hidden py-24 md:py-32" style={{ background: C.inkDark, color: C.cream }}>
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 50% 50%, rgba(255,139,122,0.15) 0%, transparent 55%)`
      }}></div>
      <div className="absolute inset-0 opacity-[0.04] pointer-events-none" style={{
        backgroundImage: 'linear-gradient(rgba(255,139,122,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,139,122,0.6) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        maskImage: 'radial-gradient(ellipse at center, black 25%, transparent 75%)'
      }}></div>
      <div className="scanline"></div>

      <div className="relative max-w-[800px] mx-auto px-5 md:px-8 text-center">
        <h2 className="font-display" style={{ fontSize: 'clamp(34px, 5vw, 64px)', lineHeight: 1.04, fontWeight: 700, letterSpacing: '-0.03em' }}>
          O primeiro passo é <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>uma conversa.</em>
        </h2>
        <p className="mt-7 text-lg" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.6 }}>
          Agende sua Consulta Estratégica e descubra o protocolo feito para você.
        </p>

        <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
          <PrimaryCTA href={waLink('Olá! Quero agendar minha Consulta Estratégica.')} target="_blank">
            Agendar minha Consulta Estratégica
          </PrimaryCTA>
          <GhostCTA href={waLink('Olá! Quero falar com a equipe da Nubelle.')} target="_blank">
            Falar com a nossa equipe
          </GhostCTA>
        </div>

        <div className="mt-12 flex flex-wrap justify-center gap-x-7 gap-y-3 text-xs" style={{ color: 'rgba(244,237,227,0.55)' }}>
          <span>✓ Equipe especializada em estética avançada</span>
          <span>✓ 150+ avaliações 5★ no Google</span>
          <span>✓ Rio Vermelho · Salvador</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="relative py-16 md:py-20" style={{ background: C.ink, color: 'rgba(244,237,227,0.7)', borderTop: '1px solid rgba(255,139,122,0.15)' }}>
      <div className="max-w-[1300px] mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-12 gap-10">
          <div className="md:col-span-4">
            <img src="assets/nubelle-logo-rosa.png" alt="Nubelle Salvador" style={{ width: 64, height: 64 }} />
            <p className="mt-5 text-sm max-w-xs" style={{ lineHeight: 1.6 }}>
              Clínica de estética avançada em Salvador. Diagnóstico, protocolo personalizado e acompanhamento real.
            </p>
            <div className="mt-6 flex gap-3">
              {[
                { label: 'Instagram', icon: 'M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.3 2.2.5.6.2 1 .5 1.5 1s.8.9 1 1.5c.2.4.4 1 .5 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.3 1.8-.5 2.2-.2.6-.5 1-1 1.5s-.9.8-1.5 1c-.4.2-1 .4-2.2.5-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.3-2.2-.5-.6-.2-1-.5-1.5-1s-.8-.9-1-1.5c-.2-.4-.4-1-.5-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8c.1-1.2.3-1.8.5-2.2.2-.6.5-1 1-1.5s.9-.8 1.5-1c.4-.2 1-.4 2.2-.5C8.4 2.2 8.8 2.2 12 2.2zM12 6.4a5.6 5.6 0 1 0 0 11.2 5.6 5.6 0 0 0 0-11.2zm0 9.2a3.6 3.6 0 1 1 0-7.2 3.6 3.6 0 0 1 0 7.2zm5.8-9.4a1.3 1.3 0 1 1-2.6 0 1.3 1.3 0 0 1 2.6 0z' },
                { label: 'WhatsApp', icon: 'M17.6 6.32A7.85 7.85 0 0 0 12.05 4a7.94 7.94 0 0 0-6.88 11.9L4 20l4.2-1.1a7.93 7.93 0 0 0 3.84.98h.01a7.94 7.94 0 0 0 5.55-13.56z' },
              ].map(s => (
                <a key={s.label} href="#" className="w-10 h-10 rounded-full flex items-center justify-center transition hover:scale-110" style={{ background: 'rgba(255,139,122,0.08)', color: C.neon, border: '1px solid rgba(255,139,122,0.25)' }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d={s.icon}/></svg>
                </a>
              ))}
            </div>
          </div>
          <div className="md:col-span-3">
            <div className="text-[11px] uppercase tracking-[0.3em] mb-5 font-semibold" style={{ color: C.coral }}>Navegação</div>
            <ul className="space-y-3 text-sm">
              {[['Consulta Estratégica','#consulta'],['Tratamentos','#areas'],['Protocolos','#protocolos'],['Avaliações','#avaliacoes'],['FAQ','#faq']].map(([l,h])=>(
                <li key={l}><a href={h} className="hover:opacity-100 transition" style={{ opacity: 0.75 }}>{l}</a></li>
              ))}
            </ul>
          </div>
          <div className="md:col-span-3">
            <div className="text-[11px] uppercase tracking-[0.3em] mb-5 font-semibold" style={{ color: C.coral }}>Visite</div>
            <p className="text-sm" style={{ lineHeight: 1.6 }}>
              Rua Ilhéus, 187<br />Rio Vermelho<br />Salvador / BA<br />CEP 41940-590
            </p>
          </div>
          <div className="md:col-span-2">
            <div className="text-[11px] uppercase tracking-[0.3em] mb-5 font-semibold" style={{ color: C.coral }}>Atendimento</div>
            <p className="text-sm" style={{ lineHeight: 1.7 }}>
              Seg a Sex · 9h às 18h<br />Sábado · 9h às 13h<br />WhatsApp · (71) 99262-8880
            </p>
          </div>
        </div>

        <div className="mt-12 pt-8 flex flex-col md:flex-row gap-3 items-start md:items-center justify-between text-xs" style={{ borderTop: '1px solid rgba(244,237,227,0.1)', color: 'rgba(244,237,227,0.5)' }}>
          <div>© 2026 Nubelle Salvador. Todos os direitos reservados.</div>
          <div>Rua das Pitangueiras, Rio Vermelho · Salvador / BA</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FinalCTA, Footer });