function PathPicker({ active, onChange }) {
  const paths = [
  {
    id: 'projekt',
    label: 'A',
    kicker: 'Bauamt · Einzelprojekt',
    title: 'Ich habe ein Projekt.',
    valueHeadline: 'Wir liefern Planung, Vergabe und Begleitung bis zur ausgezahlten Förderung.',
    valueBody: 'Sie wissen, welches Gebäude und welche Maßnahme. Wir bringen die Tiefe rein — vom ersten Konzept bis zur Schlussabnahme.',
    bullets: [
    ['target', 'Planung & Vergabe', 'Saubere LVs, fristgerecht ausgeschrieben.'],
    ['hammer', 'Planung & Ausschreibung', 'Saubere LVs, fristgerecht ausgeschrieben.'],
    ['users', 'Entlastung', 'Tiefe genau dort, wo Kapazität fehlt.']],

    icon: 'hard-hat'
  },
  {
    id: 'portfolio',
    label: 'B',
    kicker: 'Klima- & Energiemanagement',
    title: 'Ich brauche Überblick.',
    valueHeadline: 'Wir machen aus Ihrer Gebäude-Excel einen beschlussreifen Plan bis 2040.',
    valueBody: 'Sie haben Bestand und Klimaziel. Wir bewerten, priorisieren und liefern den Umsetzungsplan, den der Gemeinderat versteht und der Haushalt trägt.',
    bullets: [
    ['layout-dashboard', 'Portfolio-Bewertung', 'Bestand + CO₂ + Investitionsbedarf je Gebäude.'],
    ['list-ordered', 'Priorisierung', 'Gereiht nach Wirkung, Förderquote, Wirtschaftlichkeit.'],
    ['euro', 'Förderstrategie', 'BAFA, KfW, Land richtig kombiniert.']],

    icon: 'layout-dashboard'
  }];

  const activePath = paths.find((p) => p.id === active);

  return (
    <section style={{ padding: '0 32px', background: '#fff', position: 'relative', marginTop: 64, zIndex: 5 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          background: '#fff', borderRadius: 20,
          border: '1px solid #E6E6E6',
          boxShadow: '0 20px 48px rgba(14,77,42,0.14), 0 6px 12px rgba(14,77,42,0.06)',
          padding: 32
        }}>
          <div style={{ marginBottom: 20 }}>
            <div className="ep-eyebrow" style={{ marginBottom: 6 }}>Ihr Einstieg</div>
            <h2 style={{ fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic', fontSize: 28, color: '#262626', margin: 0, lineHeight: 1.2, letterSpacing: '-0.01em' }}>
              Zwei Einstiege. Wählen Sie.
            </h2>
          </div>

          {/* Toggle buttons — title only */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginBottom: 28 }}>
            {paths.map((p) => {
              const isActive = active === p.id;
              return (
                <button key={p.id} type="button" onClick={() => onChange(p.id)} style={{
                  textAlign: 'left', padding: '20px 24px', border: '2px solid', borderRadius: 14,
                  borderColor: isActive ? '#009947' : '#E6E6E6',
                  background: isActive ? '#E6F5EC' : '#fff',
                  cursor: 'pointer', font: 'inherit', color: 'inherit',
                  transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
                  display: 'flex', alignItems: 'center', gap: 18
                }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="ep-eyebrow" style={{ marginBottom: 4, color: '#009947' }} dangerouslySetInnerHTML={{ __html: p.kicker }} />
                    <div style={{ fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic', fontSize: 18, color: '#262626', lineHeight: 1.25 }}>
                      {p.title}
                    </div>
                  </div>
                </button>);
            })}
          </div>

          {/* Reveal panel — value prop + CTA */}
          {activePath &&
          <div key={activePath.id} style={{
            background: 'linear-gradient(180deg, #F2F8F1 0%, #E6F5EC 100%)',
            borderRadius: 16, padding: '32px 36px',
            border: '1px solid rgba(0,153,71,0.18)',
            animation: 'epFadeIn 240ms cubic-bezier(.2,.8,.2,1)'
          }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'center' }}>
                <div>
                  <h3 style={{
                  fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic',
                  fontSize: 22, color: '#0E4D2A', margin: '0 0 12px',
                  lineHeight: 1.25, letterSpacing: '-0.01em'
                }}>
                    {activePath.valueHeadline}
                  </h3>
                  <p style={{ fontSize: 15, color: '#262626', margin: '0 0 22px', lineHeight: 1.55, maxWidth: 580 }}>
                    {activePath.valueBody}
                  </p>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {activePath.bullets.map(([icon, label, desc]) =>
                  <li key={label} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                        <span style={{
                      width: 32, height: 32, borderRadius: 9999, flexShrink: 0,
                      background: '#fff', border: '1px solid rgba(0,153,71,0.25)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      color: '#009947', marginTop: 1
                    }}>
                          <i data-lucide={icon} style={{ width: 15, height: 15, strokeWidth: 2 }}></i>
                        </span>
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 14, color: '#0E4D2A', lineHeight: 1.3 }}>
                            {label}
                          </div>
                          <div style={{ fontSize: 13, color: '#4D4D4D', lineHeight: 1.45, marginTop: 2 }}>
                            {desc}
                          </div>
                        </div>
                      </li>
                  )}
                  </ul>
                </div>
                <div style={{
                background: '#fff', borderRadius: 14, padding: '28px 28px',
                border: '1px solid rgba(0,153,71,0.18)',
                boxShadow: '0 12px 32px rgba(14,77,42,0.10)',
                display: 'flex', flexDirection: 'column', gap: 16
              }}>
                  <div>
                    <div className="ep-eyebrow" style={{ marginBottom: 6 }}>Nächster Schritt</div>
                    <div style={{
                    fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic',
                    fontSize: 20, color: '#262626', lineHeight: 1.25, letterSpacing: '-0.01em'
                  }}>30 Minuten Gespräch.
Dann wissen Sie, woran Sie sind.
                  </div>
                    <p style={{ fontSize: 13, color: '#4D4D4D', margin: '8px 0 0', lineHeight: 1.5 }}>
                      Sie schildern den Stand. Wir ordnen ein und schlagen die nächsten zwei Schritte vor — konkret, kostenfrei.
                    </p>
                  </div>
                  <a
                  href="https://bookings.cloud.microsoft/book/BuchungskalenderJonasHofheinz@effizienzpioniere.de/?ismsaljsauthenabled"
                  target="_blank" rel="noopener"
                  className="btn-primary"
                  style={{ justifyContent: 'center', textDecoration: 'none', padding: '14px 20px', fontSize: 14, background: '#D3EE3F', color: '#0E4D2A' }}>
                  
                    <i data-lucide="calendar" style={{ width: 16, height: 16, strokeWidth: 2 }}></i>
                    Expertengespräch buchen
                    <i data-lucide="arrow-right" style={{ width: 16, height: 16, strokeWidth: 2 }}></i>
                  </a>
                  <div style={{ fontSize: 11, color: '#808080', textAlign: 'center', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                    <i data-lucide="clock-3" style={{ width: 12, height: 12, strokeWidth: 1.75 }}></i>
                    30 Min · unverbindlich · direkt mit Jonas Hofheinz
                  </div>
                </div>
              </div>
            </div>
          }
        </div>
      </div>

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