// Pretty Rare Boutique — Testimonials (stacked, no carousel widget)

const SITE_QUOTES = [
  { q: 'I came in nervous and left feeling genuinely cared for. They never once made me feel silly for asking questions.', who: 'Amelia C.' },
  { q: 'I told them I wasn\'t even sure I wanted anything. They listened for the whole consultation. No pressure at all.', who: 'Sophie H.' },
  { q: 'They told me when something wasn\'t right for me. I respected them so much for that. I will never go anywhere else.', who: 'Madeline T.' },
];

function SiteTestimonials() {
  const mobile = useMobile();

  return (
    <section data-screen-label="testimonials" className="section section--blush">
      <div className="wrap-narrow">
        <div className="eyebrow" style={{ marginBottom: mobile ? 40 : 56 }}>Heard in the clinic</div>

        {SITE_QUOTES.map((qq, i) => (
          <div key={i} style={{
            paddingBottom: mobile ? 36 : 52,
            marginBottom: mobile ? 36 : 52,
            borderBottom: i < SITE_QUOTES.length - 1 ? '1px solid var(--border)' : 'none',
            paddingLeft: !mobile && i === 1 ? '8%' : 0,
          }}>
            <p style={{
              fontFamily: 'var(--font-sans)',
              fontWeight: 300,
              fontStyle: 'italic',
              fontSize: mobile ? 19 : 'clamp(20px, 1.9vw, 27px)',
              lineHeight: 1.55,
              letterSpacing: '-0.02em',
              color: 'var(--fg)',
              margin: '0 0 18px',
            }}>
              "{qq.q}"
            </p>
            <div style={{
              fontFamily: 'var(--font-sans)',
              fontSize: 10, letterSpacing: '0.28em',
              textTransform: 'uppercase', fontWeight: 500,
              color: 'var(--fg-muted)',
            }}>{qq.who} · Google Review</div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.SiteTestimonials = SiteTestimonials;