// Testimonials.jsx — dark quote carousel using only the firm's actual practice areas.
function Testimonials() {
  const [i, setI] = React.useState(0);
  
  const go = (d) => setI((p) => (p + d + REVIEWS.length) % REVIEWS.length);
  const r = REVIEWS[i];

  return (
    <section style={{ position: 'relative', background: 'var(--navy-900)', padding: '100px 32px', overflow: 'hidden' }}>
      <img src="assets/brand-photos/portrait-desk-writing.png" alt="" style={{
        position: 'absolute', right: 0, top: 0, height: '100%', width: '42%', objectFit: 'cover',
        objectPosition: 'left center', opacity: 0.14, maskImage: 'linear-gradient(to left, #000, transparent)',
        WebkitMaskImage: 'linear-gradient(to left, #000, transparent)' }} />

      <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <div className="eyebrow" style={{ color: 'var(--brass-400)', marginBottom: 24 }}>What Clients Say</div>
        <div style={{ color: 'var(--brass-400)', fontSize: '1.1rem', letterSpacing: '0.3em', marginBottom: 22 }}>★★★★★</div>
        <p key={i} style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 500,
          fontSize: 'clamp(1.5rem,2.8vw,2.2rem)', lineHeight: 1.42, color: '#fff', minHeight: 160,
          animation: 'fadeUp var(--dur-slow) var(--ease-out)' }}>
          "{r.quote}"
        </p>
        <div style={{ fontFamily: 'var(--font-nameplate)', fontSize: '1.05rem', letterSpacing: '0.06em', color: 'var(--brass-300)', marginTop: 18 }}>
          {r.name}
        </div>
        <div className="eyebrow" style={{ color: 'rgba(243,239,230,0.55)', marginTop: 8 }}>{r.case}</div>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginTop: 40, alignItems: 'center' }}>
          <button onClick={() => go(-1)} aria-label="Previous" style={{ width: 44, height: 44, borderRadius: 'var(--radius-pill)', border: '1px solid rgba(243,239,230,0.3)', background: 'transparent', color: '#fff', cursor: 'pointer', fontSize: '1.1rem' }}>‹</button>
          <div style={{ display: 'flex', gap: 8 }}>
            {REVIEWS.map((_, n) => (
              <button key={n} onClick={() => setI(n)} aria-label={`Review ${n+1}`} style={{
                width: 8, height: 8, borderRadius: 'var(--radius-pill)', border: 'none',
                background: n === i ? 'var(--brass-400)' : 'rgba(243,239,230,0.3)', cursor: 'pointer', padding: 0,
              }} />
            ))}
          </div>
          <button onClick={() => go(1)} aria-label="Next" style={{ width: 44, height: 44, borderRadius: 'var(--radius-pill)', border: '1px solid rgba(243,239,230,0.3)', background: 'transparent', color: '#fff', cursor: 'pointer', fontSize: '1.1rem' }}>›</button>
        </div>
      </div>
    </section>
  );
}