// Depoimentos — extraídos do Doctoralia (5.0 · 16 avaliações)
function Depoimentos() {
  const reviews = [
    { txt: 'Profissional muito atenciosa e competente. Saí da sessão me sentindo verdadeiramente acolhida. Recomendo bastante.', autor: 'Paciente verificada · Doctoralia' },
    { txt: 'Uma excelente profissional e muito humana. O ambiente é tranquilo e a escuta é cuidadosa. Marcou minha vida.', autor: 'Paciente verificada · Doctoralia' },
    { txt: 'Meu tratamento com a Maria Fernanda está sendo muito eficaz. Senti diferença real desde as primeiras sessões.', autor: 'Paciente verificada · Doctoralia' },
  ];
  return (
    <section className="section" style={{ background: 'var(--paper-2)' }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
            <span className="eyebrow">O que dizem</span>
            <h2 className="h-section" style={{ marginTop: 8 }}>5,0 no Doctoralia. <span className="em">16 avaliações reais.</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="#c89b5a" />)}
              <span style={{ fontSize: 14, color: 'var(--muted)', marginLeft: 8 }}>nota máxima desde a primeira avaliação</span>
            </div>
          </div>
        </Reveal>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {reviews.map((r, i) => (
            <Reveal key={i} delay={i * 0.08}>
              <div className="card card-hover" style={{ padding: 28, height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', gap: 3, marginBottom: 18 }}>
                  {[1,2,3,4,5].map(j => <Star key={j} size={15} color="#c89b5a" />)}
                </div>
                <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.55, color: 'var(--ink-2)', margin: '0 0 22px', flex: 1 }}>"{r.txt}"</p>
                <span style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '.04em' }}>{r.autor}</span>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal>
          <div style={{ textAlign: 'center', marginTop: 38 }}>
            <a href={window.DOCTORALIA} target="_blank" rel="noopener" style={{ fontSize: 14, color: 'var(--brand)', textDecoration: 'underline', textUnderlineOffset: 4 }}>
              Ver todas as 16 avaliações no Doctoralia →
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Depoimentos = Depoimentos;