function Reviews() {
  return (
    <section className="bean-sec reviews-section" id="resenas">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>⟢ Reseñas Google</div>
            <h2>Lo que dicen<br/>los habituales.</h2>
          </div>
          <div className="reviews-summary">
            <div className="summary-score">4,8</div>
            <div className="summary-meta">
              <div className="stars">
                {[1,2,3,4,5].map(i => <Star key={i} size={18} color="var(--orange)" />)}
              </div>
              <div className="count">basado en 480+ reseñas</div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Google Maps</div>
            </div>
          </div>
        </div>

        <div className="reviews-grid">
          {REVIEWS.map((r, i) => (
            <div className="review-card" key={i}>
              <div className="review-stars">
                {Array.from({ length: r.stars }).map((_, j) => (
                  <Star key={j} size={16} color="var(--orange)" />
                ))}
              </div>
              <div className="review-text">"{r.text}"</div>
              <div className="review-author">
                <div className="review-avatar">{r.who.charAt(0)}</div>
                <div>
                  <div className="who">{r.who}</div>
                  <div className="when">{r.when}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <a className="btn" href="https://www.google.com/search?q=bean+coffee+zaragoza" target="_blank" rel="noopener noreferrer">
            Ver todas las reseñas <ArrowRight size={16} />
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Reviews });