/* BAudience — Beat 4 "Wer dir zuhört" (access-proof)
   Consolidates: Audience.jsx (heading + lead) + LogoBar.jsx (employer logos).
   Proves COMPOSITION (who the audience is), grouped by role.
   Result-stats live in BProof with full case context — not duplicated here.
   Copy lifted VERBATIM from A components.
*/
function BAudience() {
  // Per-logo scale optically normalizes wildly different SVG canvases so every
  // mark reads at roughly the same size inside its fixed tile (ported from A LogoBar).
  const groups = [
    {
      label: 'Hersteller',
      logos: [
        { name: 'Mercedes-Benz', scale: 1.5 },
        { name: 'BMW', scale: 1.05 },
        { name: 'Audi', scale: 1.15 },
        { name: 'Porsche', scale: 1.4 },
        { name: 'VW', scale: 1.25 },
        { name: 'Stellantis', scale: 1.1 },
        { name: 'Ford', scale: 0.9 },
        { name: 'Toyota', scale: 2.8 },
        { name: 'Honda', scale: 1.3 },
        { name: 'Tesla', scale: 1.5 },
        { name: 'BYD', scale: 2.15 },
        { name: 'NIO', scale: 1.0 },
        { name: 'Xiaomi', scale: 1.5 },
        { name: 'Geely', scale: 0.8 },
      ],
    },
    {
      label: 'Zulieferer & Tech',
      logos: [
        { name: 'Bosch', scale: 2.0 },
        { name: 'Continental', scale: 0.9 },
        { name: 'ZF', scale: 1.3 },
        { name: 'Schaeffler', scale: 0.85 },
        { name: 'Magna', scale: 0.95 },
        { name: 'CARIAD', scale: 0.9 },
        { name: 'CATL', scale: 0.75 },
        { name: 'NVIDIA', scale: 0.75 },
        { name: 'Microsoft', scale: 0.95 },
      ],
    },
  ];

  return (
    <section className="b-beat" id="b-audience">
      <h2>
        Ich erreiche über 100.000 Automotive-Entscheider.{' '}
        <span>Hier arbeiten sie</span>
      </h2>

      <p>
        Reichweite ist nur die halbe Wahrheit. Die andere Hälfte ist die Zusammensetzung. Wenn 100.000+ Menschen mir folgen, ist die nächste Frage: sind das deine Entscheider?
      </p>

      <div className="b-cluster">
        <div className="b-cluster-stat">
          <strong>über 40%</strong>
          <span>Director, VP, C-Level oder Geschäftsführung</span>
        </div>
        <div className="b-cluster-stat">
          <strong>rund 50%</strong>
          <span>direkt aus der Automobilindustrie, OEM und Zulieferer</span>
        </div>
        <div className="b-cluster-stat">
          <strong>rund 80%</strong>
          <span>im Automotive-Ökosystem, mit Beratung, IT, Engineering und Handel</span>
        </div>
      </div>
      <p className="b-cluster-source">Basis: 2.963 Umfrage-Antworten (2024–2026) und LinkedIn-Audience-Daten.</p>

      <div className="b-cluster-meta">
        <p><span className="b-cluster-meta-label">Top-Arbeitgeber</span> Mercedes-Benz, Bosch, BMW, CARIAD, Volkswagen</p>
        <p><span className="b-cluster-meta-label">Schwerpunkt-Regionen</span> München, Stuttgart, Berlin, Frankfurt, Wolfsburg</p>
      </div>

      {groups.map((g) => (
        <div className="b-logo-group" key={g.label}>
          <p className="b-logo-group-label">{g.label}</p>
          <div className="b-logo-wall">
            {g.logos.map((l) => (
              <div className="b-logo-tile" key={l.name} title={l.name}>
                <span className="b-logo-frame">
                  <img
                    src={`assets/logos/readers/${l.name}.svg`}
                    alt={l.name}
                    loading="lazy"
                    style={{ transform: `scale(${l.scale})` }}
                  />
                </span>
              </div>
            ))}
            <div className="b-logo-tile b-logo-more"><span>+ viele mehr</span></div>
          </div>
        </div>
      ))}

      <div className="b-dm-proof">
        <p className="b-dm-proof-label">Und sie hören zu. Das sagen Entscheider über meinen Content:</p>
        <div className="b-dm-quotes">
          <blockquote className="b-dm-quote">
            <p>Philipp bringt mit seiner Mischung aus Insider-Sicht und Makro-Perspektive die relevanten Themen auf den Punkt. Eine Perspektive, die ich regelmäßig schätze.</p>
            <cite><strong>Frank Lindenberg</strong><span>ehem. CFO, Mercedes-Benz AG</span></cite>
          </blockquote>
          <blockquote className="b-dm-quote">
            <p>Philipp reads automotive trends from a completely different angle. His content mix is perfectly balanced and sometimes provocative, exactly what this industry needs.</p>
            <p className="b-dm-quote-de">Sinngemäß: Philipp betrachtet Automotive-Trends aus einem völlig anderen Blickwinkel. Sein Content-Mix ist ausgewogen und manchmal provokant. Genau das, was diese Branche braucht.</p>
            <cite><strong>Maria Grazia Davino</strong><span>Regional Managing Director, BYD Europe</span></cite>
          </blockquote>
          <blockquote className="b-dm-quote">
            <p>Der Autopreneur ordnet internationale Perspektiven und regionale Entwicklungen in einen übergreifenden Zusammenhang ein. Genau die globale Sichtweise, die die Transformation braucht.</p>
            <cite><strong>Dr. Stefan Baginski</strong><span>VP, BMW Group</span></cite>
          </blockquote>
        </div>
      </div>
    </section>
  );
}