// Prova social — avaliações reais do Google, sem citações fabricadas
function Depoimentos() {
  const stats = [
    { big: '5,0', label: 'nota no Google', sub: 'média de todas as avaliações' },
    { big: '58', label: 'avaliações', sub: 'de pacientes atendidos' },
    { big: '★★★★★', label: 'nota máxima', sub: 'avaliação pública e verificável' },
  ];
  return (
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 48px' }}>
            <span className="eyebrow">O que dizem os pacientes</span>
            <h2 className="h-section" style={{ marginTop: 8 }}>58 pessoas avaliaram. <span className="em">Nota 5,0.</span></h2>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 16 }}>
              {[1,2,3,4,5].map(i => <Star key={i} size={20} color="#c08a3e" />)}
              <span style={{ fontSize: 14, color: 'var(--muted)', marginLeft: 8 }}>no perfil público do Google</span>
            </div>
          </div>
        </Reveal>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, maxWidth: 920, margin: '0 auto' }}>
          {stats.map((s, i) => (
            <Reveal key={s.label} delay={i * 0.08}>
              <div className="card card-hover" style={{ padding: '34px 28px', height: '100%', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: s.big.length > 3 ? 28 : 52, fontWeight: 600, lineHeight: 1.1, color: 'var(--brand)', letterSpacing: '-.02em' }}>{s.big}</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink-2)', marginTop: 10 }}>{s.label}</div>
                <div style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>{s.sub}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal>
          <div style={{ textAlign: 'center', marginTop: 38 }}>
            <a href={window.GOOGLE_MAPS} target="_blank" rel="noopener" style={{ fontSize: 14, color: 'var(--brand)', textDecoration: 'underline', textUnderlineOffset: 4 }}>
              Ver todas as avaliações no Google →
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Depoimentos = Depoimentos;