/* Corsa Privata — discreet testimonial. Attribution is withheld on purpose:
 * discretion is the product. Quotes are illustrative, pending real, permissioned
 * receipts (per the brand platform's "no fabricated proof" rule). */
const TestIcon = window.Icon;

function Testimonial({ t }) {
  const q = t.testimonial;
  return (
    <section style={{ background: 'var(--surface-page)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(72px,9vw,116px) 32px' }}>
        <div className="cp-test-grid cp-reveal" style={{ display: 'grid', gridTemplateColumns: '1.35fr 0.65fr', gap: 56, alignItems: 'center' }}>
          <div>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', fontSize: 64, lineHeight: 0.6, color: 'var(--cp-gold-500)', display: 'block' }}>&ldquo;</span>
            <blockquote style={{ margin: '8px 0 0', fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-medium)', fontSize: 'clamp(24px,3.2vw,38px)', lineHeight: 1.18, letterSpacing: '-0.02em', color: 'var(--text-strong)', maxWidth: '22ch', textWrap: 'balance' }}>
              {q.quote}
            </blockquote>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 30 }}>
              <span style={{ width: 36, height: 1, background: 'var(--cp-gold-500)' }} />
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-semibold)', fontSize: 14, color: 'var(--text-strong)', letterSpacing: 'var(--ls-wide)' }}>{q.name}</span>
                <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)', marginTop: 2 }}>{q.role}</span>
              </span>
            </div>
          </div>

          <div className="cp-test-aside" style={{ borderLeft: '1px solid var(--border-hairline)', paddingLeft: 40 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <TestIcon name="shield-check" size={18} stroke={1.5} color="var(--cp-gold-700)" />
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{q.whyTitle}</span>
            </div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.62, color: 'var(--text-body)', margin: '14px 0 0', textWrap: 'pretty' }}>
              {q.whyBody}
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, color: 'var(--text-faint)', margin: '18px 0 0' }}>
              {q.tag}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Testimonial = Testimonial;