// Depoimentos — pull quotes
function Depoimentos() {
  const items = [
    {
      quote: 'Refizeram nosso e-commerce em 6 semanas e a conversão dobrou no primeiro mês. Comunicação direta e zero enrolação.',
      name: 'Lina Cardoso',
      role: 'Founder, Lina Atelier',
      color: '#FF6B9C',
    },
    {
      quote: 'Automatizaram o fluxo de leads do WhatsApp pro CRM e economizamos 20h por semana de trabalho manual. Deveriam ter feito antes.',
      name: 'Rodrigo Mendes',
      role: 'Diretor Comercial, NorteFin',
      color: '#FFB020',
    },
    {
      quote: 'Saímos de uma ideia rabiscada num Figma pra um SaaS faturando em 3 meses. Eles cuidaram de tudo: design, build, deploy.',
      name: 'Ana Beatriz',
      role: 'CEO, Foco App',
      color: '#00D27A',
    },
  ];

  return (
    <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 56 }}>
          <div>
            <span className="eyebrow">DEPOIMENTOS · clientes ativos</span>
            <h2 className="h-section">Quem trabalhou com a gente, <span className="accent">contou.</span></h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="dep-grid">
          {items.map((d, i) => (
            <figure key={i} style={{
              margin: 0, padding: 28, background: 'var(--paper)',
              border: '1px solid var(--line)', borderRadius: 18,
              display: 'flex', flexDirection: 'column', gap: 20,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ position: 'absolute', top: -10, right: -10, fontSize: 120, lineHeight: 1, color: d.color, opacity: 0.1, fontFamily: 'Space Grotesk', fontWeight: 700 }}>"</div>
              <div className="mono" style={{ fontSize: 12, color: d.color, display: 'flex', gap: 4 }}>
                {'★★★★★'}
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0, fontWeight: 500 }}>
                "{d.quote}"
              </p>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                <div style={{
                  width: 40, height: 40, borderRadius: '50%',
                  background: `linear-gradient(135deg, ${d.color}, var(--ink))`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontWeight: 700, fontSize: 14,
                }}>{d.name.split(' ').map(n => n[0]).join('')}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{d.name}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{d.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>

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

window.Depoimentos = Depoimentos;