// === Yelp reviews — testimonial-style card slider ===

const YELP_URL = "https://www.yelp.com/biz/wrap-station-san-diego";

// Short paraphrased highlights of each Yelp review, with attribution.
// Each card links to the live Yelp page where the full verbatim review lives.
const YELP_REVIEWS = [
  {
    name: "Mike A.",
    initials: "MA",
    subtitle: "Chrome delete · Jeep",
    excerpt: "Brought my son's Jeep in for a chrome delete and the result was incredible. Alex was professional, communicative, and a true artist.",
    url: "https://www.yelp.com/biz/wrap-station-san-diego?hrid=vjX9KY3QrJL7NaWV56I2mw",
  },
  {
    name: "Lisa N.",
    initials: "LN",
    subtitle: "Matte color build",
    excerpt: "Beat every other quote and brought real creativity to the build — thoughtful detail lines that complemented our matte color perfectly.",
    url: "https://www.yelp.com/biz/wrap-station-san-diego?hrid=omNv4Klj7DwLhbkteMtltQ",
  },
  {
    name: "Riley L.",
    initials: "RL",
    subtitle: "Custom hood vinyl",
    excerpt: "Brought in a custom vinyl I sourced elsewhere and Alex installed it fast. Fair pricing, real expertise, and great work — easy choice.",
    url: "https://www.yelp.com/biz/wrap-station-san-diego?hrid=-sIuUpKdV_KojzDQMTJnNA",
  },
  {
    name: "Gene L.",
    initials: "GL",
    subtitle: "Tesla Model Y · Tint + PPF",
    excerpt: "Quoted me quickly for window tint and front PPF on a new Model Y. The whole job was done in a day and the quality is excellent.",
    url: "https://www.yelp.com/biz/wrap-station-san-diego?hrid=WvViVz40m5QaCASp4Q2qFA",
  },
  {
    name: "John L.",
    initials: "JL",
    subtitle: "Genesis G70 · Dechrome + roof wrap",
    excerpt: "First-time client — dechromed the trim, swapped badges, and wrapped the roof on my G70. Fair pricing, top-tier quality, all in a day's work.",
    url: "https://www.yelp.com/biz/wrap-station-san-diego?hrid=G9oqmjRAHxA1b5-818_6gA",
  },
];

function YelpReviews() {
  const sliderRef = React.useRef(null);
  const pausedRef = React.useRef(false);

  const stepWidth = () => {
    const el = sliderRef.current;
    if (!el) return 392;
    const slide = el.querySelector(".yelp-slide");
    return slide ? slide.getBoundingClientRect().width + 32 : 392;
  };

  React.useEffect(() => {
    const el = sliderRef.current;
    if (!el) return;
    const id = setInterval(() => {
      if (pausedRef.current) return;
      const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 4;
      if (atEnd) {
        el.scrollTo({ left: 0, behavior: "smooth" });
      } else {
        el.scrollBy({ left: stepWidth(), behavior: "smooth" });
      }
    }, 5000);
    return () => clearInterval(id);
  }, []);

  const pause = () => { pausedRef.current = true; };
  const resume = () => { pausedRef.current = false; };

  return (
    <section className="section yelp-section" id="reviews">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="section-head-meta">
              <span className="eyebrow">— Reviews</span>
              <h2 className="h-1">What clients<br/>say on Yelp.</h2>
            </div>
            <p className="lede">
              Our reviews live where customers actually leave them. Tap any card to read
              the full review on Yelp.
            </p>
          </div>
        </Reveal>

        <Reveal>
          <div
            className="yelp-slider-wrap"
            onMouseEnter={pause}
            onMouseLeave={resume}
            onFocus={pause}
            onBlur={resume}
          >
            <div
              className="yelp-slider"
              ref={sliderRef}
              onTouchStart={pause}
              onTouchEnd={resume}
            >
              {YELP_REVIEWS.map((r, i) => (
                <a
                  key={i}
                  className="yelp-slide testimonial yelp-rev"
                  href={r.url || YELP_URL}
                  target="_blank"
                  rel="noopener"
                >
                  <div className="testimonial-stars">
                    {[0,1,2,3,4].map((j) => <Icon.Star key={j} size={16} />)}
                  </div>
                  <p className="testimonial-quote">"{r.excerpt}"</p>
                  <div className="testimonial-meta">
                    <div className="testimonial-avatar">{r.initials}</div>
                    <div>
                      <div className="testimonial-name">{r.name}</div>
                      <div className="testimonial-car">{r.subtitle}</div>
                    </div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { YelpReviews });