/* BChannels — Beat 6 "Wie es ausgespielt wird".
   Linear single-column layout. Copy verbatim from Channels.jsx.
   No grid. No imports/exports — global function component.
   Monochrome single-tone glyph icons per channel (deep brand on soft tint),
   rounded-square — calm B2B read, not loud consumer app-icons.
*/
function BChannels() {
  const icons = {
    newsletter: (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1.4 2L12 12.6 19.6 7H4.4zM20 8.3l-7.4 5.5a1 1 0 0 1-1.2 0L4 8.3V17h16V8.3z" />
      </svg>
    ),
    linkedin: (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M4.98 3.5C4.98 4.88 3.87 6 2.49 6S0 4.88 0 3.5 1.12 1 2.49 1s2.49 1.12 2.49 2.5zM.24 8.04h4.48V23H.24V8.04zM8.34 8.04h4.29v2.04h.06c.6-1.13 2.06-2.32 4.24-2.32 4.53 0 5.37 2.98 5.37 6.86V23h-4.48v-6.62c0-1.58-.03-3.62-2.2-3.62-2.2 0-2.54 1.72-2.54 3.5V23H8.34V8.04z" />
      </svg>
    ),
    youtube: (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2C0 8.07 0 12 0 12s0 3.93.5 5.8a3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z" />
      </svg>
    ),
    podcast: (
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zM7 11a1 1 0 0 0-2 0 7 7 0 0 0 6 6.92V21H8a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-3v-3.08A7 7 0 0 0 19 11a1 1 0 1 0-2 0 5 5 0 0 1-10 0z" />
      </svg>
    ),
  };

  const channels = [
    {
      key: 'newsletter',
      name: 'Newsletter',
      tag: 'Stärkster Conversion-Kanal',
      stats: [
        { value: '~40.000', label: 'Abonnenten' },
        { value: 'Ø 60%', label: 'Open Rate' },
      ],
      body: 'Lead-Generation, Webinar-Anmeldungen und Asset-Downloads.',
    },
    {
      key: 'linkedin',
      name: 'LinkedIn',
      tag: 'Größte Reichweite',
      stats: [
        { value: '60.000+', label: 'Follower' },
        { value: '3,37M', label: 'Impressions / 90T' },
      ],
      body: 'C-Level diskutiert mit. Du siehst genau wer und kannst gezielt nachfassen.',
    },
    {
      key: 'youtube',
      name: 'YouTube',
      tag: 'Persönliche Vorstellung',
      stats: [
        { value: '10.000+', label: 'Abonnenten' },
        { value: '250.000+', label: 'Views / Monat' },
      ],
      body: 'Ich stelle dein Angebot persönlich vor. In einem Video, dem die Zuschauer ohnehin folgen.',
    },
    {
      key: 'podcast',
      name: 'Podcast',
      tag: 'Höchste Aufmerksamkeit',
      stats: [
        { value: '~10.000', label: 'Downloads / Monat' },
        { value: '7.000+', label: 'Unique Listeners' },
      ],
      body: 'Hörer sind 15 bis 60 Minuten ungestört dabei. Empfehlungen kommen an.',
    },
  ];

  return (
    <section className="b-beat" id="b-channels">
      <h2>Die Kanäle, über die deine Entscheider <em>mich</em> hören</h2>
      <p className="b-beat__lead">
        100.000+ Automotive-Professionals folgen mir. Über diese vier Kanäle erreichst du sie. Du wählst den Mix. Ich empfehle den, der zu deinem Ziel passt.
      </p>

      <ul className="b-channels-list">
        {channels.map((c) => (
          <li className="b-channel-item" key={c.key}>
            <div className="b-channel-header">
              <span className="b-channel-icon">{icons[c.key]}</span>
              <div className="b-channel-titles">
                <strong>{c.name}</strong>
                <span className="b-channel-tag">{c.tag}</span>
              </div>
            </div>
            <div className="b-channel-stats">
              {c.stats.map((s) => (
                <span key={s.label}><strong>{s.value}</strong> {s.label}</span>
              ))}
            </div>
            <p>{c.body}</p>
          </li>
        ))}
      </ul>

      <div className="b-bonus-reach">
        <div className="b-beat__eyebrow">+ Zusätzliche Reichweite</div>
        <p>Du bekommst ein <em>Ökosystem</em>. Nicht einen Kanal.</p>
        <div className="b-bonus-cards">
          <div className="b-bonus-card">
            <span className="b-bonus-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z"/><path d="M14 3v5h5"/><path d="M8 13h8M8 17h6"/></svg></span>
            <div><strong>Focus Online</strong><span>50k-300k zusätzliche Aufrufe pro Gastartikel</span></div>
          </div>
          <div className="b-bonus-card">
            <span className="b-bonus-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18"/></svg></span>
            <div><strong>Englischer Newsletter</strong><span>3.000+ Abonnenten weltweit</span></div>
          </div>
          <div className="b-bonus-card">
            <span className="b-bonus-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-11.7 7.7L4 20.5l1.4-4.8A8.4 8.4 0 1 1 21 11.5z"/></svg></span>
            <div><strong>Chinesischer Newsletter</strong><span>via WeChat für Sichtbarkeit in China</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}