function Testimonials() {
  const quotes = [
    { body: "It stopped feeling like I was checking an app. It started feeling like something was checking in on me.", name: "Naomi R.", role: "Founder, Oslo" },
    { body: "Forge is the first AI platform that felt like clay, not a keyboard. I prototyped three agents in a weekend.", name: "Kenji M.", role: "Product Lead" },
    { body: "My sleep told me things I didn't know I was allowed to ask my body. Life before and life after.", name: "Ana P.", role: "Architect, Lisbon" },
    { body: "I stopped looking at my wrist. The CoPilot looks for me — and tells me only when it matters.", name: "David L.", role: "Physician" },
    { body: "This is the first ambient AI that doesn't feel like a surveillance device. Privacy architecture is real.", name: "Hana S.", role: "CISO" },
  ];
  const trackRef = React.useRef(null);
  React.useEffect(() => {
    const el = trackRef.current; if (!el) return;
    let raf, offset = 0, paused = false;
    const speed = 1.1;
    function tick() {
      if (!paused) {
        offset += speed;
        if (offset > el.scrollWidth / 2) offset = 0;
        el.style.transform = `translateX(-${offset}px)`;
      }
      raf = requestAnimationFrame(tick);
    }
    tick();
    const enter = () => paused = true;
    const leave = () => paused = false;
    el.addEventListener('mouseenter', enter);
    el.addEventListener('mouseleave', leave);
    return () => {
      cancelAnimationFrame(raf);
      el.removeEventListener('mouseenter', enter);
      el.removeEventListener('mouseleave', leave);
    };
  }, []);

  const doubled = [...quotes, ...quotes];
  return (
    <section id="testimonials" style={{overflow:'hidden'}}>
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">04 / Voices</div>
          <div>
            <h2 className="section-title">What people<br/>are <em>feeling</em>.</h2>
          </div>
        </div>
      </div>
      <div style={{overflow:'hidden', paddingLeft:24}}>
        <div ref={trackRef} className="testi-track" style={{width:'max-content', willChange:'transform'}}>
          {doubled.map((q, i) => (
            <div className="testi" key={i}>
              <div className="testi-body">{q.body}</div>
              <div className="testi-foot">
                <div className="testi-avatar" style={{filter:`hue-rotate(${i*40}deg)`}} />
                <div>
                  <div className="testi-name">{q.name}</div>
                  <div className="testi-role">{q.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;