/* global React */

const reviews = [
  {
    quote: "Tom and his crew rebuilt our front porch after the storm and made it look better than the original. They showed up at 7 AM sharp every day and swept the driveway before they left.",
    name: "Linda H.",
    where: "Murphys, CA · Front porch rebuild",
  },
  {
    quote: "Honest pricing and zero surprises. When they hit a rotted joist nobody could have known about, Cole called me, showed me the issue, and gave me three options instead of just billing me.",
    name: "Mark & Diana W.",
    where: "Arnold, CA · Deck addition",
  },
  {
    quote: "We've used Fillmore for three projects over fifteen years. They feel like family at this point. I wouldn't let anyone else touch my house.",
    name: "Bob R.",
    where: "Vallecito, CA · Roof, deck, kitchen",
  },
  {
    quote: "After the Butte Fire took our cabin, Fillmore was the only contractor who answered the phone the same day. They walked the lot with us before we'd even processed what had happened.",
    name: "The Hendricks Family",
    where: "Mountain Ranch, CA · Full rebuild",
  },
  {
    quote: "I called for a fence repair and was honestly expecting a brush-off because it was a small job. They came out the next week and stayed late to finish in one trip.",
    name: "Janet S.",
    where: "Murphys, CA · Fence repair",
  },
];

const Testimonials = () => {
  const [i, setI] = React.useState(0);
  const r = reviews[i];

  React.useEffect(() => {
    const t = setInterval(() => setI(x => (x + 1) % reviews.length), 7000);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="section testimonials" id="testimonials" data-screen-label="06 Testimonials">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">From our neighbors</div>
            <h2>What people say after we leave.</h2>
          </div>
          <p className="lede">
            We don't run ads. Almost every job comes from someone who told someone.
            Here's a sampling, with last names trimmed for privacy.
          </p>
        </div>

        <div className="testimonial-stage">
          <div className="testimonial-quote" key={i}>{r.quote}</div>
          <div className="testimonial-meta">
            <div className="stars">★★★★★</div>
            <div className="name">{r.name}</div>
            <div className="where">{r.where}</div>
          </div>

          <div className="testimonial-dots">
            {reviews.map((_, k) => (
              <button
                key={k}
                className={k === i ? "active" : ""}
                onClick={() => setI(k)}
                aria-label={`Review ${k + 1}`}
              />
            ))}
          </div>
          <div className="testimonial-controls">
            <button onClick={() => setI((i - 1 + reviews.length) % reviews.length)} aria-label="Previous">‹</button>
            <button onClick={() => setI((i + 1) % reviews.length)} aria-label="Next">›</button>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Testimonials = Testimonials;