/* Reviews section */

const REVIEWS = [
  { name: 'Ananya P.', loc: 'Mumbai', title: 'The skin glow is real.', body: 'I have been on Orlina for six weeks now. My morning ritual feels sacred, and my dermatologist genuinely asked me what I changed. The taste takes a day to get used to — after that, I crave it.', stars: 5 },
  { name: 'Rohan K.', loc: 'Bangalore', title: 'Worth every rupee.', body: 'I have tried sea buckthorn capsules from three brands. This juice is in a completely different league — you can taste the freshness. My energy through afternoon meetings is night-and-day.', stars: 5 },
  { name: 'Sahana M.', loc: 'Delhi', title: 'My winter shield.', body: 'I used to get sick every November without fail. Two seasons on Orlina, and I have not had a single cold. The bottle is beautiful enough to leave on the counter as decor.', stars: 5 },
  { name: 'Kabir A.', loc: 'Pune', title: 'Took the leap, no regrets.', body: 'Skeptical at first about the price. Then I did the math: roughly ₹56 per serving for what is essentially a multivitamin from the Himalayas. Sold.', stars: 5 },
  { name: 'Meera J.', loc: 'Chennai', title: 'My mother is sold.', body: 'Bought a three-pack to share with my mother. She has been calling it her "golden water" and asking when the next bottle arrives. Subscribing.', stars: 5 },
  { name: 'Aditya R.', loc: 'Kolkata', title: 'Tastes like sunshine.', body: 'Tart, slightly sweet, deeply alive. I mix it into sparkling water with a sprig of mint and it has become my evening wind-down drink. Beautiful product.', stars: 5 },
];

const Reviews = () => (
  <section className="section reviews" id="reviews">
    <div className="shell">
      <div className="section-head">
        <span className="eyebrow">The Verdict</span>
        <h2 className="display">Loved by <em>1,284</em><br /> daily ritualists.</h2>
      </div>

      <div className="reviews-top">
        <div className="rev-stat">
          <div className="stars">★★★★★</div>
          <div className="big">4.9</div>
          <div className="lbl">Average rating — 1,284 verified reviews</div>
        </div>
        <div className="rev-stat">
          <div className="big">96<span style={{ fontSize: 32 }}>%</span></div>
          <div className="lbl">Of customers report a visible difference within 30 days</div>
        </div>
        <div className="rev-stat">
          <div className="big">73<span style={{ fontSize: 32 }}>%</span></div>
          <div className="lbl">Re-order within their first 60 days. Most subscribe.</div>
        </div>
      </div>

      <div className="reviews-grid">
        {REVIEWS.map((r, i) => (
          <div key={i} className="review">
            <div className="r-stars">{'★'.repeat(r.stars)}</div>
            <h4>{r.title}</h4>
            <p>"{r.body}"</p>
            <div className="who">
              <div className="avatar">{r.name[0]}</div>
              <div>
                <b>{r.name}</b>
                <span>{r.loc}</span>
              </div>
              <span className="verified"><Icon.Check size={12} /> Verified</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Reviews = Reviews;