function CTA() {
  const { isMobile } = useViewport();

  return (
    <section id="contato" style={{
      background:'#F6F3F0', padding: isMobile ? '32px 20px 56px' : '50px 56px 80px',
    }}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        <div data-reveal style={{
          display:'flex', justifyContent:'space-between', alignItems:'baseline',
          borderTop:'1px solid #DDD9D4', paddingTop:20, marginBottom:64,
        }}>
          <span style={{
            fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:13,
            color:'#9A9A97', letterSpacing:'.12em', textTransform:'uppercase',
          }}>{T('Contato', 'Contact')}</span>
          <span style={{
            fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:13,
            color:'#9A9A97',
          }}>{T('Resposta em até 24h', 'Reply within 24 hours')}</span>
        </div>

        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 48 : 96, alignItems:'start'}}>
          {/* Left — heading */}
          <div>
            <h2 style={{
              fontFamily:'HelveticaCompressed, "Arial Narrow", Arial, sans-serif',
              fontWeight:700, fontSize:'clamp(48px, 7vw, 96px)',
              textTransform:'uppercase', lineHeight:.9,
              color:'#1D1D1B', margin: isMobile ? '0 0 36px' : '0 0 48px', letterSpacing:'-.01em',
            }}>
              <span data-split="char" style={{display:'block', overflow:'hidden', paddingBottom:'0.18em', marginBottom:'-0.18em'}}>{T('VAMOS', "LET'S")}</span>
              <span data-split="char" data-split-delay="0.14" style={{display:'block', overflow:'hidden', paddingBottom:'0.18em', marginBottom:'-0.18em'}}>{T('TRABALHAR', 'WORK')}</span>
              <span data-split="char" data-split-delay="0.28" style={{display:'block', overflow:'hidden', paddingBottom:'0.18em', marginBottom:'-0.18em'}}>{T('JUNTOS?*', 'TOGETHER?*')}</span>
            </h2>
          </div>

          {/* Right — direct contact buttons */}
          <div data-reveal style={{display:'flex', flexDirection:'column', gap:12, maxWidth:420}}>
            {[
              { href:'https://wa.me/5511975514667?text=Quero%20trabalhar%20com%20a%20LSQ.', label:'WhatsApp', sub:'+55 11 97551 4667', icon:(
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style={{flexShrink:0}}><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
              ) },
              { href:'mailto:lucasqueiroz@gmail.com', label:'E-mail', sub:'lucasqueiroz@gmail.com', icon:(
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{flexShrink:0}}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 6 10 7 10-7"/></svg>
              ) },
              { href:'https://www.linkedin.com/in/lucasqueiroz86/', label:'LinkedIn', sub:'/in/lucasqueiroz86', icon:(
                <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" style={{flexShrink:0}}><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
              ) },
            ].map((c) => (
              <a key={c.label} href={c.href} target={c.href.startsWith('http') ? '_blank' : undefined} rel="noopener"
                style={{
                  display:'flex', alignItems:'center', gap:14, padding:'15px 22px', borderRadius:999,
                  border:'1px solid #DDD9D4', background:'transparent', color:'#1D1D1B',
                  textDecoration:'none', transition:'background .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.19,1,.22,1)',
                }}
                onMouseEnter={e=>{ const t=e.currentTarget; t.style.background='#1D1D1B'; t.style.color='#E3DDD8'; t.style.borderColor='#1D1D1B'; t.style.transform='translateX(6px)'; }}
                onMouseLeave={e=>{ const t=e.currentTarget; t.style.background='transparent'; t.style.color='#1D1D1B'; t.style.borderColor='#DDD9D4'; t.style.transform='translateX(0)'; }}
              >
                <span style={{display:'flex', color:'inherit'}}>{c.icon}</span>
                <span style={{display:'flex', flexDirection:'column', lineHeight:1.3}}>
                  <span style={{fontFamily:'Helvetica, Arial, sans-serif', fontWeight:700, fontSize:16}}>{c.label}</span>
                  <span style={{fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:12, opacity:.7}}>{c.sub}</span>
                </span>
                <span aria-hidden="true" style={{marginLeft:'auto', fontSize:20, fontWeight:400}}>↗</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CTA });