function Testimonials() {
  const items = [
    {
      hook: null,
      quote: 'Philipp reads automotive trends from a completely different angle. His content mix is perfectly balanced and sometimes provocative. Exactly what this industry needs to move forward.',
      name: 'Maria Grazia Davino',
      role: 'Regional Managing Director · BYD Europe',
      photo: 'assets/testimonials/davino.jpg',
    },
    {
      hook: 'Die deutsche Automobilindustrie hat kein Erkenntnis-, sondern ein Umsetzungsproblem.',
      quote: 'Philipp Raasch ordnet die strukturellen Verschiebungen ein, statt sich in nostalgischen Rückblicken zu verlieren. Eine Perspektive, die ich regelmäßig schätze.',
      name: 'Frank Lindenberg',
      role: 'ehem. CFO · Mercedes-Benz AG',
      photo: 'assets/testimonials/lindenberg.jpg',
    },
    {
      hook: null,
      quote: 'Philipp kombiniert OEM-Insider-Wissen mit echter globaler Perspektive. Seine Analysen helfen mir, die Entwicklungen in verschiedenen Märkten richtig einzuordnen. Genau die Art von Intelligence, die Führungskräfte heute brauchen.',
      name: 'Mathias Vaitl',
      role: 'CEO · Mercedes-Benz Korea',
      photo: 'assets/testimonials/vaitl.jpg',
    },
    {
      hook: null,
      quote: 'Der Autopreneur ergänzt die deutsche Automobildiskussion um internationale Perspektiven. Genau die globale Sichtweise, die für eine erfolgreiche Transformation notwendig ist.',
      name: 'Dr. Stefan Baginski',
      role: 'VP Electrical Drive · BMW Group',
      photo: 'assets/testimonials/baginski.jpg',
    },
  ];
  return (
    <section className="testimonials">
      <div className="container">
        <div className="section-eyebrow testimonials-eyebrow">
          <span className="kicker-line"></span>Was meine Leser sagen
        </div>
        <div className="testimonials-grid">
          {items.map((t, i) => (
            <article key={i} className="testimonial-card">
              <div className="testimonial-person">
                <TestimonialAvatar name={t.name} photo={t.photo} />
                <div>
                  <div className="testimonial-name">{t.name}</div>
                  <div className="testimonial-role">{t.role}</div>
                </div>
              </div>
              <p className="testimonial-quote">
                {t.hook && <span className="hook">{t.hook}</span>}
                {t.quote}
              </p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

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();
  if (!photo || failed) {
    return <div className="testimonial-avatar testimonial-avatar-initials">{initials}</div>;
  }
  return (
    <img
      className="testimonial-avatar"
      src={photo}
      alt={name}
      loading="lazy"
      onError={() => setFailed(true)}
    />
  );
}

window.Testimonials = Testimonials;