function Reviews() {
  const scrollerRef = React.useRef(null);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const userInteractedRef = React.useRef(false);
  const autoplayRef = React.useRef(null);

  // Curated real Google reviews — lightly trimmed for length, names preserved
  const reviews = [
    {
      stars: 5,
      quote: "Victor and his team built a wooden deck with gazebo off my pool deck. The workmanship, professionalism and pricing is second to none. HIGHLY RECOMMEND!!! You won't be disappointed.",
      name: "Doug L.",
      where: "Local Guide · 14 reviews",
      platform: "Google",
      initial: "D",
    },
    {
      stars: 5,
      quote: "If you are looking for a reliable and trustworthy deck contractor in Weston, Florida, these are the guys to call. They gave us tons of options and a lot of advice. A huge help.",
      name: "Blair Witkowski",
      where: "Local Guide · 129 reviews",
      platform: "Google",
      initial: "B",
    },
    {
      stars: 5,
      quote: "Amazing job on our backyard project in Coral Gables — a custom wood deck and pergola. The entire process was smooth from start to finish. Communication was clear, the crew showed up on time, and the craftsmanship really stands out.",
      name: "Pedro Anselmo",
      where: "Coral Gables, FL",
      platform: "Google",
      initial: "P",
    },
    {
      stars: 5,
      quote: "When it comes to hiring a contractor I'm extremely picky. Hiring Victory was the best decision I have made. They made this project run very smoothly and my life very easy.",
      name: "Fabiana Allegro",
      where: "Local Guide · 24 reviews",
      platform: "Google",
      initial: "F",
    },
    {
      stars: 5,
      quote: "Can't say enough good things about Victor. He built for us a very big deck. His ideas and vision are mind blowing. He was involved with this project on a daily basis. Communication was top notch.",
      name: "Issi Bortman",
      where: "9 reviews",
      platform: "Google",
      initial: "I",
    },
    {
      stars: 5,
      quote: "Great service. Fair price. They built my deck exactly the way I wanted. High-quality workmanship.",
      name: "Yossi B.",
      where: "Local Guide · 240 reviews",
      platform: "Google",
      initial: "Y",
    },
  ];

  // Auto-advance on mobile only. Pauses after user interaction and when tab hidden.
  React.useEffect(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const isMobile = () => window.matchMedia && window.matchMedia("(max-width: 760px)").matches;
    if (!isMobile()) return;

    const tick = () => {
      if (userInteractedRef.current) return;
      if (document.hidden) return;
      const w = el.clientWidth;
      if (!w) return;
      const max = el.scrollWidth - w;
      const next = Math.round((el.scrollLeft + w) / w) * w;
      el.scrollTo({ left: next > max ? 0 : next, behavior: "smooth" });
    };

    const interval = setInterval(tick, 5000);
    return () => clearInterval(interval);
  }, []);

  const avgGradients = [
    "linear-gradient(135deg, #c9a96e, #8c6f37)",
    "linear-gradient(135deg, #5b8def, #6366f1)",
    "linear-gradient(135deg, #06b6d4, #0891b2)",
    "linear-gradient(135deg, #0EA5E9, #0369a1)",
    "linear-gradient(135deg, #2563eb, #1e40af)",
    "linear-gradient(135deg, #1E88E5, #0F6BC9)",
  ];

  return (
    <section className="vp-section paper" id="reviews">
      <div className="vp-section-head">
        <div className="eyebrow">Reviews</div>
        <h2>What Our <span className="vp-underlined" >Customers</span> Are Saying</h2>
        <p className="sub">Real Google reviews from homeowners across South Florida — Coral Gables, Weston, Aventura, and beyond.</p>
        <div className="vp-reviews-summary">
          <div className="rs-stars">
            <Icon.Star size={18} /><Icon.Star size={18} /><Icon.Star size={18} /><Icon.Star size={18} /><Icon.Star size={18} />
          </div>
          <div className="rs-text">
            <strong>4.9 / 5</strong> · Based on <strong>50+ reviews</strong> on
            <span className="rs-platform"><Icon.Google size={14} /> Google</span>
          </div>
        </div>
      </div>
      <div className="vp-reviews-stage">
      <button
        type="button"
        className="vp-reviews-side vp-reviews-side-prev"
        aria-label="Previous review"
        onClick={() => {
          userInteractedRef.current = true;
          const el = scrollerRef.current;
          if (!el) return;
          const w = el.clientWidth;
          const prev = Math.round((el.scrollLeft - w) / w) * w;
          const max = el.scrollWidth - w;
          el.scrollTo({ left: prev < 0 ? max : prev, behavior: "smooth" });
        }}
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="15 18 9 12 15 6"/>
        </svg>
      </button>
      <div className="vp-reviews-scroller" ref={scrollerRef}
        onPointerDown={() => { userInteractedRef.current = true; }}
        onScroll={(e) => {
          const el = e.currentTarget;
          if (!el) return;
          const w = el.clientWidth;
          if (!w) return;
          const idx = Math.round(el.scrollLeft / w);
          setActiveIdx(idx);
        }}
      >
      <div className="vp-reviews-grid">
        {reviews.map((r, i) => (
          <div key={i} className="vp-review-card">
            <div className="rc-top">
              <div className="stars">
                {Array.from({ length: r.stars }).map((_, j) => (
                  <Icon.Star key={j} size={15} />
                ))}
              </div>
              <span className="platform">
                <Icon.Google size={13} />
              </span>
            </div>
            <blockquote>"{r.quote}"</blockquote>
            <div className="who">
              <div className="avatar" style={{ background: avgGradients[i % avgGradients.length] }}>{r.initial}</div>
              <div>
                <div className="name">{r.name}</div>
                <div className="where">{r.where}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
      </div>
      <button
        type="button"
        className="vp-reviews-side vp-reviews-side-next"
        aria-label="Next review"
        onClick={() => {
          userInteractedRef.current = true;
          const el = scrollerRef.current;
          if (!el) return;
          const w = el.clientWidth;
          const next = Math.round((el.scrollLeft + w) / w) * w;
          const max = el.scrollWidth - w;
          el.scrollTo({ left: next > max ? 0 : next, behavior: "smooth" });
        }}
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="9 18 15 12 9 6"/>
        </svg>
      </button>
      </div>

      <div className="vp-reviews-mobile-controls" aria-hidden="false">
        <div className="vp-reviews-dots" role="tablist" aria-label="Review slide">
          {reviews.map((_, i) => (
            <button
              key={i}
              type="button"
              className={"vp-reviews-dot" + (i === activeIdx ? " is-active" : "")}
              aria-label={`Go to review ${i + 1}`}
              onClick={() => {
                userInteractedRef.current = true;
                const el = scrollerRef.current;
                if (!el) return;
                el.scrollTo({ left: i * el.clientWidth, behavior: "smooth" });
              }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
window.Reviews = Reviews;