function Problem() {
  const items = [
  { icon: 'help-circle', t: 'Kein Überblick über den Bestand' },
  { icon: 'list-todo', t: 'Unklare Priorisierung der Maßnahmen' },
  { icon: 'file-search', t: 'Förderungen schwer greifbar' },
  { icon: 'pause-circle', t: 'Projekte kommen nicht ins Ziel' }];

  return (
    <section id="problem" style={{ padding: '112px 32px', background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <div className="ep-eyebrow" style={{ marginBottom: 16 }}>Die Lage</div>
          <h2 style={{
            fontFamily: 'Montserrat', fontWeight: 500, fontSize: 40, lineHeight: 1.2,
            color: '#262626', margin: 0, letterSpacing: '-0.01em'
          }}>
            Viele Kommunen wissen, dass saniert werden muss. Woran es scheitert, ist selten der Wille.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {items.map((i) =>
          <div key={i.t} style={{ padding: '28px 24px', borderRadius: 12, border: '1px solid #E6E6E6', background: '#fff' }}>
              <div style={{
              width: 44, height: 44, borderRadius: 10, background: '#F6F6F6',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18, color: '#136B3C'
            }}>
                <i data-lucide={i.icon} style={{ width: 22, height: 22, strokeWidth: 1.75 }}></i>
              </div>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 15, color: '#262626', lineHeight: 1.3 }}>
                {i.t}
              </div>
            </div>
          )}
        </div>

        <div style={{
          marginTop: 48, padding: '28px 32px',
          borderRadius: 12, background: 'linear-gradient(135deg, #F6F6F6 0%, #E6F5EC 100%)',
          border: '1px solid #E6E6E6',
          display: 'flex', alignItems: 'center', gap: 24, justifyContent: 'space-between'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 9999, background: '#EA5115',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0
            }}>
              <i data-lucide="alert-triangle" style={{ width: 22, height: 22, strokeWidth: 1.75 }}></i>
            </div>
            <div style={{ fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic', fontSize: 22, lineHeight: 1.2, color: "rgb(228, 85, 40)" }}>
              Das Ergebnis: Sanierungsstau wächst, Fördermittel verfallen.
            </div>
          </div>
          <a href="#methodik" style={{
            fontFamily: 'Montserrat', fontWeight: 600, fontSize: 13,
            color: '#0E4D2A', textDecoration: 'none', display: 'inline-flex',
            alignItems: 'center', gap: 8, whiteSpace: 'nowrap'
          }}>
            So lösen wir das
            <i data-lucide="arrow-right" style={{ width: 14, height: 14, strokeWidth: 2 }}></i>
          </a>
        </div>
      </div>
    </section>);

}
window.Problem = Problem;