// ============================================================
// Testimonials — đánh giá khách thật từ Shopee (JM.reviews do tools/danh-gia.ps1 sinh).
// Không có đánh giá thì ẩn khối, không viết đánh giá mẫu.
// ============================================================

function JmTestimonials({ lang }) {
  const [lightbox, setLightbox] = React.useState(null);
  if (!JM.reviews || JM.reviews.length === 0) return null;
  const open = (code) => { window.location.hash = JM.hrefFor({ view: 'product', id: code }); };
  return (
    <section className="jm-section" data-screen-label="Testimonials">
      <div className="jm-container">
        <div className="jm-collection__head" style={{ marginBottom: 48 }}>
          <div>
            <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 12 }}>
              {lang === 'vi' ? 'Đánh giá từ Shopee' : 'Reviews from Shopee'}
            </div>
            <h2 className="jm-h1">{lang === 'vi' ? 'Khách hàng nói gì về Jesmee' : 'What our customers say'}</h2>
          </div>
        </div>
        <div className="jm-rv__grid jm-rv__grid--home">
          {JM.reviews.map(r => (
            <article className="jm-rv__card" key={r.id}>
              <JmStars/>
              <p className="jm-rv__text">{r.text}</p>
              {r.imgs && r.imgs.length > 0 && (
                <div className="jm-rv__imgs">
                  {r.imgs.slice(0, 3).map(src => (
                    <button key={src} onClick={() => setLightbox({ src, review: r })} aria-label={lang === 'vi' ? 'Phóng to ảnh' : 'Enlarge photo'}>
                      <img src={src} alt="" loading="lazy"/>
                    </button>
                  ))}
                </div>
              )}
              <div className="jm-rv__meta">
                <span>{r.name}</span>
                <a href={JM.hrefFor({ view: 'product', id: r.code })} onClick={(e) => { e.preventDefault(); open(r.code); }}>{r.product}</a>
                <span className="jm-rv__src">{lang === 'vi' ? 'Đánh giá từ Shopee' : 'Review from Shopee'}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
      <JmReviewLightbox item={lightbox} lang={lang} onClose={() => setLightbox(null)}/>
    </section>
  );
}

window.JmTestimonials = JmTestimonials;