// Testimonials / case studies — editorial quote + mini stats per card
const testimStyles = {
  wrap: { padding: '140px 0', borderBottom: '1px solid var(--line)' },
  head: { marginBottom: 60, maxWidth: 820 },
  title: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 72, lineHeight: 0.95, letterSpacing: '-0.02em',
    margin: 0,
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1.4fr 1fr 1fr',
    gap: 16,
    alignItems: 'stretch',
  },
  card: {
    padding: 32,
    background: 'var(--panel)',
    border: '1px solid var(--line-2)',
    borderRadius: 'var(--radius)',
    display: 'flex', flexDirection: 'column', gap: 20,
    position: 'relative',
  },
  featureCard: {
    background: 'linear-gradient(135deg, rgba(var(--accent-rgb),.14), rgba(109,91,255,.06))',
    borderColor: 'rgba(var(--accent-rgb),.25)',
  },
  sector: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
    letterSpacing: '.16em', color: 'var(--ink-3)', textTransform: 'uppercase',
  },
  quote: {
    fontFamily: "'Instrument Serif', serif",
    fontSize: 28, lineHeight: 1.2, letterSpacing: '-0.01em',
    margin: 0,
    color: 'var(--ink)',
  },
  quoteLg: { fontSize: 40 },
  person: { display: 'flex', alignItems: 'center', gap: 14, marginTop: 'auto' },
  avatarPh: {
    width: 46, height: 46, borderRadius: 999,
    background: 'repeating-linear-gradient(45deg, var(--avatar-stripe-1) 0 6px, var(--avatar-stripe-2) 6px 12px)',
    display: 'grid', placeItems: 'center',
    fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: 'var(--ink-2)',
  },
  name: { fontSize: 14, color: 'var(--ink)' },
  role: { fontSize: 12, color: 'var(--ink-3)' },
  kpis: {
    display: 'flex', gap: 24, padding: '16px 0',
    borderTop: '1px solid var(--line)',
    marginTop: 4,
  },
  kpi: { display: 'flex', flexDirection: 'column', gap: 2 },
  kpiV: { fontFamily: "'Instrument Serif', serif", fontSize: 32, letterSpacing: '-0.02em', color: 'var(--accent)' },
  kpiL: { fontSize: 11, color: 'var(--ink-3)', fontFamily: "'JetBrains Mono', monospace", letterSpacing: '.1em', textTransform: 'uppercase' },
};

const TESTIMONIALS = [
  {
    feature: true,
    sector: 'BTP · RÉNOVATION',
    quote: 'On a remplacé trois régies d\'affiliation par BackMeUp. Moins de leads poubelles, plus de signatures. Notre coût d\'acquisition a baissé de moitié en six mois.',
    name: 'Martial Dahan', role: 'PDG · Armoir',
    avatar: 'MD',
    kpis: [{ v: '−51%', l: 'CAC' }, { v: '3.1×', l: 'Signatures / mois' }],
  },
  {
    sector: 'IMMOBILIER',
    quote: 'Flux stable, intégration Hubspot en deux jours. Les équipes commerciales appellent plus vite et closent mieux.',
    name: 'Clara Vidal', role: 'Head of Growth · Maison&Cie',
    avatar: 'CV',
    kpis: [{ v: '87%', l: 'Qualif' }],
  },
  {
    sector: 'ASSURANCE',
    quote: 'Le tarif dégressif nous a permis de scaler sans renégocier tous les trois mois. C\'est propre et lisible.',
    name: 'Samir Benali', role: 'Directeur acquisition · NEXA',
    avatar: 'SB',
    kpis: [{ v: '+4 200', l: 'Leads / mois' }],
  },
];

function Testimonials() {
  return (
    <section id="clients" style={testimStyles.wrap} className="section-pad">
      <div className="wrap">
        <div style={testimStyles.head}>
          <div className="eyebrow" style={{marginBottom: 20}}>Témoignages</div>
          <h2 style={testimStyles.title} className="h-display-2">
            Les équipes qui ont arrêté de <span className="serif italic">mesurer</span><br/>
            et commencé à <span className="serif italic" style={{color:'var(--accent)'}}>vendre</span>.
          </h2>
        </div>

        <div style={testimStyles.grid} className="testim-grid">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className={t.feature ? 'testim-feature' : undefined} style={{...testimStyles.card, ...(t.feature ? testimStyles.featureCard : {})}}>
              <div style={testimStyles.sector}>{t.sector}</div>
              <blockquote className={'testim-quote' + (t.feature ? ' testim-quote-lg' : '')} style={{...testimStyles.quote, ...(t.feature ? testimStyles.quoteLg : {})}}>
                « {t.quote} »
              </blockquote>
              <div style={testimStyles.kpis}>
                {t.kpis.map((k, j) => (
                  <div key={j} style={testimStyles.kpi}>
                    <span style={testimStyles.kpiV}>{k.v}</span>
                    <span style={testimStyles.kpiL}>{k.l}</span>
                  </div>
                ))}
              </div>
              <div style={testimStyles.person}>
                <div style={testimStyles.avatarPh}>{t.avatar}</div>
                <div>
                  <div style={testimStyles.name}>{t.name}</div>
                  <div style={testimStyles.role}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });