const Testimonials = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const reviews = [
    { name: 'Amara Okafor', role: 'CTO, LogiFlow Africa', quote: 'Ziverse built our entire AI dispatch platform from scratch in 4 months. The team understood the business domain deeply — they didn\'t just code what we said, they improved on our original specs. The 40% cost reduction we achieved in year one speaks for itself.', rating: 5, initials: 'AO', color: '#3b82f6' },
    { name: 'David Kim', role: 'Founder, HireMetrics', quote: 'We went from a napkin sketch to 200 paying customers in 6 months. Ziverse built our entire SaaS platform — backend, frontend, integrations, and analytics. The architecture is clean, the code is documented, and the team was responsive throughout.', rating: 5, initials: 'DK', color: '#8b5cf6' },
    { name: 'Priya Sharma', role: 'VP Engineering, FinLink', quote: 'Our blockchain marketplace needed both technical depth and regulatory awareness. Ziverse delivered both. Smart contract audits, secure custody flows, and a beautiful UX. The $2M in transactions in the first quarter validated their approach completely.', rating: 5, initials: 'PS', color: '#0891b2' },
    { name: 'Michael Torres', role: 'CEO, RetailSense', quote: 'The demand forecasting engine Ziverse built integrated seamlessly with our existing ERP. Within 3 months, we cut excess inventory by 35%. That\'s real money saved. The predictive models are accurate in ways we didn\'t expect — it feels like having a data scientist on staff full-time.', rating: 5, initials: 'MT', color: '#059669' },
    { name: 'Sarah Adeyemi', role: 'Director, MedConnect', quote: 'Building HIPAA-compliant software is complex and unforgiving. Ziverse navigated every compliance requirement without sacrificing UX. Our patient portal launched with 12,000 users on day one and had zero critical issues in the first 90 days.', rating: 5, initials: 'SA', color: '#dc2626' },
  ];

  const Stars = ({ n }) => (
    <div style={{ display: 'flex', gap: 3, marginBottom: 16 }}>
      {Array(n).fill(0).map((_, i) => (
        <svg key={i} width="16" height="16" viewBox="0 0 16 16" fill="#f59e0b"><path d="M8 1l1.8 3.6L14 5.3l-3 2.9.7 4.1L8 10.4l-3.7 1.9.7-4.1-3-2.9 4.2-.7z"/></svg>
      ))}
    </div>
  );

  return (
    <section id="testimonials" data-screen-label="Testimonials" ref={ref} style={{ padding: '100px 0', background: 'var(--bg, #e8edf5)', overflow: 'hidden' }}>
      <div className="inner-wrap" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', maxWidth: 520, margin: '0 auto 56px', opacity: visible ? 1 : 0, transition: 'all 0.6s ease' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'var(--accentbg)', border: '1px solid rgba(37,99,235,0.18)', marginBottom: 18 }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: 'var(--accent, #1d4ed8)', letterSpacing: '0.07em' }}>CLIENT STORIES</span>
          </div>
          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, color: 'var(--text, #0f172a)', letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 14px' }}>
            Results our clients talk about
          </h2>
        </div>

        {/* Featured review */}
        <div className="dm-card" style={{ padding: '44px', borderRadius: 18, background: 'var(--bg3, #fff)', border: '1.5px solid var(--border)', boxShadow: 'var(--shadow2)', marginBottom: 20, opacity: visible ? 1 : 0, transition: 'all 0.7s ease 0.1s' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'start' }} className="testimonial-inner">
            <div>
              <Stars n={reviews[active].rating} />
              <p style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(16px, 2vw, 20px)', fontWeight: 500, color: 'var(--text, #0f172a)', lineHeight: 1.6, margin: '0 0 28px', fontStyle: 'italic' }}>
                "{reviews[active].quote}"
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: '50%', background: reviews[active].color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Space Grotesk', sans-serif", fontSize: 14, fontWeight: 700, color: '#fff' }}>{reviews[active].initials}</div>
                <div>
                  <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 15, fontWeight: 600, color: 'var(--text, #0f172a)' }}>{reviews[active].name}</div>
                  <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'var(--text2, #64748b)' }}>{reviews[active].role}</div>
                </div>
              </div>
            </div>
            {/* Nav dots */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', paddingTop: 4 }}>
              {reviews.map((_, i) => (
                <button key={i} onClick={() => setActive(i)} style={{ width: 8, height: i === active ? 28 : 8, borderRadius: 4, background: i === active ? 'var(--accent, #1d4ed8)' : 'var(--border)', border: 'none', cursor: 'pointer', padding: 0, transition: 'all 0.25s' }}/>
              ))}
            </div>
          </div>
        </div>

        {/* Mini cards row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }} className="testimonial-mini-grid">
          {reviews.map((r, i) => (
            <div key={i} onClick={() => setActive(i)} className="dm-card" style={{
              padding: '16px', borderRadius: 12, cursor: 'pointer',
              background: i === active ? 'var(--accentbg)' : 'var(--bg3, #fff)',
              border: `1.5px solid ${i === active ? 'var(--accent2, #2563eb)' : 'var(--border)'}`,
              transition: 'all 0.2s',
              opacity: visible ? 1 : 0, transitionDelay: `${0.15 + i * 0.06}s`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: r.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Space Grotesk', sans-serif", fontSize: 10, fontWeight: 700, color: '#fff', flexShrink: 0 }}>{r.initials}</div>
                <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 12, fontWeight: 600, color: 'var(--text, #0f172a)', lineHeight: 1.2 }}>{r.name}</div>
              </div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11.5, color: 'var(--text2, #64748b)', lineHeight: 1.5, margin: 0, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{r.quote}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Testimonials });