// Whatsapp.jsx — Seção 5
const Whatsapp = () => (
  <section id="canal" className="section section-purple">
    {/* decorative grafismo background */}
    <svg viewBox="0 0 400 300" style={{
      position: 'absolute', right: -40, top: -40, width: 460, height: 340,
      opacity: 0.10, pointerEvents: 'none',
    }}>
      <rect x="20" y="20" width="160" height="160" fill="none" stroke="#fff" strokeWidth="3"/>
      <path d="M 192 20 A 160 160 0 0 1 352 180 L 192 180 Z" fill="none" stroke="#fff" strokeWidth="3"/>
      <circle cx="192" cy="180" r="20" fill="var(--bv-purple)" stroke="#fff" strokeWidth="3"/>
    </svg>
    <div className="bv-container" style={{ position: 'relative', zIndex: 1 }}>
      <div style={{ maxWidth: 720 }}>
        <div className="eyebrow on-dark" style={{ marginBottom: 16 }}>
          Parte 4 · Acompanhe de perto
        </div>
        <h2 style={{
          fontSize: 'clamp(30px, 3.6vw, 46px)', lineHeight: 1.1,
          fontWeight: 700, color: '#fff',
          letterSpacing: '-0.02em', margin: '0 0 20px',
        }}>
          Belavista News no WhatsApp.
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', maxWidth: 600, margin: 0 }}>
          O canal traz novidades e eventos para quem quer acompanhar o crescimento
          da faculdade de perto — tornando assim as orações mais concretas.
        </p>
      </div>

      <div className="whatsapp-row">
        <a className="whatsapp-card" href="https://chat.whatsapp.com/EORh36P9tfQKpRY0QeWC5B?mode=gi_t" target="_blank" rel="noopener">
          <div className="wa-icon"><Icon.Whatsapp size={22} /></div>
          <div className="wa-text">
            <div className="label">Canal</div>
            <div className="name">Belavista News · homens</div>
          </div>
          <div className="wa-arrow"><Icon.ArrowRight size={18} /></div>
        </a>
        <a className="whatsapp-card" href="https://chat.whatsapp.com/HU3qSQS2p0l3khwl1ESIYJ" target="_blank" rel="noopener">
          <div className="wa-icon"><Icon.Whatsapp size={22} /></div>
          <div className="wa-text">
            <div className="label">Canal</div>
            <div className="name">Belavista News · mulheres</div>
          </div>
          <div className="wa-arrow"><Icon.ArrowRight size={18} /></div>
        </a>
      </div>
    </div>
  </section>
);
window.Whatsapp = Whatsapp;