/* global React */

function SectionReviews() {
  const i18n = window.__i18n;
  return (
    <section className="section" id="reviews">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{margin: "0 auto"}}>{i18n.t("rev.eyebrow")}</div>
          <h2>{i18n.t("rev.title.l1")}<br/>{i18n.t("rev.title.l2")}</h2>
          <p className="lede">{i18n.t("rev.lede")}</p>
        </div>

        <div className="reviews__grid">
          {REVIEWS.map((r, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="review">
                <span className="review__quote-mark">"</span>
                <div className="review__stars">
                  <Stars n={r.stars} size={16}/>
                </div>
                <p className="review__text">{r.text}</p>
                <div className="review__author">
                  <div className="review__avatar">{r.initial}</div>
                  <div className="review__info">
                    <div className="review__name">{r.name}</div>
                    <div className="review__meta">{r.meta}</div>
                  </div>
                  <div className="review__platform">{r.platform}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SectionReviews = SectionReviews;