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"},
    {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: "Blu 60 driveway · 2,100 sq ft"},
    {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"},
  ];
  const [i, setI] = useState(0);
  const q = quotes[i];
  return (
    <section id="reviews" style={{background: "var(--n-50)", padding: "96px 32px"}}>
      <div style={{maxWidth: 1000, margin: "0 auto", textAlign: "center"}}>
        <Icon name="quote" size={36} color="var(--turf-700)" stroke={1.25}/>
        <blockquote style={{
          fontFamily: "var(--font-display)", fontSize: 34, fontWeight: 700, lineHeight: 1.2,
          letterSpacing: "-0.02em", margin: "28px 0 0", color: "var(--ink-900)",
          textWrap: "balance", textTransform: "none",
        }}>"{q.q}"</blockquote>
        <div style={{marginTop: 28, 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 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;