/* ============================================================
   3DAX — Reviews
   ============================================================ */
function Reviews({ reviews }){
  const list = (reviews && reviews.length) ? reviews : (window.DATA.REVIEWS || []);
  return (
    <section className="reviews section grain" id="resenas" data-screen-label="Reseñas">
      <div className="blob" style={{ width:480, height:480, bottom:"0%", right:"-6%", background:"rgba(217,138,43,.12)" }} />
      <div className="wrap">
        <div className="reviews__head">
          <Reveal>
            <div className="eyebrow">Lo que dice la tripulación</div>
            <h2 className="display reviews__title">Cartas guardadas.<br/>Corazones <em>ganados</em>.</h2>
          </Reveal>
          <Reveal delay={120} className="reviews__score">
            <div className="reviews__big display">4.9</div>
            <div>
              <Stars value={5} size={18} />
              <div className="reviews__count">142 reseñas · +400 ventas en Etsy</div>
            </div>
          </Reveal>
        </div>

        <div className="reviews__grid">
          {list.map((r, i) => (
            <Reveal key={i} delay={(i%2)*100} className={"review" + (i===0 ? " review--feat" : "")}>
              <Stars value={r.rating} size={14} />
              <p className="review__text">“{r.text}”</p>
              <div className="review__foot">
                <div className="review__avatar">{r.name[0]}</div>
                <div>
                  <div className="review__name">{r.name}</div>
                  <div className="review__place">{r.place} · {r.product}</div>
                </div>
                <span className="review__verified" title="Compra verificada">✓</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Reviews = Reviews;