// Pretty Rare Boutique — Testimonials (clean rotating quote)

const SITE_QUOTES = [
  { q: 'The first clinic that felt like a place I would want to spend an afternoon.', who: 'Eloise R.' },
  { q: 'They listened before they picked up a single instrument.',                    who: 'Madeline T.' },
  { q: 'The most thoughtful conversation I have had about my face in a decade.',      who: 'Sophie H.' },
];

function SiteTestimonials() {
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % SITE_QUOTES.length), 6500);
    return () => clearInterval(id);
  }, []);

  return (
    <section data-screen-label="testimonials" className="section" style={{
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="halo" style={{ top: '20%', left: '10%', width: 400, height: 400 }} />

      <div className="wrap-prose" style={{ position: 'relative', textAlign: 'center' }}>
        <div className="eyebrow" style={{ justifyContent: 'center', marginBottom: 36 }}>Heard in the clinic</div>

        <div style={{ position: 'relative', minHeight: 200 }}>
          {SITE_QUOTES.map((qq, i) => (
            <div key={i} style={{
              position: 'absolute', inset: 0,
              opacity: i === idx ? 1 : 0,
              transform: i === idx ? 'translateY(0)' : 'translateY(12px)',
              transition: 'opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft)',
            }}>
              <div style={{
                fontFamily: 'var(--font-sans)', fontWeight: 500,
                fontSize: 'clamp(28px, 3.4vw, 44px)',
                letterSpacing: '-0.03em', lineHeight: 1.2,
                color: 'var(--fg)', textWrap: 'balance',
              }}>{qq.q}</div>
              <div style={{ marginTop: 28,
                fontFamily: 'var(--font-sans)', fontWeight: 500,
                fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
                color: 'var(--accent)',
              }}>{qq.who}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, display: 'flex', justifyContent: 'center', gap: 10 }}>
          {SITE_QUOTES.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} style={{
              width: i === idx ? 32 : 8, height: 2, border: 0, padding: 0,
              background: i === idx ? 'var(--fg)' : 'var(--border)',
              cursor: 'pointer',
              transition: 'width 360ms var(--ease-soft), background 360ms var(--ease-soft)',
              borderRadius: 999,
            }} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteTestimonials = SiteTestimonials;