function FinalCTA() {
  const [form, setForm] = React.useState({name: '', funktion: '', kommune: '', email: '', size: ''});
  const update = (k) => (e) => setForm(f => ({...f, [k]: e.target.value}));



  return (
    <section id="kontakt" style={{
      padding: '120px 32px', position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(160deg, #009947 0%, #0E4D2A 100%)', color: '#fff',
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0, opacity: 0.18,
        backgroundImage: 'linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse at 30% 60%, #000 30%, transparent 75%)',
      }}></div>
      <div style={{position: 'relative', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'flex-start'}}>
        <div>
          <div className="ep-eyebrow" style={{color: '#D3EE3F', marginBottom: 24}}>Nächster Schritt</div>
          <h2 style={{
            fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic',
            fontSize: 48, lineHeight: 1.1, color: '#fff', margin: '0 0 20px',
            letterSpacing: '-0.02em',
          }}>
            Eine Stunde Gespräch. Eine erste Einschätzung Ihres Gebäudebestands.
          </h2>
          <p style={{fontSize: 18, color: 'rgba(255,255,255,0.85)', margin: '0 0 32px', maxWidth: 560, lineHeight: 1.5}}>
            Sagen Sie uns, wo Sie stehen — wir sagen Ihnen, was als Nächstes sinnvoll ist.
          </p>
          <ul style={{listStyle: 'none', padding: 0, margin: '0 0 36px', display: 'flex', flexDirection: 'column', gap: 12}}>
            {[
              'Schnellbewertung des Bestands',
              'Passende Förderprogramme',
              'Nächste Schritte',
            ].map(t => (
              <li key={t} style={{display: 'flex', alignItems: 'center', gap: 12, fontSize: 15, color: 'rgba(255,255,255,0.95)'}}>
                <span style={{width: 22, height: 22, borderRadius: 9999, background: 'rgba(211,238,63,0.18)', border: '1px solid rgba(211,238,63,0.4)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0}}>
                  <i data-lucide="check" style={{width: 12, height: 12, strokeWidth: 2.5, color: '#D3EE3F'}}></i>
                </span>
                {t}
              </li>
            ))}
          </ul>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 28, padding: '24px 28px',
            background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)',
            borderRadius: 20, backdropFilter: 'blur(8px)', maxWidth: 560,
          }}>
            <div style={{
              width: 160, height: 200, borderRadius: 16, overflow: 'hidden',
              flexShrink: 0, border: '2px solid rgba(211,238,63,0.35)',
              boxShadow: '0 20px 40px rgba(0,0,0,0.25)',
            }}>
              <img
                src="assets/jonas-hofheinz.jpg"
                alt="Jonas Hofheinz"
                style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  objectPosition: 'center 38%', transform: 'scale(1.35)',
                  transformOrigin: 'center 45%', display: 'block',
                }}
              />
            </div>
            <div style={{minWidth: 0}}>
              <div style={{fontFamily: 'Montserrat', fontWeight: 700, fontSize: 20, color: '#fff', lineHeight: 1.2}}>
                Jonas Hofheinz
              </div>
              <div style={{fontSize: 13, color: 'rgba(255,255,255,0.75)', marginTop: 4, lineHeight: 1.4}}>
                Gründer &amp; Energieberater Kommunen
              </div>
              <div style={{display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14, fontSize: 13, color: 'rgba(255,255,255,0.95)'}}>
                <a href="tel:+4971128410111" style={{display: 'inline-flex', alignItems: 'center', gap: 8, color: 'inherit', textDecoration: 'none'}}>
                  <i data-lucide="phone" style={{width: 14, height: 14, strokeWidth: 1.75}}></i>
                  0711 28410111
                </a>
                <a href="mailto:nwg@effizienzpioniere.de" style={{display: 'inline-flex', alignItems: 'center', gap: 8, color: 'inherit', textDecoration: 'none'}}>
                  <i data-lucide="mail" style={{width: 14, height: 14, strokeWidth: 1.75}}></i>
                  nwg@effizienzpioniere.de
                </a>
              </div>
            </div>
          </div>
        </div>

        <div style={{
          background: '#fff', color: '#262626', borderRadius: 20, padding: 32,
          boxShadow: '0 40px 80px rgba(14,77,42,0.32)',
        }}>
          <div className="ep-eyebrow" style={{marginBottom: 8}}>Ersteinschätzung anfragen</div>
          <h3 style={{fontFamily: 'Montserrat', fontWeight: 700, fontStyle: 'italic', fontSize: 24, color: '#262626', margin: '0 0 24px', lineHeight: 1.2}}>
            Wir melden uns innerhalb von 2 Werktagen.
          </h3>
          <form method="POST" action="https://usebasin.com/f/2c3b9d3c0bd7" style={{display: 'flex', flexDirection: 'column', gap: 14}}>
            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14}}>
              <Field label="Name" name="name" placeholder="Vor- und Nachname" value={form.name} onChange={update('name')} required />
              <Field label="Funktion" name="funktion" placeholder="z. B. Bauamtsleiter" value={form.funktion} onChange={update('funktion')} />
            </div>
            <Field label="Kommune" name="kommune" placeholder="Stadt oder Gemeinde" value={form.kommune} onChange={update('kommune')} required />
            <Field label="E-Mail" name="email" type="email" placeholder="name@kommune.de" value={form.email} onChange={update('email')} required />
            <div>
              <label style={lblStyle}>Anzahl Liegenschaften</label>
              <div style={{display: 'flex', gap: 6, marginTop: 6}}>
                {['1–5', '6–15', '16–50', '50+'].map(o => {
                  const active = form.size === o;
                  return (
                    <label key={o} style={{flex: 1}}>
                      <input type="radio" name="size" value={o} checked={form.size === o} onChange={update('size')} style={{display: 'none'}} />
                      <span style={{
                        display: 'block', padding: '10px 8px', borderRadius: 9999,
                        border: '1.5px solid', borderColor: active ? '#009947' : '#CCCCCC',
                        background: active ? '#E6F5EC' : '#fff', fontFamily: 'Montserrat',
                        fontWeight: 600, fontSize: 13, color: active ? '#0E4D2A' : '#4D4D4D', cursor: 'pointer',
                        textAlign: 'center', transition: 'all 120ms cubic-bezier(.2,.8,.2,1)',
                      }}
                        onMouseOver={e => {if (!active) {e.currentTarget.style.background = '#E6F5EC'; e.currentTarget.style.borderColor = '#009947'; e.currentTarget.style.color = '#0E4D2A';}}}
                        onMouseOut={e => {if (!active) {e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = '#CCCCCC'; e.currentTarget.style.color = '#4D4D4D';}}}
                      >
                        {o}
                      </span>
                    </label>
                  );
                })}
              </div>
            </div>
            <button type="submit" className="btn-primary" style={{justifyContent: 'center', padding: '16px 24px', fontSize: 15, marginTop: 8}}>
              Kostenlose Ersteinschätzung anfragen
              <i data-lucide="arrow-right" style={{width: 18, height: 18, strokeWidth: 2}}></i>
            </button>
            <a
              href="https://bookings.cloud.microsoft/book/BuchungskalenderJonasHofheinz@effizienzpioniere.de/?ismsaljsauthenabled"
              target="_blank" rel="noopener"
              className="btn-secondary"
              style={{justifyContent: 'center', padding: '12px 22px', textDecoration: 'none'}}
            >
              <i data-lucide="calendar" style={{width: 16, height: 16, strokeWidth: 1.75}}></i>
              Erstgespräch direkt vereinbaren
            </a>
            <div style={{fontSize: 11, color: '#808080', textAlign: 'center', marginTop: 4}}>
              Wir gehen sorgfältig mit Ihren Daten um. Keine Weitergabe an Dritte.
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

const lblStyle = {fontSize: 11, fontWeight: 600, color: '#262626', textTransform: 'uppercase', letterSpacing: '0.06em'};

function Field({label, placeholder, type = 'text', value, onChange, required}) {
  return (
    <div>
      <label style={lblStyle}>{label}{required && <span style={{color: '#009947', marginLeft: 3}}>*</span>}</label>
      <input type={type} placeholder={placeholder} value={value} onChange={onChange} required={required} style={{
        width: '100%', marginTop: 6, padding: '12px 14px', borderRadius: 8,
        border: '1.5px solid #CCCCCC', background: '#fff', fontFamily: 'Montserrat',
        fontSize: 14, color: '#262626', outline: 'none',
        transition: 'border-color 120ms ease, box-shadow 120ms ease',
      }}
        onFocus={e => {e.target.style.borderColor = '#009947'; e.target.style.boxShadow = '0 0 0 4px rgba(0,153,71,0.12)';}}
        onBlur={e => {e.target.style.borderColor = '#CCCCCC'; e.target.style.boxShadow = 'none';}}
      />
    </div>
  );
}

window.FinalCTA = FinalCTA;