function Testimonials() {
  const { useState } = React;
  const quotes = [
    {q: "We got three bids. Lawns and Pavers was the only one that specified the base aggregate depth and came back with a drawing. Three summers on, the patio is dead flat.", name: "Sarah K.", town: "Bedford", service: "Richcliff patio · 640 sq ft", image: "assets/photos/home/testimonial-1.jpg"},
    {q: "Our driveway sits on a six-percent grade with a spring that runs through it. The crew engineered drainage, pulled the Westchester permit themselves, and finished on budget.", name: "Marcus D.", town: "Chappaqua", service: "Ledgestone XL driveway · 2,100 sq ft", image: "assets/photos/home/testimonial-2.jpg"},
    {q: "Best weekly lawn service we've had in twenty years in Armonk. Licensed applicator, on-time, and the guys actually pick up their coffee cups.", name: "Jennifer P.", town: "Armonk", service: "Full lawn program · 1.8 acres", image: "assets/photos/home/testimonial-3.jpg"},
  ];
  const [i, setI] = useState(0);
  const q = quotes[i];
  const initials = q.name.split(" ").map(s => s[0]).join("").slice(0, 2);
  return (
    <section id="reviews" className="section-pad" style={{background: "var(--n-50)"}}>
      <div className="container container--narrow" style={{textAlign: "center"}}>
        <Icon name="quote" size={36} color="var(--turf-700)" stroke={1.25}/>
        <blockquote style={{
          fontFamily: "var(--font-display)", fontSize: "clamp(22px, 3.4vw, 34px)", fontWeight: 700, lineHeight: 1.25,
          letterSpacing: "-0.02em", margin: "28px 0 0", color: "var(--ink-900)",
          textWrap: "balance", textTransform: "none",
        }}>"{q.q}"</blockquote>
        <div style={{marginTop: 32, display: "flex", flexDirection: "column", alignItems: "center", gap: 12}}>
          <div style={{
            width: 56, height: 56, borderRadius: "50%", overflow: "hidden",
            background: "var(--turf-700)", color: "var(--white)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700,
            position: "relative",
          }}>
            <PhotoOverlay src={q.image} alt={q.name}/>
            <span style={{position: "relative", zIndex: 0}}>{initials}</span>
          </div>
          <div style={{fontSize: 14, color: "var(--slate-600)"}}>
            <div style={{fontWeight: 700, color: "var(--ink-900)"}}>{q.name} · {q.town}</div>
            <div style={{marginTop: 4, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)"}}>{q.service}</div>
          </div>
        </div>
        <div style={{marginTop: 40, display: "flex", justifyContent: "center", gap: 10, alignItems: "center"}}>
          <button onClick={() => setI((i - 1 + quotes.length) % quotes.length)} className="btn btn-ghost" style={{width: 44, height: 44, padding: 0, border: "1px solid var(--n-200)"}}>
            <Icon name="arrowLeft" size={18}/>
          </button>
          {quotes.map((_, j) => (
            <span key={j} onClick={() => setI(j)} style={{
              width: j === i ? 28 : 8, height: 8, borderRadius: 999,
              background: j === i ? "var(--turf-700)" : "var(--n-300)",
              transition: "all 180ms var(--ease-out)", cursor: "pointer",
            }}/>
          ))}
          <button onClick={() => setI((i + 1) % quotes.length)} className="btn btn-ghost" style={{width: 44, height: 44, padding: 0, border: "1px solid var(--n-200)"}}>
            <Icon name="arrowRight" size={18}/>
          </button>
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;