// SocialProof.jsx — black bg, header + Google rating + 4 review cards

function Star() {
  return (
    <svg width="18" height="18" viewBox="0 0 20 20" fill="#EAB308">
      <path d="M10 1l2.6 5.9 6.4.6-4.8 4.4 1.4 6.3L10 14.9 4.4 18.2l1.4-6.3L1 7.5l6.4-.6L10 1z" />
    </svg>
  );
}

function ReviewCard({ name, when, body }) {
  return (
    <article className="rd-review">
      <header>
        <div className="rd-review__avatar" />
        <div className="rd-review__who">
          <div className="rd-review__name">{name}</div>
          <div className="rd-review__when">{when}</div>
        </div>
        <div className="rd-review__google" />
      </header>
      <div className="rd-review__stars">
        <Star /><Star /><Star /><Star /><Star />
      </div>
      <p className="rd-review__body">{body}</p>
    </article>
  );
}

function SocialProof() {
  const reviews = [
    { name: "Laze Trajkov", when: "2 DAYS AGO",   body: "Absolute perfection. The team treated my vehicle like it was their own. The metallic finish is indistinguishable from factory paint." },
    { name: "Toni Toshic",  when: "1 WEEK AGO",   body: "Professional, transparent, and fast. They managed the insurance paperwork seamlessly. Highly recommended for premium cars." },
    { name: "Sarah Jenkins",when: "2 WEEKS AGO",  body: "The PDR service saved me a fortune on my lease return. You can't even tell there was a dent. Amazing precision!" },
    { name: "Marcus Reed",  when: "1 MONTH AGO",  body: "Brought my fleet here for maintenance and bodywork. Consistent quality across all vehicles. Best in the city." },
  ];
  return (
    <section className="rd-social" data-screen-label="01 Home / Reviews">
      <div className="rd-social__head">
        <div>
          <h2>What our customers say</h2>
          <p>Explore our recent customer reviews and see why we are the leaders in precision repair.</p>
        </div>
        <div className="rd-social__rating">
          <div className="rd-social__stars"><Star /><Star /><Star /><Star /><Star /></div>
          <div className="rd-social__score">4.6 / 5 based on 208 reviews</div>
          <div className="rd-social__g" />
        </div>
      </div>
      <div className="rd-social__grid">
        {reviews.map((r) => <ReviewCard key={r.name} {...r} />)}
      </div>
    </section>
  );
}

window.SocialProof = SocialProof;