function CTA() {
  const [fields, setFields] = React.useState({name:'', email:'', phone:'', msg:''});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState(false);
  const { isMobile } = useViewport();

  const set = (k) => (e) => setFields(f => ({...f, [k]: e.target.value}));

  const inputStyle = {
    fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:16,
    padding:'14px 0', background:'transparent',
    border:'none', borderBottom:'1px solid #DDD9D4', outline:'none',
    width:'100%', color:'#1D1D1B', borderRadius:0,
    transition:'border-color 200ms',
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    setError(false);
    try {
      const res = await fetch('https://formsubmit.co/ajax/lucasqueiroz@gmail.com', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          Nome: fields.name,
          Email: fields.email,
          Telefone: fields.phone,
          Mensagem: fields.msg,
          _subject: 'Novo contato pelo site LSQ',
          _captcha: 'false',
        }),
      });
      const data = await res.json();
      if (data.success === 'true' || data.success === true) {
        setSent(true);
      } else {
        setError(true);
      }
    } catch(_) {
      setError(true);
    } finally {
      setSending(false);
    }
  };

  return (
    <section id="contato" style={{
      background:'#F6F3F0', padding: isMobile ? '64px 20px 56px' : '100px 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',
          }}>Contato</span>
          <span style={{
            fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:13,
            color:'#9A9A97',
          }}>Resposta em até 48h</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'}}>VAMOS</span>
              <span data-split="char" data-split-delay="0.14" style={{display:'block', overflow:'hidden', paddingBottom:'0.18em', marginBottom:'-0.18em'}}>TRABALHAR</span>
              <span data-split="char" data-split-delay="0.28" style={{display:'block', overflow:'hidden', paddingBottom:'0.18em', marginBottom:'-0.18em'}}>JUNTOS?*</span>
            </h2>

            {/* Form */}
            {sent ? (
              <div style={{paddingTop:16}}>
                <div style={{fontFamily:'OBOSuper, Georgia, serif', fontSize:56, color:'#1D1D1B', lineHeight:1, marginBottom:20}}>*</div>
                <h3 style={{fontFamily:'HelveticaCompressed, "Arial Narrow", Arial, sans-serif', fontWeight:700, fontSize:36, textTransform:'uppercase', color:'#1D1D1B', margin:'0 0 12px'}}>Mensagem enviada.</h3>
                <p style={{fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:16, color:'#7A7A77', lineHeight:1.6, margin:0}}>Retornaremos em até 48 horas.</p>
              </div>
            ) : (
              <form action="https://formsubmit.co/lucasqueiroz@gmail.com" method="POST" onSubmit={handleSubmit} data-reveal style={{display:'flex', flexDirection:'column', gap:8}}>
                <input style={inputStyle} placeholder="Nome"
                  value={fields.name} onChange={set('name')} required
                  onFocus={e=>e.target.style.borderBottomColor='#1D1D1B'}
                  onBlur={e=>e.target.style.borderBottomColor='#DDD9D4'}
                />
                <input style={inputStyle} placeholder="E-mail" type="email"
                  value={fields.email} onChange={set('email')} required
                  onFocus={e=>e.target.style.borderBottomColor='#1D1D1B'}
                  onBlur={e=>e.target.style.borderBottomColor='#DDD9D4'}
                />
                <input style={inputStyle} placeholder="Telefone / WhatsApp" type="tel"
                  value={fields.phone} onChange={set('phone')}
                  onFocus={e=>e.target.style.borderBottomColor='#1D1D1B'}
                  onBlur={e=>e.target.style.borderBottomColor='#DDD9D4'}
                />
                <textarea style={{...inputStyle, minHeight:100, resize:'none', marginTop:8}}
                  placeholder="Como posso ajudar?"
                  value={fields.msg} onChange={set('msg')} required
                  onFocus={e=>e.target.style.borderBottomColor='#1D1D1B'}
                  onBlur={e=>e.target.style.borderBottomColor='#DDD9D4'}
                />
                <div style={{display:'flex', justifyContent:'flex-start', alignItems:'center', gap:16, marginTop:24}}>
                  {error && (
                    <span style={{fontFamily:'Helvetica, Arial, sans-serif', fontSize:12, color:'#C0392B', letterSpacing:'.04em'}}>Erro ao enviar. Tente pelo e-mail ou WhatsApp.</span>
                  )}
                  <button type="submit" disabled={sending} data-magnetic="0.4" style={{
                    fontFamily:'Helvetica, Arial, sans-serif', fontWeight:700, fontSize:12,
                    letterSpacing:'.12em', textTransform:'uppercase',
                    color:'#E3DDD8', background:'#1D1D1B',
                    padding:'13px 28px', border:'none', cursor:'pointer',
                    transition:'opacity 150ms',
                  }}
                  onMouseEnter={e=>e.currentTarget.style.opacity='.75'}
                  onMouseLeave={e=>e.currentTarget.style.opacity='1'}
                  >{sending ? 'Enviando…' : 'Enviar →'}</button>
                </div>
              </form>
            )}
          </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 });