function FourSteps() {
  const steps = [
    {
      n: '01', q: 'Womit starten?', title: 'Portfolio-Analyse',
      body: 'Strukturierte Aufnahme von Zustand, Verbräuchen und Anforderungen.',
      result: 'Portfolio-Bild auf einer Seite.',
      icon: 'layout-dashboard',
      detail: {
        intro: 'Wir bringen Struktur in einen heterogenen Bestand — und liefern eine Basis, auf der Entscheidungen getroffen werden können.',
        bullets: [
          'Bestandsaufnahme aller Liegenschaften — Zustand, Baujahr, Verbräuche, Nutzung.',
          'Klassifizierung nach Sanierungsdringlichkeit und CO₂-Hebel.',
          'Auf einer Seite: Portfolio-Bild, das Gemeinderat und Verwaltung verstehen.',
        ],
      },
    },
    {
      n: '02', q: 'Was tun?', title: 'Gebäudekonzept',
      body: 'Maßnahmen geprüft und priorisiert — wirtschaftlich, förderfähig, beschlussreif.',
      result: 'Sanierungsfahrplan mit klarer Reihenfolge.',
      icon: 'compass',
      detail: {
        intro: 'Pro Liegenschaft entwickeln wir Maßnahmenpakete, die wirtschaftlich tragen, förderfähig sind und in den Haushalt passen.',
        bullets: [
          'Sanierungsfahrpläne nach DIN — als belastbare Grundlage für Beschlüsse.',
          'Wirtschaftlichkeitsbetrachtung mit klarer Reihenfolge der Maßnahmen.',
          'Management Summary für Gemeinderat — keine Papierflut, sondern Entscheidungshilfen.',
        ],
      },
    },
    {
      n: '03', q: 'Wie umsetzen?', title: 'Umsetzungsplanung',
      body: 'Ausschreibung, Vergabe, Bauüberwachung — bis zur Inbetriebnahme.',
      result: 'Saniertes Gebäude. Geschlossene Akte.',
      icon: 'hard-hat',
      detail: {
        intro: 'Wir begleiten von der Leistungsbeschreibung bis zur Abnahme — fachlich tief, prozessual sauber, terminlich verlässlich.',
        bullets: [
          'Leistungsverzeichnisse und Ausschreibung nach VOB/UVgO.',
          'Vergabebegleitung, Angebotsprüfung, Vergabeempfehlung.',
          'Bauherrenbegleitung in der Umsetzung — bis zur Inbetriebnahme.',
        ],
      },
    },
    {
      n: '04', q: 'Förderung sichern?', title: 'Fördermittelstrategie',
      body: 'BAFA, KfW, BEW, Landesprogramme — Anträge stellen, Mittel sichern.',
      result: 'Förderbescheid auf Ihrem Konto.',
      icon: 'banknote',
      detail: {
        intro: 'Förderung ist kein Nebenthema — sie entscheidet über Wirtschaftlichkeit. Wir sichern Mittel, statt sie liegen zu lassen.',
        bullets: [
          'Programm-Screening: BAFA, KfW, BEW, Landes- und EU-Programme.',
          'Antragstellung inkl. technischer Nachweise und Wirtschaftlichkeitsberechnung.',
          'Verwendungsnachweis und Begleitung bis zum Auszahlungsbescheid.',
        ],
      },
    },
  ];

  const [active, setActive] = React.useState('01');
  const activeStep = steps.find(s => s.n === active) || steps[0];

  return (
    <section id="methodik" style={{padding: '112px 32px', background: '#F6F6F6'}}>
      <div style={{maxWidth: 1280, margin: '0 auto'}}>
        <div style={{maxWidth: 760, marginBottom: 48}}>
          <div className="ep-eyebrow" style={{marginBottom: 16}}>Vorgehen · vier Schritte</div>
          <h2 style={{
            fontFamily: 'Montserrat', fontWeight: 500, fontSize: 40, lineHeight: 1.2,
            color: '#262626', margin: 0, letterSpacing: '-0.01em',
          }}>
            Vier Fragen, vier Antworten — ein klarer Weg.
          </h2>
          <p style={{fontSize: 16, color: '#4D4D4D', margin: '16px 0 0', lineHeight: 1.55, maxWidth: 640}}>
            Klicken Sie auf einen Schritt für mehr Details zur jeweiligen Leistung.
          </p>
        </div>

        <div style={{position: 'relative'}}>
          {/* connector line */}
          <div style={{position: 'absolute', top: 60, left: '11%', right: '11%', height: 2, background: 'repeating-linear-gradient(90deg, #009947 0 8px, transparent 8px 16px)'}}></div>

          <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, position: 'relative'}}>
            {steps.map(s => {
              const isActive = active === s.n;
              return (
                <button
                  key={s.n}
                  type="button"
                  onClick={() => setActive(s.n)}
                  style={{
                    textAlign: 'left', font: 'inherit', color: 'inherit', cursor: 'pointer',
                    background: '#fff', borderRadius: 16, padding: 28,
                    border: isActive ? '2px solid #009947' : '1px solid #E6E6E6',
                    boxShadow: isActive
                      ? '0 12px 32px rgba(0,153,71,0.14), 0 2px 4px rgba(14,77,42,0.06)'
                      : '0 1px 2px rgba(14,77,42,0.06)',
                    transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
                    position: 'relative',
                    transform: isActive ? 'translateY(-2px)' : 'translateY(0)',
                  }}
                  onMouseOver={e => {
                    if (!isActive) {
                      e.currentTarget.style.borderColor = '#009947';
                      e.currentTarget.style.boxShadow = '0 6px 16px rgba(0,153,71,0.10)';
                    }
                  }}
                  onMouseOut={e => {
                    if (!isActive) {
                      e.currentTarget.style.borderColor = '#E6E6E6';
                      e.currentTarget.style.boxShadow = '0 1px 2px rgba(14,77,42,0.06)';
                    }
                  }}
                >
                  <div style={{display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18}}>
                    <div style={{
                      width: 52, height: 52, borderRadius: 9999,
                      background: isActive ? '#009947' : '#fff',
                      color: isActive ? '#fff' : '#009947',
                      border: isActive ? 'none' : '2px solid #009947',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'Montserrat', fontWeight: 800, fontSize: 18, letterSpacing: '-0.02em',
                      boxShadow: '0 0 0 6px #F6F6F6, 0 0 0 7px #E6F5EC',
                      transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
                    }}>{s.n}</div>
                    <div className="ep-eyebrow" style={{lineHeight: 1.3}}>{s.q}</div>
                  </div>

                  <h3 style={{fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic', fontSize: 22, color: '#262626', margin: '0 0 10px'}}>{s.title}</h3>
                  <p style={{fontSize: 13.5, color: '#4D4D4D', margin: '0 0 16px', lineHeight: 1.55}}>{s.body}</p>
                  <div style={{paddingTop: 14, borderTop: '1px dashed #E6E6E6', display: 'flex', alignItems: 'flex-start', gap: 10}}>
                    <i data-lucide={s.icon} style={{width: 16, height: 16, strokeWidth: 1.75, color: '#009947', flexShrink: 0, marginTop: 2}}></i>
                    <div>
                      <div style={{fontSize: 10, fontWeight: 600, color: '#808080', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4}}>Ergebnis</div>
                      <div style={{fontSize: 13, fontWeight: 600, color: '#262626'}}>{s.result}</div>
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Detail panel */}
        <div key={activeStep.n} style={{
          marginTop: 28,
          background: '#fff', borderRadius: 16,
          border: '1px solid rgba(0,153,71,0.18)',
          boxShadow: '0 12px 32px rgba(14,77,42,0.08)',
          padding: '32px 36px',
          animation: 'epFsFadeIn 240ms cubic-bezier(.2,.8,.2,1)',
        }}>
          <div style={{display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24, alignItems: 'flex-start'}}>
            <div style={{
              width: 56, height: 56, borderRadius: 9999, flexShrink: 0,
              background: '#009947', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <i data-lucide={activeStep.icon} style={{width: 22, height: 22, strokeWidth: 1.75}}></i>
            </div>
            <div>
              <div className="ep-eyebrow" style={{marginBottom: 6, color: '#009947'}}>Schritt {activeStep.n} · {activeStep.title}</div>
              <h3 style={{
                fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic',
                fontSize: 24, color: '#0E4D2A', margin: '0 0 12px', lineHeight: 1.25, letterSpacing: '-0.01em',
              }}>
                {activeStep.detail.intro}
              </h3>
              <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10}}>
                {activeStep.detail.bullets.map((b, i) => (
                  <li key={i} style={{display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14.5, color: '#262626', lineHeight: 1.55}}>
                    <span style={{
                      width: 22, height: 22, borderRadius: 9999, flexShrink: 0,
                      background: '#E6F5EC',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginTop: 2,
                    }}>
                      <i data-lucide="check" style={{width: 12, height: 12, strokeWidth: 2.5, color: '#009947'}}></i>
                    </span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes epFsFadeIn {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}
window.FourSteps = FourSteps;