/**
 * reviews.jsx — testimonial cards. The texts in i18n.js are PLACEHOLDERS:
 * replace them with real customer reviews (ideally copied from your Google
 * Business profile) before launch — see README.
 */

/** Five amber stars, hidden from screen readers (rating is in the text). */
function Stars() {
  return (
    <div className="review-card__stars" aria-hidden="true">
      {[1, 2, 3, 4, 5].map((n) => (
        <Icon key={n} name="star" size={18} />
      ))}
    </div>
  );
}

function Reviews() {
  const { t } = useLang();

  return (
    <section className="section reviews" id="opiniones" data-screen-label="Opiniones">
      <div className="container">
        <SectionHead
          center
          kicker={t.reviews.kicker}
          title={t.reviews.title}
          lead={t.reviews.lead}
        />

        <div className="reviews__grid">
          {t.reviews.items.map((r, i) => (
            <blockquote className="review-card reveal" key={r.name} style={{ "--s": i }}>
              <Stars />
              <p className="review-card__text">“{r.text}”</p>
              <footer className="review-card__who">
                {/* Initial-letter avatar — replace with a photo if you have one */}
                <span className="review-card__avatar">{r.name.charAt(0)}</span>
                <div>
                  <div className="review-card__name">{r.name}</div>
                  <div className="review-card__where">{r.where}</div>
                </div>
              </footer>
            </blockquote>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reviews });