function FinalCta() {
  const [name, setName] = React.useState('');
  const [firma, setFirma] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [interesse, setInteresse] = React.useState('Pilot');
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState(null);

  const submitInquiry = async (e) => {
    e.preventDefault();
    if (submitting) return;
    if (!name.trim() || !firma.trim() || !email.trim()) return;
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch('/api/partnership-inquiry', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.trim(), firma: firma.trim(), email: email.trim(), interesse }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setSubmitted(true);
    } catch (err) {
      setError('Etwas ist schiefgegangen. Bitte versuch es nochmal oder schreib mir direkt an hallo@autopreneur.de.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="kontakt" style={{ padding: '120px 0', background: 'var(--fg-1)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      {/* Subtle background gradient blob */}
      <div style={{ position: 'absolute', top: -200, right: -200, width: 600, height: 600, background: 'radial-gradient(circle, rgba(81,128,250,0.35) 0%, transparent 70%)', borderRadius: '50%', pointerEvents: 'none' }}></div>
      <div style={{ position: 'absolute', bottom: -300, left: -100, width: 700, height: 700, background: 'radial-gradient(circle, rgba(232,126,244,0.18) 0%, transparent 70%)', borderRadius: '50%', pointerEvents: 'none' }}></div>

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="section-eyebrow" style={{ marginBottom: 24, color: 'var(--ap-purple-medium)' }}>
              <span className="kicker-line" style={{ background: 'var(--ap-pink)' }}></span>Bereit?
            </div>
            <h2 className="section-title" style={{ fontSize: 64, color: '#fff', lineHeight: 1.05 }}>
              Bereit für Entscheider-Gespräche statt <em style={{ color: 'var(--ap-pink)', fontWeight: 500 }}>Cold Outreach?</em>
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)', marginTop: 24, maxWidth: 580 }}>
              Schreib mir. Egal ob Pilot oder Partnership. Jeder Weg beginnt mit demselben Schritt.
            </p>

            <ol style={{ listStyle: 'none', padding: 0, margin: '40px 0 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                ['01', 'Kurze Anfrage ausfüllen'],
                ['02', 'Fit-Check innerhalb 48 Stunden'],
                ['03', '30-Minuten-Call mit mir'],
              ].map(([n, t]) => (
                <li key={n} style={{ display: 'flex', alignItems: 'center', gap: 16, fontFamily: 'var(--font-sans)', fontSize: 18, color: '#fff' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--ap-pink)', width: 32 }}>{n}</span>
                  <span style={{ width: 32, height: 1, background: 'rgba(255,255,255,0.2)' }}></span>
                  <span>{t}</span>
                </li>
              ))}
            </ol>
          </div>

          {/* Contact mini-form */}
          <div className="card" style={{ background: '#fff', color: 'var(--fg-1)', padding: 36, boxShadow: '0 32px 80px rgba(0,0,0,0.30)' }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ap-blue)' }}>Fit-Check anfragen</div>
            <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 500, color: 'var(--fg-1)', margin: '8px 0 24px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>
              In 2 Minuten ausgefüllt.<br/>In 48 Stunden Antwort.
            </h3>
            {submitted ? (
              <div style={{ padding: '32px 8px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--ap-blue)', marginBottom: 12 }}>Danke — Anfrage ist drin.</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.5 }}>
                  Ich melde mich innerhalb von 48 Stunden mit einer ehrlichen Einschätzung.
                </div>
              </div>
            ) : (
              <form onSubmit={submitInquiry} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <Field label="Dein Name" placeholder="Max Mustermann" value={name} onChange={setName} required disabled={submitting} />
                <Field label="Firma" placeholder="z.B. Acme Software GmbH" value={firma} onChange={setFirma} required disabled={submitting} />
                <Field label="Geschäfts-E-Mail" placeholder="max@firma.com" type="email" value={email} onChange={setEmail} required disabled={submitting} />
                <div>
                  <label style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--fg-3)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 8 }}>Interesse</label>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {[['Pilot', '🚀 Pilot'], ['Partnership', '🤝 Partnership'], ['Story', '🎙 Story'], ['Noch unsicher', 'Noch unsicher']].map(([val, label]) => (
                      <label key={val} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 12px', border: '1px solid var(--border-default)', borderRadius: 999, fontFamily: 'var(--font-sans)', fontSize: 13, cursor: submitting ? 'not-allowed' : 'pointer', color: 'var(--fg-2)', opacity: submitting ? 0.6 : 1 }}>
                        <input type="radio" name="interest" checked={interesse === val} onChange={() => setInteresse(val)} disabled={submitting} style={{ accentColor: 'var(--ap-blue)' }} />
                        {label}
                      </label>
                    ))}
                  </div>
                </div>
                {error && (
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: '#c4344f', background: '#fdecef', padding: '10px 12px', borderRadius: 8, lineHeight: 1.4 }}>
                    {error}
                  </div>
                )}
                <button type="submit" className="btn btn-primary btn-lg" disabled={submitting} style={{ justifyContent: 'center', marginTop: 8, opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer' }}>
                  {submitting ? 'Sende…' : 'Anfrage senden →'}
                </button>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', textAlign: 'center', marginTop: 4, lineHeight: 1.5 }}>
                  Keine Pitch-Decks. Keine Mailing-Liste. Nur eine ehrliche Antwort.<br/>
                  <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>Mit dem Absenden akzeptierst du die <a href="/datenschutz" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>Datenschutzerklärung</a>.</span>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, placeholder, value, onChange, type = 'text', required, disabled }) {
  return (
    <div>
      <label style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--fg-3)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 6 }}>{label}</label>
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        required={required}
        disabled={disabled}
        style={{ width: '100%', padding: '12px 14px', fontFamily: 'var(--font-sans)', fontSize: 15, border: '1px solid var(--border-default)', borderRadius: 8, outline: 'none', background: '#fff', color: 'var(--fg-1)', opacity: disabled ? 0.6 : 1 }}
      />
    </div>
  );
}
window.FinalCta = FinalCta;