/* Channels — tight 4-up grid. NO asset slots (those live in case studies).
   Order: Newsletter, LinkedIn, YouTube, Podcast (YouTube before Podcast per Philipp).
*/
function Channels() {
  const channels = [
  { id: 'newsletter', icon: 'mail', name: 'Newsletter', tag: 'Stärkster Conversion-Kanal',
    stats: [['~40.000', 'Abonnenten'], ['Sonntags', 'Frequenz'], ['Ø 60%', 'Open Rate']],
    ideal: 'Lead-Generation, Webinar-Anmeldungen und Asset-Downloads.',
    link: { href: 'https://www.autopreneur.de/', label: 'Newsletter ansehen' } },
  { id: 'linkedin', icon: 'linkedin', name: 'LinkedIn', tag: 'Direkter Engagement-Rückkanal',
    stats: [['60.000+', 'Follower'], ['3,37M', 'Impressions / 90T'], ['C-Level', 'in Kommentaren']],
    ideal: 'Größte Reichweite. Du siehst, wer mitdiskutiert, und kannst gezielt nachfassen.',
    link: { href: 'https://www.linkedin.com/in/praasch/', label: 'LinkedIn-Profil ansehen' } },
  { id: 'youtube', icon: 'youtube', name: 'YouTube', tag: 'Bild und Ton, mitten im Video',
    stats: [['9.000+', 'Abonnenten'], ['250.000+', 'Views / Monat'], ['Wöchentlich', 'neue Folgen']],
    ideal: 'Ich stelle dein Angebot persönlich vor. In einem Video, dem die Zuschauer ohnehin folgen.',
    link: { href: 'https://www.youtube.com/@philippraasch', label: 'YouTube-Kanal ansehen' } },
  { id: 'podcast', icon: 'podcast', name: 'Podcast', tag: 'Der intimste Kanal',
    stats: [['~10.000', 'Downloads / Monat'], ['Wöchentlich', 'Frequenz'], ['7.000+', 'Unique Listeners']],
    ideal: 'Hörer sind 15 bis 60 Minuten ungestört dabei. Empfehlungen kommen an.',
    link: { href: 'https://www.autopreneur.de/podcast', label: 'Podcast anhören' } }];


  return (
    <section id="channels" style={{ padding: '120px 0', background: 'var(--bg-page)', borderTop: '1px solid var(--border-default)' }}>
      <div className="container" data-comment-anchor="f14e742c84-div-22-7">
        <div style={{ marginBottom: 64, maxWidth: 880 }}>
          <div className="section-eyebrow" style={{ marginBottom: 24 }}>
            <span className="kicker-line"></span>Vier Kanäle. Ein Ökosystem.
          </div>
          <h2 className="section-title" style={{ fontSize: 'clamp(40px, 5vw, 56px)' }}>
            Die Kanäle, über die deine Entscheider <em style={{ color: 'var(--ap-blue)', fontWeight: 500 }}>mich</em> hören.
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.55, color: 'var(--fg-2)', marginTop: 20 }}>
            90.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>
        </div>

        <div className="channels-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--border-default)', borderRadius: 12, overflow: 'hidden', background: '#fff' }}>
          {channels.map((c, i) =>
          <article key={c.id} style={{
            padding: 32,
            display: 'flex',
            flexDirection: 'column',
            gap: 20,
            borderRight: i < 3 ? '1px solid var(--border-default)' : 0,
            background: '#fff'
          }}>
              <div style={{ color: 'var(--ap-blue)' }}>
                <ChannelIcon name={c.icon} size={28} />
              </div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--fg-1)', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.1 }}>{c.name}</h3>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--ap-blue)', fontWeight: 600, marginTop: 6, letterSpacing: '0.02em' }}>{c.tag}</div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, borderTop: '1px solid var(--border-default)', paddingTop: 16 }}>
                {c.stats.map(([n, l], j) =>
              <div key={j} style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
                    <span style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</span>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', textAlign: 'right' }}>{l}</span>
                  </div>
              )}
              </div>

              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0, marginTop: 'auto', paddingTop: 8 }}>
                {c.ideal}
              </p>

              <a href={c.link.href} target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--ap-blue)', textDecoration: 'none', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6, paddingTop: 12, borderTop: '1px solid var(--border-default)', marginTop: 4 }}>
                {c.link.label} <span style={{ fontSize: 12 }}>↗</span>
              </a>
            </article>
          )}
        </div>

        {/* Bonus reach — secondary footer */}
        <div className="card" style={{ marginTop: 32, padding: '32px 40px', background: '#fff', display: 'grid', gridTemplateColumns: '1.2fr 2fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 10 }}>+ Zusätzliche Reichweite</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--fg-1)', lineHeight: 1.2 }}>
              Du bekommst ein <em style={{ color: 'var(--ap-blue)' }}>Ökosystem</em>. Nicht einen Kanal.
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderLeft: '1px solid var(--border-default)' }}>
            {[
            ['Focus Online', '50k – 150k', 'zusätzliche Aufrufe pro Gastartikel', 'https://www.focus.de/autoren/philipp-raasch_83cd2c64-eece-4eaf-920c-042779482ddd.html'],
            ['Englischer Newsletter', '2.700+', 'Abonnenten weltweit', 'https://autopreneur.substack.com/'],
            ['Chinesischer Newsletter', 'via WeChat', 'für Sichtbarkeit in China', null]].
            map(([t, n, s, href], i) =>
            <a key={i} href={href || undefined} target={href ? '_blank' : undefined} rel={href ? 'noopener noreferrer' : undefined} style={{ padding: '0 24px', borderRight: i < 2 ? '1px solid var(--border-default)' : 0, textDecoration: 'none', color: 'inherit', display: 'block', cursor: href ? 'pointer' : 'default' }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ap-blue)', marginBottom: 6 }}>{t}{href && <span style={{ fontSize: 11, marginLeft: 6, fontWeight: 400 }}>↗</span>}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.02em' }}>{n}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', marginTop: 2 }}>{s}</div>
              </a>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .channels-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .channels-grid > article:nth-child(odd) { border-right: 1px solid var(--border-default) !important; }
          .channels-grid > article:nth-child(even) { border-right: 0 !important; }
          .channels-grid > article:nth-child(n+3) { border-top: 1px solid var(--border-default) !important; }
        }
        @media (max-width: 640px) {
          .channels-grid { grid-template-columns: 1fr !important; }
          .channels-grid > article { border-right: 0 !important; border-bottom: 1px solid var(--border-default); }
          .channels-grid > article:last-child { border-bottom: 0; }
        }
      `}</style>
    </section>);

}

/* Same monoline channel icons as Hero — keeps the system consistent */
function ChannelIcon({ name, size = 22 }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'mail') return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></svg>;
  if (name === 'linkedin') return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M8 10v7" /><circle cx="8" cy="7.2" r="0.9" fill="currentColor" stroke="none" /><path d="M12 17v-4.5c0-1.4 1-2.5 2.4-2.5s2.6 1 2.6 2.5V17" /></svg>;
  if (name === 'podcast') return <svg {...props}><path d="M5 13a7 7 0 0 1 14 0" /><rect x="4" y="13" width="4" height="7" rx="1.5" /><rect x="16" y="13" width="4" height="7" rx="1.5" /></svg>;
  if (name === 'youtube') return <svg {...props}><rect x="2.5" y="5" width="19" height="14" rx="3" /><path d="M10.5 9.5v5l4.5-2.5z" fill="currentColor" stroke="none" /></svg>;
  return null;
}
window.Channels = Channels;