function Reviews({ t }) {
  return (
    <section id="reviews" style={{ padding:'clamp(60px,8vw,120px) 0' }}>
      <div className="wrap">
        <div className="section-head" style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 50, flexWrap:'wrap', gap: 20 }}>
          <h2 className="display" style={{ fontSize:'clamp(44px, 6vw, 80px)' }}>
            {t.reviewsTitle1} <span className="display-italic">{t.reviewsTitle2}</span>
          </h2>
          <div className="mono-tiny" style={{ color:'var(--gray-400)' }}>
            ★★★★★ &nbsp; 4.9/5 &nbsp;·&nbsp; {t.reviewsCount}
          </div>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 16,
        }}>
          {t.reviews.map((r, i) => (
            <article key={i} className="review-card" style={{
              border:'1px solid var(--gray-200)',
              borderRadius: 16,
              padding: '24px 22px',
              background: i === 1 ? 'var(--pink-400)' : 'var(--white)',
              color: i === 1 ? 'white' : 'var(--ink)',
              minHeight: 220,
              display:'flex', flexDirection:'column', gap: 14,
            }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                <div style={{ fontFamily:'Instrument Serif', fontStyle:'italic', fontSize: 22 }}>
                  ★★★★★
                </div>
                <span className="mono-tiny" style={{ color: i===1?'rgba(255,255,255,0.7)':'var(--gray-400)' }}>
                  {r.service}
                </span>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.55, fontFamily:'Instrument Serif', fontStyle:'italic' }}>
                « {r.text} »
              </p>
              <div style={{ marginTop:'auto', display:'flex', alignItems:'center', gap:10 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 999,
                  background: i === 1 ? 'rgba(255,255,255,0.3)' : 'linear-gradient(135deg,#ffd1e0,#ee82ad)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  color: i===1 ? 'white' : 'var(--pink-600)',
                  fontWeight: 600, fontSize: 14,
                }}>{r.name.charAt(0)}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{r.name}</div>
                  <div style={{ fontSize: 11, opacity: 0.7 }}>{r.date}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Reviews = Reviews;