/* BProof — Beat 5 "Dass es wirkt" (Desire)
   Consolidates: CaseStudies (3 cases) + Testimonials (3) + PartnerStrip logos.
   Global-function component, no imports/exports.
   Copy lifted VERBATIM from A components.
*/
function BProof() {
  return (
    <section className="b-beat" id="b-proof">
      <h2>Was meine Partner <em>mit mir erreicht haben</em></h2>
      <p className="b-beat-sub">Vier Beispiele aus vier Kategorien. Echte Kampagnen. Echte Zahlen. Echter Content</p>

      {/* Case 1: Exxeta — Partnership · 6 Monate */}
      <article className="b-case">
        <header className="b-case-header">
          <span className="b-case-tag">Partnership · 6 Monate</span>
          <h3>Exxeta wollte vom unsichtbaren IT-Dienstleister zur Branchen-Stimme werden</h3>
        </header>
        <div className="b-case-kpis b-case-kpis--single">
          <div className="b-stat">250<span>Webinar-Anmeldungen aus einer Kampagne</span></div>
        </div>
        <blockquote className="b-case-quote">
          <p>C-Level-Entscheider sprechen mich seither direkt auf Exxeta an.</p>
          <cite>Beobachtung von Philipp</cite>
        </blockquote>
        <details className="b-case-more">
          <summary>Die ganze Story</summary>
          <div className="b-case-narrative">
            <p>Exxeta machte seit Jahren Digitalisierung für Autobauer. Bekannt war das trotzdem nicht. Sie kamen in keiner Branchen-Diskussion vor.</p>
            <p>Sechs Monate sollten das ändern. Konstant präsent sein. Thema-Ownership aufbauen. Konkrete Webinar-Anmeldungen generieren.</p>
            <p>Multi-Channel über sechs Monate. Awareness-Posts, Newsletter-Features, eine Lead-Gen-Kampagne für ein Webinar.</p>
          </div>
        </details>
      </article>

      {/* Case 2: Thoughtworks — Thought-Leadership-Story */}
      <article className="b-case">
        <header className="b-case-header">
          <span className="b-case-tag">Thought-Leadership-Story</span>
          <h3>Thoughtworks wollte als SDV-Experte sichtbar werden</h3>
        </header>
        <div className="b-case-kpis b-case-kpis--single">
          <div className="b-stat">1.203<span>Klicks zur Studie von Thoughtworks</span></div>
        </div>
        <blockquote className="b-case-quote">
          <p>„Über 1.200 Klicks auf unsere Landing Page, LinkedIn-Anfragen und ein Follow-up-Meeting direkt aus der Kampagne."</p>
          <cite>Nikolas Buckstegen · Thoughtworks</cite>
        </blockquote>
        <details className="b-case-more">
          <summary>Die ganze Story</summary>
          <div className="b-case-narrative">
            <p>Thoughtworks hatte eine Studie zum Software-Defined Vehicle veröffentlicht. Das Problem: Niemand außerhalb der Tech-Bubble kannte sie.</p>
            <p>Sie wollten die Studie vor Automotive-Entscheider bringen. Und Thoughtworks als Stimme zum Thema verankern.</p>
            <p>Wir haben daraus eine Thought-Leadership-Story über alle vier Kanäle gemacht. Plus Gastartikel auf Focus Online.</p>
          </div>
        </details>
      </article>

      {/* Case 3: Cognizant Mobility — Pilot · Awareness + Lead-Gen */}
      <article className="b-case">
        <header className="b-case-header">
          <span className="b-case-tag">Pilot · Awareness + Lead-Gen</span>
          <h3>Cognizant Mobility wollte Workshop-Anmeldungen von Automotive-Entscheidern</h3>
        </header>
        <div className="b-case-kpis b-case-kpis--single">
          <div className="b-stat">60<span>neue Kontakte zu echten Automotive-Entscheidern</span></div>
        </div>
        <blockquote className="b-case-quote">
          <p>„Hier kommen die Unternehmen direkt auf uns zu. Echte Entscheider aus der Automobilindustrie."</p>
          <cite>Martin Wöhrle · Cognizant Mobility</cite>
        </blockquote>
        <details className="b-case-more">
          <summary>Die ganze Story</summary>
          <div className="b-case-narrative">
            <p>Cognizant Mobility berät internationale Automobilunternehmen beim Markteintritt in Europa. Asiatische und amerikanische Unternehmen, die nach Europa expandieren. Sie hatten einen Workshop im Angebot. Den „Market Entry Check".</p>
            <p>Sie brauchten Anmeldungen direkt aus der Entscheider-Ebene europäischer OEMs.</p>
            <p>Wir haben einen LinkedIn-Post und eine Podcast-Episode gemacht. Eine Kampagne. Ein Ziel. Eine Woche.</p>
          </div>
        </details>
      </article>

      {/* Case 4: Vehicle Tech Week (UKIP) — Event · Lead-Gen */}
      <article className="b-case">
        <header className="b-case-header">
          <span className="b-case-tag">Event · Lead-Gen</span>
          <h3>Die Vehicle Tech Week wollte Automotive-Entscheider auf ihr Event holen</h3>
        </header>
        <div className="b-case-kpis b-case-kpis--single">
          <div className="b-stat">1.224<span>Klicks zur Event-Registrierung</span></div>
        </div>
        <details className="b-case-more">
          <summary>Die ganze Story</summary>
          <div className="b-case-narrative">
            <p>Ein Event lebt von den richtigen Teilnehmern. Die Vehicle Tech Week brauchte Fach- und Führungskräfte der Automobilindustrie auf den Sitzen, nicht nur Reichweite.</p>
            <p>Über LinkedIn, Newsletter und YouTube haben wir die Entscheider direkt zur Anmeldung gebracht. 1.224 Klicks zur Registrierung, plus sichtbare Präsenz bei genau der Zielgruppe, die das Event füllen sollte.</p>
          </div>
        </details>
      </article>

      {/* Testimonials — DSGVO-approved quotes NOT shortened */}
      <h3 className="b-testimonials-heading">Was Partner sagen</h3>
      <div className="b-testimonials">
        <blockquote className="b-testimonial">
          <p>Wir bauen mit digital.auto eine unabhängige Tech-Initiative für die Autoindustrie auf. Größte Herausforderung? Sichtbarkeit bei potenziellen Partnern in der Industrie. Die Zusammenarbeit mit Philipp zur IAA hat genau das gebracht: Über 36.000 Impressions bei unserer Zielgruppe.</p>
          <cite>
            <img className="b-testimonial-photo" src="assets/testimonials/dirk-slama.jpeg" alt="Prof. Dirk Slama" loading="lazy" />
            <span className="b-testimonial-who">
              <strong>Prof. Dirk Slama</strong>
              <span>VP Bosch &amp; Chairman digital.auto</span>
            </span>
          </cite>
        </blockquote>

        <blockquote className="b-testimonial">
          <p>Die Reichweite und Conversion-Rate von Philipps Content haben mich wirklich beeindruckt. Mit nur einem Post konnten wir 35 hochwertige Anmeldungen für unser Webinar generieren. Besonders wertvoll war die Qualität der Leads: Nicht nur Berater, sondern echte Entscheider aus der Industrie.</p>
          <cite>
            <img className="b-testimonial-photo" src="assets/testimonials/steffen-ramsaie.jpeg" alt="Steffen Ramsaier" loading="lazy" />
            <span className="b-testimonial-who">
              <strong>Steffen Ramsaier</strong>
              <span>Senior Director Field Marketing DACH · Informatica</span>
            </span>
          </cite>
        </blockquote>
      </div>

      {/* Partner logos — companies that have worked with me. Same normalized
          frame + per-logo scale + grayscale system as A's PartnerStrip, so every
          mark reads at the same optical size and color. ZYT is white → invert. */}
      <p className="b-logos-label">Einige meiner bisherigen Partner</p>
      <div className="b-logos">
        {[
          { name: 'Berylls', src: 'assets/logos/partners/berylls.webp', scale: 0.85 },
          { name: 'Exxeta', src: 'assets/logos/partners/exxeta.png', scale: 0.7 },
          { name: 'thoughtworks', src: 'assets/logos/partners/thoughtworks.png', scale: 0.85 },
          { name: 'Cognizant Mobility', src: 'assets/logos/partners/cognizant-mobility.png', scale: 0.78 },
          { name: 'Box', src: 'assets/logos/partners/box.svg', scale: 1.2 },
          { name: 'Nagarro', src: 'assets/logos/partners/nagarro.svg', scale: 0.85 },
          { name: 'adesso', src: 'assets/logos/partners/adesso.svg', scale: 0.95 },
          { name: 'Atreus', src: 'assets/logos/partners/atreus.webp', scale: 1.1 },
          { name: 'Siemens', src: 'assets/logos/partners/siemens.svg', scale: 0.8 },
          { name: 'Mobile.de', src: 'assets/logos/partners/mobile-de.svg', scale: 0.75 },
          { name: 'Aurora Labs', src: 'assets/logos/partners/aurora-labs.png', scale: 0.95 },
          { name: 'Momenta', src: 'assets/logos/partners/momenta.webp', scale: 1.0 },
          { name: 'Catena-X', src: 'assets/logos/partners/catena-x.png', scale: 0.78 },
          { name: 'Informatica', src: 'assets/logos/partners/informatica.png', scale: 0.95 },
          { name: 'ZYT', src: 'assets/logos/partners/zyt.svg', scale: 0.8, invert: true },
        ].map((l) => (
          <span className="b-logo-cell" key={l.name} title={l.name}>
            <img
              src={l.src}
              alt={l.name}
              className={l.invert ? 'b-logo-img b-logo-img--invert' : 'b-logo-img'}
              loading="lazy"
              style={{ transform: `scale(${l.scale})` }}
            />
          </span>
        ))}
      </div>

      <div className="b-midcta">
        <p>Ob das für dich funktioniert, sage ich dir ehrlich.</p>
        <a href="#b-ask" className="b-cta-link">Fit-Check anfragen →</a>
      </div>
    </section>
  );
}