function FitMatch() {
  const yes = [
    'Du verkaufst an die Automobilindustrie. Software, Tech, Services, Consulting, Beratung.',
    'Dein Angebot ist erklärungsbedürftig und braucht Kontext.',
    'Du willst echte Entscheider erreichen, nicht Klick-Volumen.',
    'Du willst eine Story, die wirklich ankommt.',
  ];
  const no = [
    'Deine Zielgruppe ist nicht Automotive. Wir verschwenden beide Zeit.',
    'Du suchst billige Reichweite. Klick-Preise kann ich nicht.',
    'Du willst sofort Abschlüsse.',
    'Du willst keine ehrliche Einschätzung, ob es passt.',
  ];

  return (
    <section style={{ padding: '120px 0', background: '#fff' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 64px' }}>
          <div className="section-eyebrow" style={{ marginBottom: 20 }}>Fit-Check</div>
          <h2 className="section-title" style={{ fontSize: 56 }}>
            Passen wir <em style={{ color: 'var(--ap-blue)', fontWeight: 500 }}>zusammen?</em>
          </h2>
        </div>

        <div className="fitmatch-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div className="card" style={{ padding: 40, background: '#fff', borderColor: 'var(--ap-blue)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
              <div style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--ap-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
              </div>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--fg-1)', margin: 0, lineHeight: 1.2 }}>Du bist mein idealer Partner, wenn…</h3>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {yes.map((y, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.55, color: 'var(--fg-1)', paddingBottom: i < yes.length - 1 ? 16 : 0, borderBottom: i < yes.length - 1 ? '1px solid var(--border-default)' : 0 }}>
                  <span style={{ width: 22, height: 22, borderRadius: 999, background: 'var(--bg-accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ap-blue)', flexShrink: 0 }}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
                  </span>
                  <span>{y}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="card" style={{ padding: 40, background: 'var(--bg-page)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
              <div style={{ width: 40, height: 40, borderRadius: 999, background: 'var(--fg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0 }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
              </div>
              <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--fg-1)', margin: 0, lineHeight: 1.2 }}>Du bist hier falsch, wenn…</h3>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {no.map((y, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.55, color: 'var(--fg-3)', paddingBottom: i < no.length - 1 ? 16 : 0, borderBottom: i < no.length - 1 ? '1px solid var(--border-default)' : 0 }}>
                  <span style={{ width: 22, height: 22, borderRadius: 999, background: '#fff', border: '1px solid var(--border-default)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg-3)', flexShrink: 0 }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
                  </span>
                  <span>{y}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: 48, padding: '32px 24px', background: 'var(--bg-page)', borderRadius: 12, border: '1px solid var(--border-default)' }}>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontStyle: 'italic', color: 'var(--fg-1)', margin: 0, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
            Nicht sicher? Schreib mir. Innerhalb 48 Stunden sage ich dir <em style={{ color: 'var(--ap-blue)' }}>ehrlich</em>, ob wir zusammenpassen.
          </p>
          <a href="#kontakt" className="btn btn-primary btn-lg" style={{ marginTop: 24 }}>
            Fit-Check anfragen <span style={{ fontSize: 18 }}>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}
window.FitMatch = FitMatch;