function ChannelHub() {
  const primary = [
    {
      name: 'Newsletter „Der Autopreneur“',
      body: 'Meine wöchentliche Analyse zur Autoindustrie. Jeden Sonntag um 7 Uhr in deinem Postfach.',
      href: 'https://www.autopreneur.de/subscribe', cta: 'Abonnieren',
    },
    {
      name: 'Podcast',
      body: 'Jeden Dienstag, auf Spotify, Apple Podcasts und überall sonst.',
      href: 'https://autopreneur.captivate.fm/', cta: 'Reinhören',
    },
    {
      name: 'YouTube',
      body: 'Meine Analysen als Video. Jede Woche eine neue Einordnung zur Transformation der Branche.',
      href: 'https://www.youtube.com/@philippraasch', cta: 'Zum Kanal',
    },
    {
      name: 'LinkedIn',
      body: 'Tägliche Gedanken und Diskussion mit über 60.000 Menschen aus der Autoindustrie.',
      href: 'https://www.linkedin.com/in/praasch/', cta: 'Vernetzen',
    },
  ];
  const more = [
    { name: 'English Newsletter', href: 'https://germanautopreneur.com/subscribe' },
    { name: 'Instagram', href: 'https://www.instagram.com/philipp_raasch/' },
    { name: 'TikTok', href: 'https://www.tiktok.com/@autopreneur.de' },
    { name: 'Threads', href: 'https://www.threads.com/@philipp_raasch' },
    { name: 'X', href: 'https://x.com/PhilippRaasch' },
  ];
  return (
    <section className="section channelhub">
      <div className="container-narrow">
        <div className="section-eyebrow"><span className="kicker-line"></span>Kanäle</div>
        <h2 className="section-title">Wo du mir folgen kannst</h2>
        <div className="channels-grid">
          {primary.map((c, i) => (
            <article key={i} className="channel-card">
              <h3 className="channel-name">{c.name}</h3>
              <p className="channel-body">{c.body}</p>
              <a className="btn btn-ghost" href={c.href} target="_blank" rel="noopener noreferrer">{c.cta}</a>
            </article>
          ))}
        </div>
        <div className="channelhub-more">
          <span className="channelhub-more-label">Außerdem auf</span>
          <ul className="channelhub-more-list">
            {more.map((m) => (
              <li key={m.name}>
                <a href={m.href} target="_blank" rel="noopener noreferrer">{m.name}</a>
              </li>
            ))}
            <li className="channelhub-more-all">
              <a href="https://www.autopreneur.de/links" target="_blank" rel="noopener noreferrer">Alle Kanäle und Links →</a>
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
}
window.ChannelHub = ChannelHub;