function Appearances() {
  const items = [
    { date: 'Juni 2026', outlet: 'Ronzheimer · Podcast', title: 'Der Auto-Angriff auf Deutschland',
      href: 'https://ronzheimer.podigee.io/721-der-auto-angriff-auf-deutschland-mit-philipp-raasch' },
    { date: 'Mai 2026', outlet: 'Berliner Zeitung', title: 'China greift nach VW-Werken und BMW-Mitarbeitern',
      href: 'https://www.berliner-zeitung.de/article/china-greift-nach-vw-werken-und-bmw-mitarbeitern-xiaomi-kann-mehr-bieten-10037458' },
    { date: 'März 2026', outlet: 'NRC', title: 'Robots zijn BMW’s nieuwe arbeidersklasse',
      href: 'https://www.nrc.nl/nieuws/2026/03/27/robots-zijn-bmws-nieuwe-arbeidersklasse-a4923321' },
    { date: 'März 2026', outlet: 'Deutsche Welle & Focus', title: 'Wohin steuert die deutsche Autobranche?',
      href: 'https://www.dw.com/de/wohin-steuert-die-deutsche-autobranche/a-76423964' },
    { date: 'Feb 2026', outlet: 'SBS Summit · Panel', title: 'Can German Automotive Still Transform in Time?',
      href: 'https://youtu.be/5IYmxZsLc_Q' },
    { date: 'Nov 2025', outlet: 'René will Rendite', title: 'Welche deutschen Autobauer überleben?',
      href: 'https://www.youtube.com/watch?v=PlrfcZNA9Tg' },
    { date: 'Sep 2025', outlet: 'Washington Post', title: 'After Tesla sales crash in Europe, new model faces a hostile market',
      href: 'https://www.washingtonpost.com/world/2025/09/04/tesla-europe-germany-musk-sales/' },
    { date: 'März 2025', outlet: 'Tagesschau24 · ARD', title: 'Update Wirtschaft · TV-Interview',
      href: 'https://www.tagesschau.de/multimedia/sendung/tagesschau24/boerselive/video-1444030.html' },
  ];
  const logos = [
    { src: 'assets/press/tagesschau24.svg',    alt: 'tagesschau24' },
    { src: 'assets/press/deutsche-welle.svg',  alt: 'Deutsche Welle' },
    { src: 'assets/press/focus.png',           alt: 'Focus Online' },
    { src: 'assets/press/ronzheimer.svg',      alt: 'Ronzheimer' },
  ];
  return (
    <section className="section appearances" id="auftritte">
      <div className="container-narrow">
        <div className="section-eyebrow"><span className="kicker-line"></span>Auftritte</div>
        <h2 className="section-title">Eingeordnet, wo es zählt</h2>
        <ul className="appearance-list">
          {items.map((a, i) => (
            <li key={i} className="appearance-item">
              <a className="appearance-link" href={a.href} target="_blank" rel="noopener noreferrer">
                <span className="appearance-outlet">{a.outlet}</span>
                <span className="appearance-title">{a.title}</span>
                <span className="appearance-date">{a.date}</span>
              </a>
            </li>
          ))}
        </ul>
        <p className="appearance-note">
          Dazu regelmäßiger Gastautor bei{' '}
          <a href="https://www.focus.de/autoren/philipp-raasch_83cd2c64-eece-4eaf-920c-042779482ddd.html" target="_blank" rel="noopener noreferrer">Focus Online</a>.{' '}
          <a href="https://autopro.notion.site/Medienauftritte-Publikationen-1d9152c94dcf80739fe8e953a4082f64" target="_blank" rel="noopener noreferrer">Alle Auftritte und Publikationen →</a>
        </p>
        <div className="appearance-logos">
          {logos.map((l) => (<img key={l.alt} src={l.src} alt={l.alt} loading="lazy" />))}
        </div>
      </div>
    </section>
  );
}
window.Appearances = Appearances;
