// Pretty Rare — Reviews ("Client love", Google-style, realistic)

const REVIEWS = [
  { q: 'Honestly the nicest clinic experience I’ve had. I felt listened to and never rushed, and the space is so calming.', who: 'Tahlia M.' },
  { q: 'From the welcome to the aftercare, everything felt considered. You can tell they genuinely care about doing things properly.', who: 'Bianca R.' },
  { q: 'I came in unsure and left completely at ease. No pressure at all, just lovely, professional advice and a beautiful space.', who: 'Charlotte W.' },
];

function Stars() {
  return (
    <div style={{ display: 'flex', gap: 4 }} aria-label="5 out of 5 stars">
      {[0, 1, 2, 3, 4].map((i) => (
        <svg key={i} width="15" height="15" viewBox="0 0 20 20" fill="var(--accent)">
          <path d="M10 1.6l2.47 5.18 5.69.62-4.24 3.84 1.16 5.6L10 14.1l-5.08 2.74 1.16-5.6L1.84 7.4l5.69-.62z"/>
        </svg>
      ))}
    </div>
  );
}

function SiteResults() {
  return (
    <section data-screen-label="results" className="section section--blush">
      <div className="wrap">
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          gap: 40, flexWrap: 'wrap', marginBottom: 54,
        }}>
          <div style={{ maxWidth: 560 }}>
            <div className="kicker" style={{ marginBottom: 24 }}>Reviews</div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 500,
              fontSize: 'clamp(34px, 4vw, 58px)', lineHeight: 1.04,
              letterSpacing: '-0.018em', color: 'var(--fg)', margin: 0,
            }}>
              Client <span style={{ fontStyle: 'italic', fontWeight: 400, color: 'var(--accent)' }}>love</span>.
            </h2>
            <p style={{
              fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: 16.5,
              lineHeight: 1.66, color: 'var(--fg-soft)', margin: '18px 0 0 0', maxWidth: 440,
            }}>
              Kind words from clients who have visited Pretty Rare Boutique.
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40,
              color: 'var(--fg)', lineHeight: 1,
            }}>5.0</span>
            <div>
              <Stars />
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26 }}>
          {REVIEWS.map((r) => (
            <div key={r.who} style={{
              background: 'var(--surface)', border: '1px solid var(--border)',
              borderRadius: 18, padding: '32px 32px 28px', boxShadow: 'var(--shadow-sm)',
              display: 'flex', flexDirection: 'column',
            }}>
              <Stars />
              <p style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
                fontSize: 21, lineHeight: 1.42, color: 'var(--fg)', margin: '20px 0 0 0', flexGrow: 1,
              }}>“{r.q}”</p>
              <div style={{
                marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--border)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <span style={{
                  fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 14, color: 'var(--fg)',
                }}>{r.who}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteResults = SiteResults;