// testimonials.jsx — bubble quote cards
function Testimonials({ t }) {
  return (
    <section style={{ paddingTop: 120, paddingBottom: 120, position: 'relative' }}>
      <div className="wrap">
        <div className="kicker reveal" style={{ marginBottom: 28 }}>
          <span className="dot"></span>{t.tst_eye}
        </div>
        <h2 className="display reveal" style={{ fontSize: 'clamp(56px, 8vw, 128px)', marginBottom: 80 }}>
          <span>{t.tst_title_1}</span>{' '}
          <span className="irid-text" style={{ fontStyle: 'italic' }}>{t.tst_title_2}</span>
        </h2>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {t.testimonials.map((q, i) => {
            const colors = ['magenta', 'azure', 'lime'];
            const c = colors[i];
            return (
              <div key={i} className="reveal chrome-card" style={{
                padding: 32, position: 'relative',
                transform: i === 1 ? 'translateY(40px)' : 'translateY(0)'
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic',
                  fontSize: 96, lineHeight: 0.6,
                  color: `var(--${c})`,
                  marginBottom: 0
                }}>
                  "
                </div>
                <p style={{
                  fontFamily: 'var(--font-display)', fontWeight: 500,
                  fontSize: 21, lineHeight: 1.3,
                  marginBottom: 32, color: 'var(--ink)',
                  letterSpacing: '-0.015em'
                }}>
                  {q.q}
                </p>
                <div style={{
                  paddingTop: 20, borderTop: '1.5px solid var(--ink)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center'
                }}>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 2 }}>{q.a}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-mute)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>{q.r}</div>
                  </div>
                  <Star size={22} color={`var(--${c})`} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });