function BFaqAsk() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | error
  const [form, setForm] = React.useState({ name: '', firma: '', email: '', interesse: '', ziel: '', sonstige: '' });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  async function submit(e) {
    e.preventDefault();
    if (!form.name.trim() || !form.firma.trim() || !form.email.trim()) { setStatus('error'); return; }
    setStatus('sending');
    try {
      const res = await fetch('/api/partnership-inquiry', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, source: 'inline_ask_b' }),
      });
      if (!res.ok) throw new Error('bad status');
      window.trackEvent && window.trackEvent('inquiry_submit', { source: 'inline_ask_b', variant: 'b', interesse: form.interesse, ziel: form.ziel });
      if (window.umami) { try { window.umami.track('inquiry_submit', { source: 'inline_ask_b', variant: 'b', interesse: form.interesse, ziel: form.ziel }); } catch (_) {} }
      setStatus('ok');
    } catch (_) { setStatus('error'); }
  }

  return (
    <section className="b-beat" id="b-faqask">
      {/* FAQ */}
      <h2>
        Alles, was Partner mich <em>vor</em> dem Call fragen
      </h2>

      <details className="faq" open>
        <summary>Wie wählst du die Kanäle für meine Kampagne aus?</summary>
        <div>
          <p>Nach deinem Ziel.</p>
          <ul>
            <li><strong>Newsletter</strong> wirkt am stärksten für Lead-Gen, Anmeldungen und Tracking-basierte Conversions.</li>
            <li><strong>Podcast und YouTube</strong> bauen Vertrauen über Zeit.</li>
            <li><strong>LinkedIn</strong> liefert die schnellste Awareness-Welle.</li>
          </ul>
          <p>Im Call empfehle ich die Kombination, die zu deinem Ziel passt. In einer Partnership konfigurieren wir den Multi-Channel-Mix gemeinsam.</p>
        </div>
      </details>

      <details className="faq">
        <summary>Wie misst du Erfolg?</summary>
        <div>
          <p>Hängt von deinem Format ab. Für Pilots ist das ein Report nach der Kampagne, für Partnerschaften kommen monatliche Reviews dazu.</p>
          <ul>
            <li><strong>Awareness:</strong> Reichweite, Impressions, Engagement, qualitatives Feedback</li>
            <li><strong>Lead-Gen:</strong> Klicks, Anmeldungen, generierte Leads, Conversions über deinen Tracking-Code</li>
            <li><strong>Thought-Leadership:</strong> Distribution-Reichweite, Story-Performance-Report 2 Wochen nach Launch</li>
            <li><strong>Partnership:</strong> Plus monatliche Reviews mit kumulierten Metriken, qualifizierte Anfragen pro Monat</li>
          </ul>
        </div>
      </details>

      <details className="faq">
        <summary>Was unterscheidet dich von klassischen Automotive-Medien?</summary>
        <div>
          <p>Klassische Medien verkaufen <strong>Werbefläche</strong>. Fünf bis sechs Sponsoren pro Ausgabe, du lieferst den Content, das Medium liefert die Impressions.</p>
          <p>Bei mir bist du die <strong>einzige Stimme</strong> der Ausgabe. Wir entwickeln gemeinsam deine Story. Ich produziere sie über Newsletter, Podcast, YouTube und LinkedIn. Meine Audience nimmt sie mit, weil sie mir vertraut.</p>
          <p>Das sind zwei verschiedene Produkte. Ein CPM-Vergleich ist Äpfel mit Birnen.</p>
        </div>
      </details>

      <details className="faq">
        <summary>Kann ich den Content vorher prüfen und freigeben?</summary>
        <div>
          <p>Ja. Ich liefere einen Entwurf, du gibst Feedback, 2 Revisions-Schleifen sind drin, dann gibst du das finale Go. Ich behalte mir das Recht vor, Content abzulehnen, der nicht zu meiner Brand passt. Das schützt deine Investition und meine Glaubwürdigkeit.</p>
        </div>
      </details>

      <details className="faq">
        <summary>Warum sind nur 3 Partnerschaften gleichzeitig möglich?</summary>
        <div>
          <p>Weil echte Partnerschaft Aufmerksamkeit braucht. Mehr als 3 Partner parallel heißt weniger Tiefe pro Partner. Mache ich nicht. Außerdem bekommst du Wettbewerbsschutz. Du nennst mir 3 Wettbewerber, mit denen ich während deiner Laufzeit nicht arbeite.</p>
        </div>
      </details>

      <details className="faq">
        <summary>Funktioniert das auch für kleinere Unternehmen oder Start-ups?</summary>
        <div>
          <p>Ja, wenn dein Angebot zur Branche passt. Der Pilot ab 2.500 € ist genau dafür gedacht. Eine Kampagne, ein Ziel, ein Report. Viele meiner stärksten Cases waren für kleine Anbieter mit echter Innovation.</p>
        </div>
      </details>

      <details className="faq">
        <summary>Wie schnell kann meine Kampagne live gehen?</summary>
        <div>
          <p>Von Anfrage bis Launch typisch 30 Tage. Bei Event- oder Launch-Bezug früh anfragen, dann reservieren wir den Slot. Story-Standalones brauchen 4 bis 6 Wochen Produktion. Partnerships starten zum nächsten Monatsanfang nach Vertragsunterzeichnung.</p>
        </div>
      </details>

      <details className="faq">
        <summary>Arbeitest du mit Wettbewerbern?</summary>
        <div>
          <p>Bei Partnerschaften nicht. Du nennst mir 3 Unternehmen, mit denen ich während deiner Laufzeit nicht arbeite. Bei Pilots entscheide ich case-by-case im Fit-Check.</p>
        </div>
      </details>

      <details className="faq">
        <summary>Was, wenn mein Angebot nicht zur Transformation passt?</summary>
        <div>
          <p>Sage ich dir ehrlich im Fit-Check. Meine Community folgt mir wegen der Themen E-Mobilität, Software, Autonomes Fahren und Digitalisierung. Wenn dein Angebot daneben liegt, wird die Kampagne nicht funktionieren. Schützt deine Investition und meine Glaubwürdigkeit.</p>
        </div>
      </details>

      {/* Inline Ask Form */}
      <h2 id="b-ask" className="b-ask-heading">Fit-Check anfragen</h2>
      {status === 'ok' ? (
        <p>Danke. Anfrage ist drin. Ich melde mich innerhalb von 48 Stunden mit einer ehrlichen Einschätzung.</p>
      ) : (
        <form className="b-ask" onSubmit={submit}>
          <label className="b-field">
            <span>Dein Name</span>
            <input type="text" placeholder="Max Mustermann" value={form.name} onChange={set('name')} required />
          </label>
          <label className="b-field">
            <span>Firma</span>
            <input type="text" placeholder="z.B. Acme Software GmbH" value={form.firma} onChange={set('firma')} required />
          </label>
          <label className="b-field">
            <span>Geschäfts-E-Mail</span>
            <input type="email" placeholder="max@firma.com" value={form.email} onChange={set('email')} required />
          </label>
          <label className="b-field">
            <span>Interesse</span>
            <select value={form.interesse} onChange={set('interesse')}>
              <option value="">Ich interessiere mich für …</option>
              <option value="Pilot">Pilot</option>
              <option value="Partnership">Partnership</option>
              <option value="Story">Story</option>
              <option value="Noch unsicher">Noch unsicher</option>
            </select>
          </label>
          <label className="b-field">
            <span>Dein Ziel</span>
            <select value={form.ziel} onChange={set('ziel')}>
              <option value="">Was willst du erreichen?</option>
              <option value="Lead-Generierung">Lead-Generierung</option>
              <option value="Brand-Awareness">Brand-Awareness</option>
              <option value="Produkt- oder Event-Launch">Produkt- oder Event-Launch</option>
              <option value="Thought-Leadership">Thought-Leadership</option>
              <option value="Noch unsicher">Noch unsicher</option>
            </select>
          </label>
          <label className="b-field">
            <span>Sonstige Anmerkungen (optional)</span>
            <textarea value={form.sonstige} onChange={set('sonstige')} />
          </label>
          <button type="submit" disabled={status === 'sending'}>
            {status === 'sending' ? 'Sende …' : 'Anfrage senden →'}
          </button>
          <p className="b-ask-note">Innerhalb 48 Stunden bekommst du eine ehrliche Einschätzung. Kein Verkaufsgespräch.</p>
          {status === 'error' && <p className="b-ask-error">Bitte Name, Firma und E-Mail ausfüllen.</p>}
          <p className="b-consent">Mit dem Absenden akzeptierst du die <a href="https://web.autopreneur.de/datenschutz" target="_blank" rel="noopener noreferrer">Datenschutzerklärung</a>.</p>
        </form>
      )}
    </section>
  );
}
window.BFaqAsk = BFaqAsk;