/* global React */
function Testimonials() {
  const { t } = window.useT();

  const reviews = [
    { stars: 5, q: t("test.1.q"), name: t("test.1.name"), svc: t("test.1.svc"), initials: "JV" },
    { stars: 5, q: t("test.2.q"), name: t("test.2.name"), svc: t("test.2.svc"), initials: "BS" },
    { stars: 5, q: t("test.3.q"), name: t("test.3.name"), svc: t("test.3.svc"), initials: "GN" },
  ];

  return (
    <section className="vsc-testimonials" id="opiniones" data-screen-label="Testimonials">
      <div className="vsc-wrap">
        <div className="vsc-test-head">
          <div className="vsc-eyebrow is-centered">{t("test.eyebrow")}</div>
          <h2>
            {t("test.h2.a")} <em>{t("test.h2.b")}</em>{t("test.h2.c")}
          </h2>
          <div className="meta">
            <span className="score">4.9 / 5</span>
            <span className="stars" aria-hidden="true">★★★★★</span>
            <span>{t("test.meta")}</span>
          </div>
        </div>

        <div className="vsc-test-grid">
          {reviews.map((r, i) => (
            <article key={i} className="vsc-test-card">
              <div className="stars" aria-hidden="true">{"★".repeat(r.stars)}</div>
              <p className="q">"{r.q}"</p>
              <div className="who">
                <div className="avatar" aria-hidden="true">{r.initials}</div>
                <div>
                  <div className="name">{r.name}</div>
                  <div className="svc">{r.svc}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;