// Reviews.jsx — customer reviews row
const REVIEWS = [
  { stars: 5, quote: 'Went for the first time to try their grinder — very nice place. The owner explained how they cook the pork shoulder for hours to make it tender. We enjoyed it for our dinner.', name: 'James G.', meta: 'Manchester · Roadtrippers' },
  { stars: 5, quote: 'The Pernil Sandwich is delicious!!! Only thing I would suggest is to go lighter on the mustard, but I would definitely order again!!', name: 'Verified Customer', meta: 'DoorDash' },
  { stars: 5, quote: 'I just love that I was able to find the best Cubanito and don\'t have to go far for it. If you want a great breakfast sandwich, this is the place to go.', name: 'Verified Customer', meta: 'DoorDash' },
  { stars: 5, quote: 'Italian sandwich INSANELY DELICIOUS. Bread is seriously the best and the ingredients are so fresh.', name: 'Verified Customer', meta: 'DoorDash' },
];

const ReviewCard = ({ stars, quote, name, meta }) => {
  const initials = name.split(' ').map(w => w[0]).join('');
  return (
    <article className="psd-review psd-reveal">
      <div className="psd-review-stars" aria-label={stars + ' stars'}>{'★'.repeat(stars)}</div>
      <p className="psd-review-quote">&ldquo;{quote}&rdquo;</p>
      <div className="psd-review-who">
        <div className="psd-review-avatar" aria-hidden="true">{initials}</div>
        <div>
          <div className="psd-review-name">{name}</div>
          <div className="psd-review-meta">{meta}</div>
        </div>
      </div>
    </article>
  );
};

const Reviews = () => {
  return (
    <section id="reviews" className="psd-section psd-section--reviews">
      <div className="psd-section-head psd-reveal">
        <div className="psd-script psd-section-script">They love us</div>
        <h2 className="psd-section-title">From the neighborhood.</h2>
        <p className="psd-section-lede">A few of our favorite words from people who walked in hungry and walked out happy.</p>
      </div>
      <div className="psd-review-row">
        {REVIEWS.map((r, i) => <ReviewCard key={i} {...r} />)}
      </div>
      <div className="psd-review-cta psd-reveal">
        <p>Enjoyed your visit? Let the neighborhood know.</p>
        <a
          href="#"
          target="_blank"
          rel="noopener"
          className="psd-btn psd-btn--primary"
        >Leave a Review <span aria-hidden="true">→</span></a>
      </div>
    </section>
  );
};

window.Reviews = Reviews;