// Contato — bold CTA + WhatsApp
function Contato() {
  return (
    <section className="section" id="contato">
      <div className="container">
        <div style={{
          background: 'var(--ink)', color: '#fff',
          borderRadius: 28, padding: 'clamp(40px, 6vw, 80px)',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* Bg grid */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
            backgroundSize: '32px 32px',
          }}></div>
          {/* Glow */}
          <div style={{
            position: 'absolute', right: -100, top: -100,
            width: 500, height: 500, borderRadius: '50%',
            background: 'radial-gradient(closest-side, rgba(91,71,245,0.5), transparent)',
          }}></div>

          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 60, alignItems: 'center' }} className="cta-grid">
            <div>
              <span className="mono" style={{ fontSize: 13, color: 'var(--accent)' }}>$ contato --novo-projeto</span>
              <h2 className="display" style={{
                fontSize: 'clamp(40px, 6vw, 84px)', fontWeight: 700, margin: '12px 0 20px',
                lineHeight: 1, letterSpacing: '-0.04em', color: '#fff', textWrap: 'balance',
              }}>
                Vamos criar <span style={{ color: 'var(--primary)', fontStyle: 'italic', fontWeight: 600 }}>juntos?</span>
              </h2>
              <p style={{ color: '#9a9aaa', fontSize: 18, maxWidth: 480, margin: '0 0 32px', lineHeight: 1.5 }}>
                Estamos a um clique de distância pra discutir seu próximo projeto. Manda uma mensagem e vamos transformar sua ideia em realidade digital.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a href="https://wa.me/5531982494098" target="_blank" rel="noopener" className="btn" style={{ background: '#25D366', color: '#fff' }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2zm5.5 14.2c-.2.6-1.2 1.2-1.7 1.2-1.4 0-3.4-1-5.1-2.7-1.7-1.7-2.8-3.7-2.8-5.1 0-.5.6-1.5 1.2-1.7.2 0 .5-.1.7 0 .2 0 .4 0 .5.4l.7 1.7c.1.2 0 .4 0 .6l-.5.7c-.1.1-.2.3 0 .5.4.7.9 1.4 1.5 2 .6.6 1.3 1.1 2 1.5.2.1.4 0 .5-.1l.7-.5c.2-.1.4-.1.6 0l1.7.7c.4.1.4.3.4.5z" /></svg>
                  Chamar no WhatsApp · +55 31 98249-4098
                </a>
                <a href="mailto:contato@devsocialmedia.com.br" className="btn" style={{ background: 'rgba(255,255,255,0.1)', color: '#fff', border: '1px solid rgba(255,255,255,0.2)' }}>
                  contato@devsocialmedia.com.br
                </a>
              </div>
              <div style={{ display: 'flex', gap: 32, marginTop: 40, flexWrap: 'wrap' }}>
                <div>
                  <div className="mono" style={{ fontSize: 11, color: '#666', marginBottom: 4 }}>RESPOSTA</div>
                  <div style={{ fontSize: 15, color: '#fff', fontWeight: 500 }}>até 24h em dias úteis</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 11, color: '#666', marginBottom: 4 }}>BASE</div>
                  <div style={{ fontSize: 15, color: '#fff', fontWeight: 500 }}>Brasil · 100% remoto</div>
                </div>
              </div>
            </div>

            {/* Mini chat preview */}
            <div style={{
              background: '#16161d', borderRadius: 16, border: '1px solid #2a2a35',
              padding: 20, display: 'flex', flexDirection: 'column', gap: 12,
              boxShadow: '0 30px 60px -20px rgba(0,0,0,0.4)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 12, borderBottom: '1px solid #2a2a35' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: '50%', background: 'var(--primary)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 700,
                }}>D</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>Davi · DEVSocialMedia</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>● online agora</div>
                </div>
              </div>
              <div style={{ alignSelf: 'flex-start', background: '#252530', padding: '10px 14px', borderRadius: '12px 12px 12px 4px', maxWidth: '85%', fontSize: 14 }}>
                Oi! 👋 Conta um pouco do projeto que você tá pensando.
              </div>
              <div style={{ alignSelf: 'flex-end', background: 'var(--primary)', padding: '10px 14px', borderRadius: '12px 12px 4px 12px', maxWidth: '85%', fontSize: 14 }}>
                Quero modernizar meu site e adicionar automação no WhatsApp 🚀
              </div>
              <div style={{ alignSelf: 'flex-start', background: '#252530', padding: '10px 14px', borderRadius: '12px 12px 12px 4px', maxWidth: '85%', fontSize: 14 }}>
                Perfeito, isso é exatamente nosso forte. Posso te chamar agora?
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                <input placeholder="Sua mensagem..." style={{
                  flex: 1, padding: '10px 14px', borderRadius: 999,
                  background: '#0E0E12', border: '1px solid #2a2a35', color: '#fff', fontSize: 13,
                  fontFamily: 'inherit', outline: 'none',
                }} />
                <button style={{
                  width: 38, height: 38, borderRadius: '50%', background: 'var(--primary)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
                }}>→</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px){ .cta-grid{ grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.Contato = Contato;