const USE_CASES = [
  { id: 'brand',   icon: '📢', label: 'Brand bekannt machen',           output: 'Reichweite + Bekanntheit bei Entscheidern', description: 'Die Branche soll uns kennen. Als Firma oder als Experten für ein Thema.',                                          accent: 'var(--ap-blue)' },
  { id: 'product', icon: '📦', label: 'Produkt oder Service vermarkten', output: 'Sales-Leads + Pipeline-Aufbau',            description: 'Eure Software, euren Service oder eure Beratung vor OEM-Entscheider. Wenn das Angebot erklärungsbedürftig ist.',   accent: 'var(--ap-indigo)' },
  { id: 'event',   icon: '🎯', label: 'Event oder Webinar bewerben',    output: 'Webinar- oder Event-Anmeldungen',           description: 'Termin steht, wir brauchen Anmeldungen aus der Zielgruppe.',                                                       accent: 'var(--ap-green)' },
  { id: 'asset',   icon: '📊', label: 'Studie oder Whitepaper promoten', output: 'Downloads + qualifizierte Follow-ups',      description: 'Eure Forschung oder Insights zu einem Thema vor Entscheider bringen.',                                             accent: 'var(--ap-teal)' },
  { id: 'expert',  icon: '🎙', label: 'Experten positionieren',          output: 'Glaubwürdigkeit + eigene Branchen-Stimme',  description: 'Einen Experten aus eurem Team als Branchen-Stimme zu einem Thema aufbauen.',                                       accent: 'var(--ap-orange)' },
];

const MODES = [
  { id: 'test',        icon: '🧪', label: 'Erst mal testen, ob das wirkt',        subline: 'Eine Kampagne, klares Setup',  description: 'Eine fokussierte Kampagne. Du siehst Performance, bevor du größer denkst.' },
  { id: 'partnership', icon: '🤝', label: 'Mehrere Kampagnen, längerfristig',    subline: '3 bis 6 Monate',                description: 'Mehrere Kampagnen über mehrere Monate, abgestimmt aufeinander.' },
  { id: 'story',       icon: '🎙', label: 'Eine ausführliche Geschichte erzählen', subline: 'Premium-Format, alle Kanäle',  description: 'Eine Geschichte mit eurem Experten oder über euer Thema. Volle Bühne, internationale Reichweite.' },
];

const USE_CASE_LABEL = (id) => (USE_CASES.find(u => u.id === id) || {}).label || id;
const MODE_LABEL = (id) => (MODES.find(m => m.id === id) || {}).label || id;

const TRUST = {
  brand: 'Ich war zehn Jahre bei Mercedes. Ich kenne beide Seiten, OEMs und Dienstleister. Bei Brand-Awareness heißt das: ich übersetze, was ihr macht, in die Sprache eurer Zielgruppe. Nicht "mehr Banner schalten". Sondern eure Story so erzählen, dass sie ankommt.',
  product: 'Eure Software, euer Service, eure Beratung ist erklärungsbedürftig. Banner und Cold-Outreach landen im Auge der Zielgruppe nicht durch. Ich entwickle mit euch die Story, die in den Sekunden ankommt, die ein OEM-Entscheider sich nimmt.',
  event: 'Eure Anmelde-Zielgruppe füllt sich nicht durch generische Banner. Ich kenne die Termine, die intern für Auto-Entscheider relevant sind, und positioniere euer Event in genau diesem Kontext.',
  asset: 'Eure Studien und Reports sind oft sehr gut. Außerhalb eurer Bubble finden sie wenig Reichweite. Da komme ich ins Spiel. Ich erkläre euer Asset in der Sprache der Käufer und verlinke direkt zu eurer Download-Page.',
  expert: 'Story ist kein Werbeformat. Ich entwickle gemeinsam mit deinem Experten eine Editorial-Story, die über euer Produkt hinausgeht. Branchen-Insight statt Pitch. Das funktioniert nur, weil meine Audience mir glaubt, dass ich nicht jeden auf die Bühne hole.',
};

const ACCESS = {
  brand: 'Cold Outreach skaliert nicht in dieser Zielgruppe. Über meine Kanäle seid ihr in einem Schritt vor C-Level und VPs, für die euer Sales-Team Monate braucht.',
  product: 'Eure Buying-Center sind komplex. Viele Stakeholder, lange Sales-Zyklen. Über meine Kanäle landet ihr in einem Schritt vor genau den C-Level- und VP-Personas, die euer Sales-Team in Monaten nicht öffnet.',
  event: 'Über Newsletter (Conversion-Motor mit 200-Klick-Garantie) generieren wir die Anmeldungen. Über Pod und YT bauen wir Trust ins Event. Über LinkedIn macht den Awareness-Puls.',
  asset: 'Mein Newsletter ist der schärfste Conversion-Kanal für genau diesen Use-Case. ~40.000 Entscheider, Ø 60% Open Rate, direkter Klick zur Asset-Page.',
  expert: 'Dein CEO oder Experte landet in den Inboxes und Ohren von Leuten, die ihn nie über LinkedIn-Cold-Reach kontaktieren würden. Multi-Channel-Spread über Newsletter, Podcast, YouTube und optional Focus Online.',
};

const CASES = {
  brand:   { name: 'Exxeta',             kpi: '108.439 Impressions auf einem viralen Post · 250 Webinar-Anmeldungen', href: '#cases' },
  product: { name: 'Cognizant Mobility', kpi: '65.970 Impressions · 250 Kommentare · 60 Leads',                       href: '#cases' },
  event:   { name: 'Exxeta-Webinar',     kpi: '250 Webinar-Anmeldungen aus einer Kampagne',                            href: '#cases' },
  asset:   { name: 'Thoughtworks SDV',   kpi: '1.203 Klicks zur Studie · ~140.000 Impressions · 1 OEM-Follow-up',     href: '#cases' },
  expert:  { name: 'Berylls 116',        kpi: 'Full Story über Newsletter + YT + Pod + LinkedIn',                      href: '#cases' },
};

const RECOMMENDATIONS = {
  'brand_test': {
    label: 'Pilot · Awareness',
    radio: 'Pilot',
    trust: TRUST.brand, access: ACCESS.brand,
    mechanics: 'Eine Kampagne, ein Kanal passend zum Ziel. Newsletter für Reichweite mit hoher Conversion, LinkedIn für Sichtbarkeit, oder Podcast und YouTube für tieferes Vertrauen. Performance-Report nach der Kampagne.',
    bullets: ['Ein Hauptkanal nach Wahl', 'Volle redaktionelle Begleitung', 'Performance-Report mit KPIs', 'Reichweite zu rund 40.000 bis 90.000 Entscheidern'],
    pricing: { type: 'pilot', extra: null },
    caseRef: CASES.brand,
  },
  'brand_partnership': {
    label: 'Längerfristig · Mehrere Kampagnen über mehrere Kanäle',
    radio: 'Partnership',
    trust: TRUST.brand, access: ACCESS.brand,
    mechanics: 'Drei oder sechs Monate, mehrere Kampagnen über Newsletter, LinkedIn, Podcast und YouTube. Eure Marke landet 8 bis 12 Mal bei eurer Zielgruppe in 90 Tagen.',
    bullets: ['Monatliche Kampagnen über mehrere Kanäle', 'Redaktionelle Begleitung pro Kampagne', 'Quartals-Review mit Strategie-Anpassung', 'Konsistente Präsenz statt Einzelaktion'],
    pricing: { type: 'longterm', extra: null },
    caseRef: CASES.brand,
  },
  'brand_story': {
    label: 'Brand-Story als Anker',
    radio: 'Story',
    trust: TRUST.brand, access: ACCESS.brand,
    mechanics: 'Wenn eure Marke eine Geschichte zu erzählen hat (Gründung, großer Pivot, neue Strategie): eine ausführliche Geschichte über Newsletter, Podcast und YouTube. Optional zusätzlich auf Focus Online sowie in unseren englisch- und chinesischsprachigen Newslettern.',
    bullets: ['Ausführliches Geschichten-Format mit redaktioneller Tiefe', 'Über Newsletter, Podcast und YouTube', 'Optional internationale Reichweite (Focus Online, EN, CN)', 'Freigabe vor Veröffentlichung'],
    pricing: { type: 'story', extra: null },
    caseRef: CASES.brand,
  },

  'product_test': {
    label: 'Pilot · Story-Touch',
    radio: 'Pilot',
    trust: TRUST.product, access: ACCESS.product,
    mechanics: 'Eine Kampagne mit Geschichten-Element. Newsletter-Feature erklärt eure Software oder euren Service in einer kurzen Mini-Story von drei Absätzen. Ergänzt durch LinkedIn-Post mit Klick-CTA. Performance auf Klick- und Engagement-Ebene messbar.',
    bullets: ['Geschichten-Format für komplexes Angebot', 'Newsletter und LinkedIn als Begleitung', 'Performance auf Klick-Ebene', 'Setup mit minimalem Aufwand für euch'],
    pricing: { type: 'pilot', extra: null },
    caseRef: CASES.product,
  },
  'product_partnership': {
    label: 'Längerfristig · Newsletter + LinkedIn + Podcast/YouTube',
    radio: 'Partnership',
    trust: TRUST.product, access: ACCESS.product,
    mechanics: 'Mehrere Kampagnen über 3 bis 6 Monate. Newsletter für Lead-Gen, LinkedIn für Awareness und Engagement, Podcast und YouTube für tiefere Erklärung. Bei Erfolg Übergang in 6-Monats-Mix.',
    bullets: ['Newsletter-Features mit Klick-CTA', 'LinkedIn-Awareness-Sequenz', 'Podcast und YouTube für tiefere Erklärung', 'Quartals-Review mit Strategie-Anpassung'],
    pricing: { type: 'longterm', extra: null },
    caseRef: CASES.product,
  },
  'product_story': {
    label: 'Product-Story für Launch oder Pivot',
    radio: 'Story',
    trust: TRUST.product, access: ACCESS.product,
    mechanics: 'Wenn ihr einen Launch oder strategischen Pivot habt: eine ausführliche Geschichte als CEO-Interview oder Daten-Drop. Erklärt euer Produkt in der Tiefe, die ein Banner nie liefert. Optional zusätzlich auf Focus Online sowie in unseren englisch- und chinesischsprachigen Newslettern.',
    bullets: ['Geschichten-Format als Interview oder Daten-Drop', 'Über Newsletter, Podcast und YouTube', 'Optional internationale Reichweite (Focus Online, EN, CN)', 'Freigabe vor Veröffentlichung'],
    pricing: { type: 'story', extra: null },
    caseRef: CASES.product,
  },

  'event_test': {
    label: 'Pilot · Anmeldungen für euer Event',
    radio: 'Pilot',
    trust: TRUST.event, access: ACCESS.event,
    mechanics: 'Eine Kampagne kurz vor dem Termin. Newsletter mit direkter Anmelde-CTA. 200-Klick-Garantie. Performance auf Anmeldungs-Ebene messbar.',
    bullets: ['Newsletter-Feature 1 bis 2 Wochen vor Termin', 'Direkte Anmelde-CTA', '200-Klick-Garantie', 'Performance auf Anmeldungs-Ebene'],
    pricing: { type: 'pilot', extra: 'klick-guarantee' },
    caseRef: CASES.event,
  },
  'event_partnership': {
    label: 'Längerfristig · Awareness + Last-Call pro Event',
    radio: 'Partnership',
    trust: TRUST.event, access: ACCESS.event,
    mechanics: 'Zwei Wellen pro Event: Awareness 4 bis 6 Wochen vorher (LinkedIn, Podcast, YouTube), Last-Call 1 bis 2 Wochen vorher (Newsletter mit Anmelde-CTA). Bei mehreren Events: redaktionelle Brücken dazwischen.',
    bullets: ['Awareness-Welle 4 bis 6 Wochen vorher', 'Last-Call-Welle 1 bis 2 Wochen vorher', 'Über LinkedIn, Podcast, YouTube und Newsletter', 'Bei mehreren Events: redaktionelle Brücken dazwischen'],
    pricing: { type: 'longterm', extra: null },
    caseRef: CASES.event,
  },
  'event_story': {
    label: 'Event-Story als Vorlauf',
    radio: 'Story',
    trust: TRUST.event, access: ACCESS.event,
    mechanics: 'Wenn euer Event eine größere Geschichte ist (CEO-Keynote, Branchen-Premiere): eine ausführliche Geschichte als Vorlauf, dann gezielter Push kurz vor dem Termin. Macht aus dem Event einen Branchen-Moment statt nur einen Termin.',
    bullets: ['Ausführliche Geschichte vor dem Event', 'Direkter Push kurz davor', 'Über Newsletter, Podcast und YouTube', 'Optional internationale Reichweite (Focus Online, EN, CN)'],
    pricing: { type: 'story', extra: null },
    caseRef: CASES.event,
  },

  'asset_test': {
    label: 'Pilot · Downloads für eure Studie',
    radio: 'Pilot',
    trust: TRUST.asset, access: ACCESS.asset,
    mechanics: 'Newsletter-Feature mit direktem Klick-CTA zur Download-Seite. 200-Klick-Garantie. Performance auf Klick- und Download-Ebene messbar.',
    bullets: ['Newsletter-Feature mit Geschichten-Rahmen', 'Direkter Klick zur Download-Seite', '200-Klick-Garantie', 'Download-Tracking inklusive'],
    pricing: { type: 'pilot', extra: 'klick-guarantee' },
    caseRef: CASES.asset,
  },
  'asset_partnership': {
    label: 'Längerfristig · Download-Sequenz über mehrere Monate',
    radio: 'Partnership',
    trust: TRUST.asset, access: ACCESS.asset,
    mechanics: 'Mehrere Newsletter-Features über das Quartal oder Halbjahr mit unterschiedlichen Geschichten-Blickwinkeln auf das Asset. Plus LinkedIn-Begleitung. Bei mehreren Assets: Verlinkung untereinander und eine eigene Themen-Serie.',
    bullets: ['Mehrere Newsletter-Features mit verschiedenen Blickwinkeln', 'LinkedIn-Begleitung pro Feature', 'Download-Tracking', 'Bei mehreren Assets: Verlinkung und Themen-Serie'],
    pricing: { type: 'longterm', extra: null },
    caseRef: CASES.asset,
  },
  'asset_story': {
    label: 'Asset als Geschichte',
    radio: 'Story',
    trust: TRUST.asset, access: ACCESS.asset,
    mechanics: 'Statt das Asset nur zu verlinken, machen wir die Daten zur Geschichte. Newsletter-Feature im Lang-Format mit den wichtigsten Erkenntnissen. Podcast-Episode mit den Autoren. Macht aus dem Asset einen Branchen-Moment.',
    bullets: ['Geschichten-Format mit den Daten-Erkenntnissen', 'Podcast-Episode mit den Autoren', 'Über Newsletter, Podcast und YouTube', 'Optional internationale Reichweite (Focus Online, EN, CN)'],
    pricing: { type: 'story', extra: null },
    caseRef: CASES.asset,
  },

  'expert_test': {
    label: 'Pilot · Erster Auftritt eures Experten',
    radio: 'Pilot',
    trust: TRUST.expert, access: ACCESS.expert,
    mechanics: 'Erster Auftritt für euren Experten: eine kürzere Podcast-Episode (30 bis 45 Min) oder ein Newsletter-Gast-Beitrag. Wir testen, wie unsere Audience auf den Experten reagiert, bevor wir eine ausführliche Geschichte bauen.',
    bullets: ['Kurze Podcast-Episode oder Newsletter-Beitrag', 'Freigabe vor Veröffentlichung', 'Performance-Check vor Folge-Investment', 'Niedriges Commitment für ersten Test'],
    pricing: { type: 'pilot', extra: null },
    caseRef: CASES.expert,
  },
  'expert_partnership': {
    label: 'Längerfristig · Geschichten-Serie mit eurem Experten',
    radio: 'Partnership',
    trust: TRUST.expert, access: ACCESS.expert,
    mechanics: 'Sechs Monate. Eine Serie von Geschichten mit eurem Experten als rotem Faden. Plus Awareness-Kampagnen über mehrere Kanäle dazwischen. Aufbau einer Branchen-Stimme über Zeit.',
    bullets: ['Serie von Geschichten als Anker', 'Awareness-Kampagnen zwischen den Geschichten', 'Eure Expertin oder euer Experte wird Branchen-Stimme', 'Quartalsweise Strategie-Reviews'],
    pricing: { type: 'longterm', extra: null },
    caseRef: CASES.expert,
  },
  'expert_story': {
    label: 'Ausführliche Geschichte mit internationaler Reichweite',
    radio: 'Story',
    trust: TRUST.expert, access: ACCESS.expert,
    mechanics: 'Volles Interview (1,5 bis 2h Aufnahme) oder Erzähl-Format mit Original-Tönen (60 Min Aufnahme). Internationale Reichweite ist standardmäßig dabei: Focus Online, englischsprachiger Newsletter, chinesischsprachiger Newsletter. Freigabe vor Veröffentlichung.',
    bullets: ['Volles Interview oder Erzähl-Format', 'Über Newsletter, Podcast und YouTube', 'Internationale Reichweite (Focus Online, EN, CN)', 'Freigabe vor Veröffentlichung'],
    pricing: { type: 'story', extra: null },
    caseRef: CASES.expert,
  },
};

function recommend(useCase, mode) {
  return RECOMMENDATIONS[`${useCase}_${mode}`] || null;
}

function PricingLine({ pricing }) {
  const main = pricing.type === 'pilot'
    ? 'Eine Kampagne ab €2.500'
    : pricing.type === 'longterm'
      ? 'Preis besprechen wir im Call'
      : pricing.type === 'story'
        ? 'Rahmen besprechen wir im Call'
        : '';
  const sub = pricing.type === 'pilot' && pricing.extra === 'klick-guarantee'
    ? '200-Klick-Garantie. Erreiche ich die nicht, wiederhole ich kostenlos.'
    : pricing.type === 'story'
      ? 'Alle Kanäle sind dabei.'
      : null;
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap', paddingTop: 8 }}>
      <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.01em' }}>
        {main}
      </div>
      {sub && (
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.4 }}>
          {sub}
        </div>
      )}
    </div>
  );
}

function dispatchToForm(payload) {
  window.dispatchEvent(new CustomEvent('goalfinder:submit', { detail: payload }));
  const kontakt = document.getElementById('kontakt');
  if (kontakt) kontakt.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function InlineInquiryForm({ rec, useCase, mode, onBack }) {
  const [name, setName] = React.useState('');
  const [firma, setFirma] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [emailTouched, setEmailTouched] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState(null);

  const emailInvalid = emailTouched && email.trim().length > 0 && !EMAIL_RE.test(email.trim());

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    if (!name.trim() || !firma.trim() || !EMAIL_RE.test(email.trim())) {
      setEmailTouched(true);
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      const sonstige = `Empfohlen: ${rec.label} | Vorhaben: ${useCase} | Modus: ${mode}`;
      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: rec.radio, sonstige, source: 'goalfinder_a' }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      setSubmitted(true);
      window.trackEvent && window.trackEvent('inquiry_submit', { source: 'goalfinder', interesse: rec.radio, mode: mode, useCase: useCase });
      if (window.umami) { try { window.umami.track('inquiry_submit', { source: 'goalfinder', interesse: rec.radio, mode: mode }); } catch (_) {} }
    } catch (err) {
      setError('Etwas ist schiefgegangen. Bitte versuch es nochmal oder schreib mir direkt an hallo@autopreneur.de.');
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <div style={{ marginTop: 24, padding: '32px 8px', textAlign: 'center' }}>
        <div style={{ fontSize: 36, marginBottom: 8 }}>✓</div>
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, color: 'var(--fg-1)', marginBottom: 12, letterSpacing: '-0.01em' }}>Danke. Deine Anfrage ist drin.</div>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6, maxWidth: 520, margin: '0 auto' }}>
          Ich schaue mir das in den nächsten 48 Stunden an und melde mich mit einer ehrlichen Einschätzung. Bei klarem Fit schick ich direkt einen Termin-Vorschlag.
        </div>
        <div style={{ marginTop: 20, padding: '12px 18px', background: 'var(--bg-page)', borderRadius: 8, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', maxWidth: 520, margin: '20px auto 0' }}>
          📬 Schau auf eine Mail von <strong style={{ color: 'var(--fg-2)' }}>hallo@autopreneur.de</strong>. Manchmal landen meine ersten Antworten im Spam-Ordner.
        </div>
        <div style={{ marginTop: 24, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-2)' }}>
          Bis dahin: <a href="#cases" style={{ color: 'var(--ap-blue)', textDecoration: 'none', fontWeight: 500 }}>Cases ansehen →</a>
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="goalfinder-inline-form-grid">
        <InlineField label="Dein Name" placeholder="Max Mustermann" value={name} onChange={setName} disabled={submitting} />
        <InlineField label="Firma" placeholder="z.B. Acme Software GmbH" value={firma} onChange={setFirma} disabled={submitting} />
        <InlineField
          label="Geschäfts-E-Mail"
          placeholder="max@firma.com"
          type="email"
          value={email}
          onChange={(v) => { setEmail(v); if (emailTouched && EMAIL_RE.test(v.trim())) setEmailTouched(false); }}
          onBlur={() => setEmailTouched(true)}
          disabled={submitting}
          invalid={emailInvalid}
          hint={emailInvalid ? 'Bitte eine gültige E-Mail-Adresse eingeben.' : null}
        />
      </div>
      {error && (
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: '#c4344f', background: '#fdecef', padding: '10px 12px', borderRadius: 8, lineHeight: 1.4 }}>
          {error}
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, marginTop: 8 }}>
        <button type="submit" className="btn btn-primary btn-lg" disabled={submitting} style={{ padding: '16px 32px', fontSize: 16, opacity: submitting ? 0.7 : 1, cursor: submitting ? 'wait' : 'pointer' }}>
          {submitting ? 'Sende…' : 'Anfrage senden →'}
        </button>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', textAlign: 'center', lineHeight: 1.5 }}>
          Unverbindlich. 48h Antwort. Kein Sales-Pitch.<br/>
          <span style={{ fontSize: 11 }}>Mit dem Absenden akzeptierst du die <a href="https://web.autopreneur.de/datenschutz" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>Datenschutzerklärung</a>.</span>
        </div>
      </div>
    </form>
  );
}

function InlineField({ label, placeholder, value, onChange, onBlur, type = 'text', disabled, invalid, hint }) {
  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)}
        onBlur={onBlur}
        required
        disabled={disabled}
        style={{ width: '100%', padding: '12px 14px', fontFamily: 'var(--font-sans)', fontSize: 15, border: `1px solid ${invalid ? '#c4344f' : 'var(--border-default)'}`, borderRadius: 8, outline: 'none', background: '#fff', color: 'var(--fg-1)', opacity: disabled ? 0.6 : 1, boxSizing: 'border-box' }}
      />
      {hint && (
        <div style={{ marginTop: 4, fontFamily: 'var(--font-sans)', fontSize: 12, color: '#c4344f', lineHeight: 1.3 }}>{hint}</div>
      )}
    </div>
  );
}

function GoalFinder() {
  const [step, setStep] = React.useState(0);
  const [useCase, setUseCase] = React.useState(null);
  const [mode, setMode] = React.useState(null);
  const [inquiring, setInquiring] = React.useState(false);
  return (
    <section id="goal-finder" style={{ padding: '120px 0 64px', background: '#fff', borderTop: '1px solid var(--border-default)' }}>
      <div className="container">
        <div className="section-eyebrow" style={{ marginBottom: 24 }}>
          <span className="kicker-line"></span>Zusammenarbeit
        </div>
        <h2 className="section-title" style={{ fontSize: 'clamp(40px, 5vw, 56px)' }}>
          Sag mir, was du vorhast. Ich zeig dir den passenden Weg.
        </h2>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.55, color: 'var(--fg-2)', marginTop: 20, maxWidth: 720 }}>
          Zwei Klicks bis zur Empfehlung. Du sagst mir, wann wir reden.
        </p>
        {step === 0 && (
          <div style={{ marginTop: 48 }}>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 24 }}>
              Schritt 1 von 2: Wähle dein Vorhaben
            </div>
            <div className="goalfinder-cases" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
              {USE_CASES.map(uc => {
                const pick = () => { setUseCase(uc.id); setStep(1); };
                return (
                  <article
                    key={uc.id}
                    className="goalfinder-card"
                    role="button"
                    tabIndex={0}
                    aria-label={`${uc.label} — ${uc.output}`}
                    style={{
                      padding: 28,
                      background: '#fff',
                      border: '1px solid var(--border-default)',
                      borderTop: `3px solid ${uc.accent}`,
                      borderRadius: 12,
                      cursor: 'pointer',
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 10,
                      transition: 'transform 150ms, box-shadow 150ms',
                      position: 'relative',
                    }}
                    onClick={pick}
                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } }}>
                    <div className="goalfinder-card-icon" style={{ fontSize: 28 }}>{uc.icon}</div>
                    <h3 className="goalfinder-title" style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', margin: 0, letterSpacing: '-0.01em', lineHeight: 1.2, minHeight: '3.6em' }}>
                      {uc.label}
                    </h3>
                    <div className="goalfinder-card-output" style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: uc.accent, fontWeight: 600, letterSpacing: '0.02em', marginTop: 2 }}>
                      → {uc.output}
                    </div>
                    <p className="goalfinder-card-desc" style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.5, color: 'var(--fg-2)', margin: 0 }}>
                      {uc.description}
                    </p>
                    <span className="goalfinder-card-chevron" aria-hidden="true">›</span>
                  </article>
                );
              })}
            </div>
            <div className="goalfinder-sparring" style={{ marginTop: 48, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 20, width: '100%', maxWidth: 520 }}>
                <div style={{ flex: 1, height: 1, background: 'var(--border-default)' }}></div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.16em', fontWeight: 600 }}>oder</div>
                <div style={{ flex: 1, height: 1, background: 'var(--border-default)' }}></div>
              </div>
              <div style={{ textAlign: 'center', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-3)' }}>Nicht sicher, was passt?</div>
              <button
                onClick={() => dispatchToForm({ package: 'Noch unsicher', mode: 'sparring', fullLabel: 'Sparring-Call' })}
                className="goalfinder-sparring-link"
                style={{ background: 'none', border: 0, padding: '6px 12px', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 18, color: 'var(--ap-blue)', fontWeight: 600 }}>
                <img
                  src="assets/philipp.png"
                  alt="Philipp Raasch"
                  width="48"
                  height="48"
                  loading="lazy"
                  style={{ width: 48, height: 48, borderRadius: '50%', objectFit: 'cover', border: '2px solid #fff', boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }}
                />
                30 Min mit mir sprechen →
              </button>
            </div>
          </div>
        )}
        {step === 1 && (
          <div style={{ marginTop: 48 }}>
            <button
              onClick={() => { setStep(0); setUseCase(null); setInquiring(false); }}
              style={{
                background: 'none',
                border: 0,
                padding: 0,
                cursor: 'pointer',
                fontFamily: 'var(--font-sans)',
                fontSize: 13,
                color: 'var(--ap-blue)',
                textDecoration: 'underline',
                marginBottom: 24,
              }}>
              ← Doch anderes Vorhaben?
            </button>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 24 }}>
              Schritt 2 von 2: Wie wollt ihr das angehen?
            </div>
            <div className="goalfinder-modes" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {MODES.map(m => {
                const pick = () => { setMode(m.id); setStep(2); };
                return (
                  <article
                    key={m.id}
                    className="goalfinder-card"
                    role="button"
                    tabIndex={0}
                    aria-label={`${m.label} — ${m.subline}`}
                    style={{
                      padding: 28,
                      background: '#fff',
                      border: '1px solid var(--border-default)',
                      borderRadius: 12,
                      cursor: 'pointer',
                      transition: 'transform 150ms, box-shadow 150ms',
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 10,
                      position: 'relative',
                    }}
                    onClick={pick}
                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } }}>
                    <div className="goalfinder-card-icon" style={{ fontSize: 28 }}>{m.icon}</div>
                    <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, color: 'var(--fg-1)', margin: 0, letterSpacing: '-0.01em', lineHeight: 1.2 }}>
                      {m.label}
                    </h3>
                    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                      {m.subline}
                    </div>
                    <p className="goalfinder-card-desc" style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.5, color: 'var(--fg-2)', margin: 0 }}>
                      {m.description}
                    </p>
                    <span className="goalfinder-card-chevron" aria-hidden="true">›</span>
                  </article>
                );
              })}
            </div>
          </div>
        )}
        {step === 2 && (() => {
          const rec = recommend(useCase, mode);
          if (!rec) return <div>Keine Empfehlung gefunden.</div>;
          return (
            <div style={{ marginTop: 48 }}>
              <button
                onClick={() => { setStep(1); setMode(null); setInquiring(false); }}
                style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--ap-blue)', textDecoration: 'underline', marginBottom: 24 }}>
                ← Doch anders aufziehen?
              </button>
              <div className="card" style={{ padding: 48, background: '#fff', boxShadow: '0 12px 40px rgba(0,0,0,0.08)' }}>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ap-blue)', marginBottom: 12 }}>
                  {inquiring ? '✓ Anfrage senden' : 'Dein Match'}
                </div>
                <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 36, fontWeight: 500, color: 'var(--fg-1)', margin: 0, letterSpacing: '-0.02em', lineHeight: 1.15 }}>
                  {rec.label}
                </h3>
                {!inquiring && (
                  <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 24 }}>
                    <div className="goalfinder-match-twocol" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                      <div>
                        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--fg-3)', textTransform: 'uppercase', marginBottom: 8 }}>🤝 Was ich mitbringe</div>
                        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--fg-1)', margin: 0 }}>{rec.trust}</p>
                      </div>
                      <div>
                        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--fg-3)', textTransform: 'uppercase', marginBottom: 8 }}>🔑 Was du davon hast</div>
                        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--fg-1)', margin: 0 }}>{rec.access}</p>
                      </div>
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', color: 'var(--fg-3)', textTransform: 'uppercase', marginBottom: 8 }}>📊 Wie das konkret läuft</div>
                      <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--fg-1)', margin: 0 }}>{rec.mechanics}</p>
                      <ul style={{ marginTop: 12, paddingLeft: 0, listStyle: 'none' }}>
                        {rec.bullets.map(b => (
                          <li key={b} style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.5, marginTop: 6 }}>✓ {b}</li>
                        ))}
                      </ul>
                    </div>
                  </div>
                )}
                <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--border-default)' }}>
                  <PricingLine pricing={rec.pricing} />
                  {!inquiring && (
                    <div style={{ marginTop: 16, fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-3)', lineHeight: 1.5 }}>
                      💡 So lief's bei {rec.caseRef.name}: {rec.caseRef.kpi}{' '}
                      <a href={rec.caseRef.href} style={{ color: 'var(--ap-blue)', textDecoration: 'none', fontWeight: 500 }}>→ Case ansehen</a>
                    </div>
                  )}
                </div>
                {!inquiring && (
                  <div style={{ marginTop: 32, textAlign: 'center' }}>
                    <button
                      type="button"
                      onClick={() => setInquiring(true)}
                      className="btn btn-primary btn-lg"
                      style={{ padding: '16px 32px', fontSize: 16, display: 'inline-flex', alignItems: 'center', gap: 10, border: 0, cursor: 'pointer' }}>
                      Lass uns sprechen <span>→</span>
                    </button>
                    <div style={{ marginTop: 12, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)' }}>
                      Unverbindlich. 48h Antwort. Kein Sales-Pitch.
                    </div>
                  </div>
                )}
                {inquiring && (
                  <InlineInquiryForm rec={rec} useCase={useCase} mode={mode} onBack={() => setInquiring(false)} />
                )}
              </div>
            </div>
          );
        })()}
        <style>{`
          section#goal-finder .goalfinder-card {
            box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
          }
          section#goal-finder .goalfinder-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.04);
            border-color: var(--fg-3);
          }
          section#goal-finder .goalfinder-card:focus-visible {
            outline: 2px solid var(--ap-blue);
            outline-offset: 3px;
          }
          section#goal-finder .goalfinder-card:focus:not(:focus-visible) {
            outline: none;
          }
          section#goal-finder .goalfinder-card-chevron {
            position: absolute;
            top: 50%;
            right: 18px;
            transform: translateY(-50%);
            font-family: var(--font-sans);
            font-size: 22px;
            line-height: 1;
            font-weight: 300;
            color: var(--fg-3);
            opacity: 0.45;
            transition: color 200ms var(--ease-out), transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
            pointer-events: none;
            display: block;
          }
          section#goal-finder .goalfinder-card:hover .goalfinder-card-chevron {
            color: var(--fg-1);
            opacity: 1;
            transform: translateY(-50%) translateX(4px);
          }
          @media (max-width: 1280px) {
            section#goal-finder .goalfinder-cases {
              grid-template-columns: repeat(3, 1fr) !important;
            }
          }
          @media (max-width: 860px) {
            section#goal-finder .goalfinder-cases {
              grid-template-columns: repeat(2, 1fr) !important;
            }
          }
          @media (max-width: 860px) {
            section#goal-finder .goalfinder-inline-form-grid,
            section#goal-finder .goalfinder-match-twocol {
              grid-template-columns: 1fr !important;
            }
          }
          @media (max-width: 640px) {
            section#goal-finder .goalfinder-cases,
            section#goal-finder .goalfinder-modes {
              grid-template-columns: 1fr !important;
            }
            section#goal-finder .goalfinder-card {
              padding: 18px 56px 18px 20px !important;
              gap: 6px !important;
            }
            section#goal-finder .goalfinder-card-icon {
              font-size: 22px !important;
            }
            section#goal-finder .goalfinder-card h3 {
              font-size: 19px !important;
              min-height: 0 !important;
            }
            section#goal-finder .goalfinder-card-output {
              color: var(--fg-3) !important;
              font-weight: 500 !important;
            }
            section#goal-finder .goalfinder-card-desc {
              display: none !important;
            }
            section#goal-finder .goalfinder-card-chevron {
              font-size: 32px;
              opacity: 1;
            }
            section#goal-finder .card {
              padding: 28px !important;
            }
            section#goal-finder .card h3 {
              font-size: 28px !important;
            }
          }
        `}</style>
      </div>
    </section>
  );
}
window.GoalFinder = GoalFinder;