// Confiança — stats reais do Google (sem depoimentos inventados)
function Depoimentos() {
  const stats = [
    { num: '5,0', label: 'Nota média no Google', icon: 'star' },
    { num: '38', label: 'Avaliações de famílias', icon: 'users' },
    { num: 'Mercês', label: 'Consultório de fácil acesso em Curitiba', icon: 'map' },
  ];
  return (
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 56px' }}>
            <span className="eyebrow">O que as famílias dizem</span>
            <h2 className="h-section" style={{ marginTop: 8 }}>5,0 no Google. <span className="em">38 avaliações.</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="#c79a64" />)}
              <span style={{ fontSize: 14, color: 'var(--muted)', marginLeft: 8 }}>nota máxima no perfil 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: 32, height: '100%', textAlign: 'center' }}>
                <div style={{ width: 52, height: 52, borderRadius: 999, background: 'var(--paper-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 18px' }}>
                  <Icon name={s.icon} size={24} color="var(--brand)" />
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 52, fontWeight: 600, lineHeight: 1, letterSpacing: '-.02em', color: 'var(--ink-2)' }}>{s.num}</div>
                <p style={{ fontSize: 14.5, color: 'var(--muted)', margin: '10px 0 0' }}>{s.label}</p>
              </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 }}>
              Ler as avaliações no Google →
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Depoimentos = Depoimentos;