// ═══════════════════════════════════════════════════════════════════
// src/sections/Testimonials.jsx
// Social proof — star rating cards with avatar and quote.
// Data sourced from TESTIMONIALS constant in data.jsx.
// ═══════════════════════════════════════════════════════════════════

function Testimonials() {
  return (
    <section className="section section-tint">
      <div className="container">

        <div className="section-head reveal">
          <div className="eyebrow">Quem confiou recomenda</div>
          <h2 className="display">
            Histórias de quem <em>já vive</em><br/>com o sorriso renovado.
          </h2>
        </div>

        <div className="testimonials-grid">
          {TESTIMONIALS.map((t, i) => (
            <div key={t.name} className={`testimonial reveal d${i + 1}`}>
              <div className="stars" aria-label="5 estrelas">
                {Array.from({ length: 5 }).map((_, k) => (
                  <Icon.star key={k} aria-hidden="true"/>
                ))}
              </div>
              <blockquote>"{t.quote}"</blockquote>
              <div className="who">
                <div className="avatar">
                  <span aria-hidden="true">{t.initials}</span>
                  <Photo src={PHOTOS[t.photo]} alt={t.name}/>
                </div>
                <div>
                  <h4>{t.name}</h4>
                  <p>{t.role}</p>
                </div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}