// AFF website — contato via WhatsApp (sem formulário)
function Contact() {
  return (
    <section style={{ background: 'var(--grad-navy)', padding: '92px var(--page-gutter)', position: 'relative', overflow: 'hidden' }}>
      <div className="two-col" style={{ maxWidth: 'var(--container-lg)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--gold-400)', marginBottom: 16 }}>Contato</div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 'clamp(28px,3.4vw,42px)', color: 'var(--text-on-navy)', margin: '0 0 22px', lineHeight: 1.1 }}>Vamos conversar sobre o seu caso</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.7, color: 'var(--navy-200)', margin: '0 0 32px' }}>
            A primeira consulta é o passo para entender suas opções. Fale
            diretamente com o escritório pelo WhatsApp ou utilize nossos
            canais de atendimento.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--text-on-navy)' }}>
            <div>📍 Rua Professor Almeida Cousin, 125, Sala 906 — Enseada do Suá — Vitória/ES</div>
            <div>✉ contato@affadvogados.adv.br</div>
            <div>☎ Escritório: (27) 99613-6983</div>
          </div>
        </div>
        <div className="wa-card" style={{
          background: 'var(--paper)', borderRadius: 'var(--radius-md)',
          border: '1px solid var(--border-hairline)', borderTop: '3px solid var(--gold-500)',
          padding: 'var(--space-8) var(--space-7)', boxShadow: 'var(--shadow-lg)', textAlign: 'center',
        }}>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 600, color: 'var(--navy-700)', marginBottom: 12 }}>Atendimento pelo WhatsApp</div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.7, color: 'var(--text-body)', margin: '0 auto 28px', maxWidth: 380 }}>
            Clique no botão abaixo para iniciar uma conversa com o escritório.
          </p>
          <a
            className="wa-btn"
            href="https://api.whatsapp.com/send?phone=5527996136983"
            target="_blank" rel="noopener noreferrer"
            aria-label="Falar com o escritório pelo WhatsApp"
            style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 12,
              width: '100%', boxSizing: 'border-box', padding: '16px 28px',
              background: 'var(--navy-700)', color: 'var(--text-on-navy)',
              fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
              letterSpacing: '0.06em', textTransform: 'uppercase', textDecoration: 'none',
              borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-sm)',
            }}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ color: 'var(--gold-400)', flex: 'none' }}><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.9-4.45 9.9-9.91A9.86 9.86 0 0 0 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24a8.2 8.2 0 0 1 8.24 8.25c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.13-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.14.16-.29.19-.54.06-.25-.12-1.05-.38-2-1.23-.73-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43l-.48-.01c-.17 0-.44.06-.66.31-.23.25-.87.85-.87 2.07 0 1.22.89 2.4 1.01 2.57.13.16 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.6.19 1.14.16 1.57.1.48-.07 1.47-.6 1.68-1.18.2-.58.2-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"></path></svg>
            <span>Falar pelo WhatsApp</span>
          </a>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-muted)', margin: '18px 0 0' }}>
            Responderemos assim que possível em horário comercial.
          </p>
        </div>
      </div>
    </section>
  );
}