function SubscribeForm({ source = 'lp_hero', autoFocus = false, submitLabel = 'Kostenlos abonnieren' }) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | loading | success | error
  const [msg, setMsg] = React.useState('');

  async function onSubmit(e) {
    e.preventDefault();
    if (status === 'loading') return;
    const trimmed = email.trim();
    if (!trimmed || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
      setStatus('error');
      setMsg('Bitte eine gültige E-Mail-Adresse eingeben.');
      return;
    }
    setStatus('loading');
    setMsg('');
    let utm = {};
    try { utm = JSON.parse(sessionStorage.getItem('utm') || '{}'); } catch (_) {}
    const referrer = sessionStorage.getItem('utm_referrer') || '';
    try {
      const res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: trimmed, source, utm, referrer }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setStatus('error');
        setMsg(data.error || 'Anmeldung fehlgeschlagen. Bitte später nochmal versuchen.');
        return;
      }
      setStatus('success');
      setMsg('Danke! Weiterleitung…');
      setEmail('');
      const variant = source.endsWith('_b') ? 'b' : 'a';
      if (typeof window.va === 'function') {
        window.va('event', { name: 'subscribe_success', source, ...utm });
      }
      if (window.umami) {
        try { window.umami.track('subscribe_success', { variant, source }); } catch (_) {}
      }
      // Kurzer Delay, damit der Umami-Beacon vor der Navigation rausgeht.
      // Danke-Seite lebt auf der Newsletter-Domain (Beehiiv-Double-Opt-in identisch).
      setTimeout(function () { window.location.href = 'https://newsletter.autopreneur.de/fast-geschafft'; }, 150);
    } catch (err) {
      setStatus('error');
      setMsg('Netzwerkfehler. Bitte später nochmal versuchen.');
    }
  }

  return (
    <div style={{ width: '100%', maxWidth: 540 }}>
      <form className="subscribe-form" onSubmit={onSubmit} noValidate>
        <input
          type="email"
          name="email"
          placeholder="name@unternehmen.de"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          autoFocus={autoFocus}
          aria-label="E-Mail-Adresse"
          disabled={status === 'loading'}
        />
        <button type="submit" className="btn btn-primary btn-lg" disabled={status === 'loading'}>
          {status === 'loading' ? 'Sende…' : submitLabel}
        </button>
      </form>
      {msg && (
        <div className={`subscribe-form-msg ${status === 'success' ? 'success' : status === 'error' ? 'error' : ''}`}>
          {msg}
        </div>
      )}
    </div>
  );
}
window.SubscribeForm = SubscribeForm;