/* eslint-disable */
/* global React, Reveal, Stagger, Bars */

function Star() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2 L14.85 8.6 L22 9.27 L16.5 14 L18.18 21 L12 17.27 L5.82 21 L7.5 14 L2 9.27 L9.15 8.6 Z" />
    </svg>
  );
}

function Reviews() {
  const reviews = [
    {
      quote: "70 Series Cruiser Tune. The advice from the tune to upgrade of the clutch and exhaust were delivered with skill and obvious knowledge. The results are nothing short of outstanding — amazed with the added performance and torque as well as fuel economy. A night and day transition of the truck. Every 70 series owner should do this.",
      name: 'Dave Brown · 70 Series Cruiser',
    },
    {
      quote: "Had my car done and tuned elsewhere — wasn't that a big mistake. Came to see Joel and Spencer, very upset about my car. They booked me in, re-tuned my car and sorted out the cutting out issue. After picking up my car from Platinum Tuning it was like I got a new car — goes like a dream. True professionals.",
      name: 'Piotr Antowski · Subaru WRX',
    },
    {
      quote: "Joel and Spencer are fantastic to deal with. Incredible tuning and engine modification knowledge with a can-do attitude. Diagnosed and retuned our car after being left unhappy with the car underperforming from another shop. Now she's purring.",
      name: 'Daniel Rutgers · Subaru Impreza',
    },
  ];

  return (
    <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <hr className="hr-gold" />
            <span className="eyebrow">Reviews</span>
            <h2>What customers say.</h2>
          </div>
        </Reveal>

        <Stagger className="reviews__grid" step={120}>
          {reviews.map((r, i) => (
            <div className="review" key={i}>
              <div className="review__stars" aria-label="5 stars">
                {[0, 1, 2, 3, 4].map((s) => <Star key={s} />)}
              </div>
              <p className="review__quote">"{r.quote}"</p>
              <div className="review__attr">
                <Bars size="sm" />
                <span className="review__name">{r.name}</span>
              </div>
            </div>
          ))}
        </Stagger>

        <Reveal delay={200}>
          <a href="#" className="reviews__link" onClick={(e) => e.preventDefault()}>Read all on Google</a>
        </Reveal>
      </div>
    </section>
  );
}

window.Reviews = Reviews;