function TestimonialsSection() {
  const paintedColors = COLORS_DATA.map(c => c.wet);
  return (
    <section id="testimonials" style={{ background: 'rgba(199,46,102,0.03)', padding: 'clamp(3rem, 8vh, 6rem) clamp(1.5rem, 6vw, 6rem)' }}>
      <SectionReveal>
        <h2 style={{
          fontFamily: 'var(--font-identity)', fontWeight: 600, fontSize: 'clamp(32px, 3.5vw, 40px)',
          color: 'var(--ink-dark)', textAlign: 'center', marginBottom: 40,
        }}>What artists say.</h2>
      </SectionReveal>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, maxWidth: 960, margin: '0 auto' }}>
        {TESTIMONIALS_DATA.map((t, i) => (
          <SectionReveal key={i} delay={i * 100} style={{
            background: '#FFFFFF', border: '1px solid rgba(199,46,102,0.2)',
            borderRadius: 4, padding: '28px 24px',
            boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
          }}>
            <div style={{ color: 'var(--pigment-ochre)', fontSize: 16, letterSpacing: 2, marginBottom: 14 }}>★★★★★</div>
            <p style={{
              fontFamily: 'var(--font-identity)', fontStyle: 'italic', fontSize: 20,
              color: 'var(--ink-dark)', lineHeight: 1.6, marginBottom: 18,
            }}>"{t.quote}"</p>
            <p style={{ fontFamily: 'var(--font-ui)', fontWeight: 500, fontSize: 13, color: 'var(--flower-pink)' }}>{t.author}</p>
            <p style={{ fontFamily: 'var(--font-ui)', fontSize: 11, color: 'rgba(34,34,51,0.5)' }}>{t.context}</p>
          </SectionReveal>
        ))}
      </div>

      {/* Portfolio strip */}
      {/* Portfolio strip */}
      <SectionReveal delay={300}>
        <style>{`
          .testimonial-blob { width: 140px; height: 90px; }
          .testimonial-blobs-container { gap: -8px; }
          @media (max-width: 768px) {
            .testimonial-blob { width: 45px !important; height: 30px !important; margin-left: -4px !important; }
            .testimonial-blobs-container { gap: 0 !important; flex-wrap: nowrap !important; }
          }
        `}</style>
        <div className="testimonial-blobs-container" style={{ display: 'flex', justifyContent: 'center', marginTop: 48, flexWrap: 'wrap' }}>
          {paintedColors.map((color, i) => (
            <div key={i} className="testimonial-blob" style={{
              borderRadius: `${40 + i * 5}% ${60 - i * 3}% ${50 + i * 2}% ${45 - i}% / ${55 - i * 2}% ${45 + i}% ${60 - i * 4}% ${40 + i * 3}%`,
              background: `
                radial-gradient(ellipse at ${30 + i * 10}% ${40 + i * 5}%, ${color}e6, ${color}88 40%, ${color}22 80%),
                linear-gradient(${10 + i * 20}deg, transparent 20%, ${color}33 50%, transparent 80%)
              `,
              marginLeft: i > 0 ? -24 : 0,
              filter: 'blur(1px) contrast(1.1)',
              opacity: 0.85,
              mixBlendMode: 'multiply',
              boxShadow: `inset 0 0 10px ${color}44, 2px 4px 10px rgba(0,0,0,0.03)`,
              transition: 'transform 0.4s ease',
              cursor: 'pointer',
              position: 'relative',
              zIndex: 1,
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.1) translateY(-5px) rotate(2deg)'; e.currentTarget.style.zIndex = 10; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.zIndex = 1; }}
            ></div>
          ))}
        </div>
        <p style={{
          fontFamily: 'var(--font-ui)', fontSize: 11, color: 'rgba(34,34,51,0.5)',
          textAlign: 'center', marginTop: 16,
        }}>Swatches painted with Xochiatl. All colors shown are botanical.</p>
      </SectionReveal>
    </section>
  );
}

window.TestimonialsSection = TestimonialsSection;