// Section 11 — Final CTA + footer + fixed WhatsApp FAB.
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(191,232,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(46px, 8vw, 112px)', lineHeight: 1.0, letterSpacing: '-.015em', color: 'var(--ink-2)', margin: '0 auto', maxWidth: '14ch' }}>
            Pronto para ter a sua <span className="em">vitrine?</span>
          </h2>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 38, flexWrap: 'wrap' }}>
            <MagneticButton href="#previa" className="btn btn-primary btn-lg">Ver minha prévia grátis <Icon name="arrow" size={18} color="#fff" /></MagneticButton>
            <a href="#" className="btn btn-ghost btn-lg"><Icon name="whatsapp" size={18} color="var(--brand-700)" /> Falar no WhatsApp</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: 'Vitrini', items: ['Como funciona', 'Casos', 'Planos', 'FAQ'] },
    { h: 'Contato', items: ['contato@vitrini.dev.br', 'WhatsApp', 'Instagram'] },
  ];
  return (
    <footer style={{ background: 'var(--ink)', color: '#fff', paddingTop: 64, paddingBottom: 36 }}>
      <div className="container grid-3" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 32 }}>
        <div>
          <Wordmark dark />
          <p style={{ fontSize: 14, lineHeight: 1.6, color: '#9fb3ab', marginTop: 16, maxWidth: '32ch' }}>
            Sua vitrine digital, pronta em 48h. Site profissional para o seu negócio local — com a sua cara.
          </p>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--mint)', marginBottom: 14 }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map(it => (
                <a key={it} href="#" style={{ fontSize: 14, color: '#c7d4ce', textDecoration: 'none' }}
                  onMouseEnter={e => e.currentTarget.style.color = '#fff'} onMouseLeave={e => e.currentTarget.style.color = '#c7d4ce'}>{it}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="container" style={{ borderTop: '1px solid rgba(255,255,255,.1)', marginTop: 48, paddingTop: 22, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#7d8f88' }}>© 2026 Vitrini · vitrini.dev.br</span>
        <span style={{ fontSize: 12, color: '#7d8f88' }}>Feita em Curitiba, para o Brasil.</span>
      </div>
    </footer>
  );
}

function StickyWhatsApp() {
  return (
    <a href="#previa" 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;