function Showreel() {
  const clips = [
    {
      href: 'https://youtu.be/vGDN0LguH_I',
      poster: 'assets/clips/ronzheimer-china.jpg',
      outlet: 'Paul Ronzheimer',
      title: 'Wie Deutschland in die China-Falle tappte',
    },
    {
      href: 'https://www.youtube.com/watch?v=Iuf5iD8B1Mo',
      poster: 'assets/clips/dw-mercedes.jpg',
      outlet: 'Deutsche Welle · English',
      title: 'Mercedes Profits Collapse 57% — What Went Wrong?',
    },
  ];
  return (
    <section className="section showreel" id="video">
      <div className="container-narrow">
        <div className="section-eyebrow"><span className="kicker-line"></span>Auf Sendung</div>
        <h2 className="section-title">Philipp vor der Kamera</h2>
        <p className="section-lede">So redet er über die Branche. Pointiert, verständlich, ohne Konzern-Filter.</p>
        <div className="showreel-grid">
          {clips.map((c, i) => (
            <a key={i} className="clip-card" href={c.href} target="_blank" rel="noopener noreferrer">
              <span className="clip-poster">
                <img src={c.poster} alt={`${c.outlet}: ${c.title}`} loading="lazy" />
                <span className="clip-play" aria-hidden="true"></span>
              </span>
              <span className="clip-meta">
                <span className="clip-outlet">{c.outlet}</span>
                <span className="clip-title">{c.title}</span>
              </span>
            </a>
          ))}
        </div>
        <p className="showreel-channel">
          Dazu jede Woche eine neue Analyse zur Autoindustrie als Video.{' '}
          <a href="https://www.youtube.com/@philippraasch" target="_blank" rel="noopener noreferrer">Zum YouTube-Kanal →</a>
        </p>
      </div>
    </section>
  );
}
window.Showreel = Showreel;