// ProblemSection: a section header + 3 pain-point bullets with bold leads
const ProblemSection = () => {
  const items = [
    { lead: 'Verpasste Anrufe.',
      body: 'Während Sie beim Kunden sind, klingelt das Telefon ins Leere. Jeder verpasste Anruf ist ein potenzieller Auftrag, der zur Konkurrenz geht.' },
    { lead: 'Verwaltung statt Wertschöpfung.',
      body: 'Angebote schreiben, Daten übertragen, E-Mails sortieren — die Hälfte Ihrer Arbeitszeit geht für Aufgaben drauf, die kein Mensch machen müsste.' },
    { lead: 'Fachkräftemangel ohne Ausweg.',
      body: 'Qualifizierte Mitarbeiter für Büro und Verwaltung sind im DACH-Raum kaum zu finden — und wenn, dann nicht zu halten.' },
  ];
  return (
    <section style={{ padding: '96px 24px', background: '#FAFAFA' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <h2 style={{
          font: '700 48px/1.05 Roboto, sans-serif', letterSpacing: '-0.02em',
          color: '#0A0A0A', margin: '0 0 24px', maxWidth: 880,
        }}>
          Die Realität im Mittelstand: Volle Auftragsbücher, leere Schreibtische.
        </h2>
        <p style={{
          font: '400 18px/1.6 Roboto, sans-serif', color: '#525252',
          maxWidth: 720, margin: '0 0 56px',
        }}>
          Unternehmen im DACH-Raum stehen vor einem Paradox: Es gibt mehr Arbeit als je zuvor —
          aber zu wenig Leute, um sie zu erledigen. Die Folgen spüren Sie jeden Tag:
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {items.map((it, i) => (
            <div key={i}>
              <div style={{
                width: 32, height: 4, background: '#FFD500',
                borderRadius: 2, marginBottom: 20,
              }}/>
              <p style={{
                font: '400 16px/1.6 Roboto, sans-serif', color: '#0A0A0A', margin: 0,
              }}>
                <span style={{fontWeight: 700}}>{it.lead}</span>{' '}
                <span style={{color: '#525252'}}>{it.body}</span>
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.ProblemSection = ProblemSection;