function Testimonials() {
  const items = [
    {
      name: 'Prof. Dirk Slama',
      role: 'VP Bosch & Chairman digital.auto',
      photo: 'assets/testimonials/dirk-slama.jpeg',
      quote: 'Wir bauen mit digital.auto eine unabhängige Tech-Initiative für die Autoindustrie auf. Größte Herausforderung? Sichtbarkeit bei potenziellen Partnern in der Industrie. Die Zusammenarbeit mit Philipp zur IAA hat genau das gebracht: Über 36.000 Impressions bei unserer Zielgruppe.',
      kpi: '36.000+ Impressions · IAA-Kampagne',
    },
    {
      name: 'Steffen Ramsaier',
      role: 'Senior Director Field Marketing DACH · Informatica',
      photo: 'assets/testimonials/steffen-ramsaie.jpeg',
      quote: 'Die Reichweite und Conversion-Rate von Philipps Content haben mich wirklich beeindruckt. Mit nur einem Post konnten wir 35 hochwertige Anmeldungen für unser Webinar generieren. Besonders wertvoll war die Quality der Leads: Nicht nur Berater, sondern echte Entscheider aus der Industrie.',
      kpi: '35 Webinar-Anmeldungen · 1 Post',
    },
    {
      name: 'Joline Olbing',
      role: 'Senior Project Manager · Messe Düsseldorf GmbH',
      photo: 'assets/testimonials/joline-olbing.jpeg',
      quote: 'Philipp hat uns sofort mit seiner sympathischen Art und dem tiefen Verständnis für die Automotive-Branche überzeugt. Seine strategische Beratung zur optimalen Kampagnenplanung war für uns besonders wertvoll. Die Zusammenarbeit ist absolut professionell – vom ersten Gespräch bis zur konkreten Umsetzung. Perfekt für jeden, der die automobile Zielgruppe gezielt erreichen möchte.',
      kpi: 'Strategische Beratung + konkrete Umsetzung',
    },
    {
      name: 'Bowen Li',
      role: 'Business Solution Manager · ZHUOYU Technology',
      photo: 'assets/testimonials/bowen-li.jpeg',
      quote: 'As a Chinese tech company entering the European market, we needed credibility. Philipp is one of the few automotive influencers in Germany with a genuine B2B focus. His technical expertise and authentic style worked. We would definitely work with Philipp again.',
      kpi: 'Credibility-Boost für Markteintritt',
      en: true,
    },
  ];

  return (
    <section style={{ padding: '120px 0', background: '#fff' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 56, flexWrap: 'wrap', gap: 20 }}>
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 20 }}>
              <span className="kicker-line"></span>Was Partner sagen
            </div>
            <h2 className="section-title" style={{ fontSize: 48 }}>
              Vom Pilot bis zur 6-Monats-Partnership.
            </h2>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--fg-2)', marginTop: 16, lineHeight: 1.4 }}>
              Entscheider hören zu, weil ich erzähle.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {items.map((t, i) => (
            <article key={t.name} className="card" style={{ padding: 36, display: 'flex', flexDirection: 'column', gap: 20, background: i === 0 || i === 3 ? 'var(--bg-page)' : '#fff' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <TestimonialAvatar name={t.name} photo={t.photo} />
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.01em' }}>{t.name}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', marginTop: 2 }}>{t.role}</div>
                  {t.en && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ap-blue)', marginTop: 4 }}>EN</div>}
                </div>
              </div>

              <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.5, color: 'var(--fg-1)', fontStyle: 'italic', margin: 0, position: 'relative', paddingLeft: 16, borderLeft: '3px solid var(--ap-blue)' }}>
                {t.quote}
              </p>

              <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--ap-blue)' }}></span>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{t.kpi}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
/* Photo → initials fallback. Keeps card layout intact when we don't have a portrait yet. */
function TestimonialAvatar({ name, photo }) {
  const [failed, setFailed] = React.useState(false);
  const initials = name.split(/\s+/).map(w => w[0]).filter(c => c && c.match(/[A-Za-zÄÖÜ]/)).slice(0, 2).join('').toUpperCase();
  const sharedStyle = { width: 72, height: 72, borderRadius: 999, flexShrink: 0, border: '1px solid var(--border-default)' };
  if (!photo || failed) {
    return (
      <div style={{ ...sharedStyle, background: 'var(--bg-page)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--ap-blue)', letterSpacing: '0.02em' }}>
        {initials}
      </div>
    );
  }
  return (
    <img
      src={photo}
      alt={name}
      loading="lazy"
      onError={() => setFailed(true)}
      style={{ ...sharedStyle, objectFit: 'cover', background: 'var(--bg-page)' }}
    />
  );
}
window.Testimonials = Testimonials;