// Testimonial — white section, gradient quote mark sized to ~2x body weight,
// placed ABOVE the copy (no overlap). Photo right, no pink backdrop shape.
function Testimonial() {
  // Paragraph is 30px / 500. "Up to 2x visual weight" = quote mark ~60px tall,
  // pulled to its own line so it never collides with copy.
  return (
    <section style={{background:'#fff', color:'#111', padding:'96px 0'}}>
      <div className="wrap" style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 56, alignItems:'center'}}>
        <div>
          {/* Opening quote glyph — proper "66" curly opening quotes with the hooks
              at top and drops hanging below. Pink-to-blush gradient via background-clip. */}
          <div style={{
            fontFamily: '"Times New Roman", Georgia, serif',
            fontWeight: 700,
            fontSize: 140,
            lineHeight: 1,
            height: 80,            /* clip the descender so it doesn't push the paragraph */
            marginBottom: 8,
            background: 'linear-gradient(135deg, #B11871 0%, #E23DA3 60%, #F4A7CE 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            color: 'transparent',
            userSelect: 'none',
          }} aria-hidden="true">&ldquo;</div>

          <p style={{fontSize: 30, fontWeight: 500, lineHeight: 1.35, margin: 0, maxWidth: 620}}>
            The only agency you ever need to know, and the only one all agencies agree on.
          </p>

          <div style={{marginTop: 32, fontSize: 12, color:'#6b6b6b', letterSpacing:'.16em', textTransform:'uppercase', fontWeight: 700}}>
            Clutch Global · 2024 Champion Winner
          </div>
        </div>
        <div style={{position:'relative'}}>
          <img src="../../assets/photos/laptop-meeting-pink-blazer.jpg" className="photo-tile" style={{width:'100%', aspectRatio: '4/5', objectFit:'cover', transform:'rotate(2deg)'}}/>
          {/* Pink backdrop shape removed per feedback */}
        </div>
      </div>
    </section>
  );
}

window.Testimonial = Testimonial;