function Problems() {
  const items = [
    { icon: '🔑', title: 'Skalierung',
      body: 'Cold Outreach skaliert nicht. Du verbrennst Wochen pro Lead. Mehr Vertriebler bringen mehr Mails, aber nicht mehr Antworten.' },
    { icon: '🤝', title: 'Zugang',
      body: 'C-Level, VPs und Bereichsleiter haben Gatekeeper. Sie öffnen keine Cold Mails. Sie nehmen keine Cold Calls. An sie kommst du nicht über Budget, sondern nur über Vertrauen.' },
    { icon: '⭐', title: 'Sichtbarkeit',
      body: 'Du kannst jeden Tag posten. LinkedIn, Fachmedien, egal wo. Deine Zielgruppe scrollt weiter. Bis dich Entscheider hören, vergehen Jahre.' },
    { icon: '💬', title: 'Storytelling',
      body: 'Erklärungsbedürftige Angebote brauchen einen Übersetzer. Du kennst dein Produkt in- und auswendig. Genau deshalb findest du die Worte nicht. Du brauchst einen Blick von außen.' },
  ];
  return (
    <section style={{ padding: '120px 0', background: '#0b0d10', color: '#fff' }}>
      <div className="container">
        <div style={{ maxWidth: 880, marginBottom: 64 }}>
          <div className="section-eyebrow" style={{ marginBottom: 24, color: 'var(--ap-purple-medium)' }}>
            <span className="kicker-line" style={{ background: 'var(--ap-pink)' }}></span>Das Problem
          </div>
          <h2 className="section-title" style={{ fontSize: 56, color: '#fff' }}>
            Reichweite allein bringt dich nicht zum Entscheider.
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 20, lineHeight: 1.5, color: 'rgba(255,255,255,0.74)', marginTop: 20, maxWidth: 720 }}>
            Du hast eine Botschaft. Du kennst deine Zielgruppe. Du hast Budget. Trotzdem kommst du nicht durch.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12, overflow: 'hidden' }}>
          {items.map((p, i) => (
            <div key={i} style={{ padding: '32px 28px', borderRight: i < 3 ? '1px solid rgba(255,255,255,0.1)' : 0, background: 'rgba(255,255,255,0.02)' }}>
              <div style={{ fontSize: 32, marginBottom: 16 }}>{p.icon}</div>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 24, fontWeight: 500, color: '#fff', margin: '0 0 12px' }}>{p.title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', margin: 0 }}>{p.body}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56, textAlign: 'center' }}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: '#fff', maxWidth: 760, margin: '0 auto', lineHeight: 1.45 }}>
            Genau deshalb baue ich Vertrauen, Zugang und Story <span style={{ color: 'var(--ap-pink)' }}>über vier Kanäle</span>.
          </p>
          <a href="#channels" style={{ display: 'inline-block', marginTop: 24, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--ap-pink)', textDecoration: 'none', fontWeight: 500, borderBottom: '1px solid var(--ap-pink)' }}>
            Die Kanäle ansehen
          </a>
        </div>
      </div>
    </section>
  );
}
window.Problems = Problems;