/* Slim audience-companies trust strip under hero.
   Answers the buyer's #1 question: "Are MY buyers in your audience?"
   Logos live in assets/logos/readers/<Name>.svg
*/
function LogoBar() {
  // 23 named companies + 1 "und viele mehr" indicator = 24 tiles = 6x4 desktop grid
  // Order optimized: highest-recognition German OEMs first, then suppliers, then global / tech.
  // `scale` normalizes the optical size — each SVG has different internal padding around
  // its mark, so we hand-tune so every logo reads at roughly the same visual height.
  const audience = [
  { name: 'Mercedes-Benz', scale: 1.5 }, // stacked mark + wordmark
  { name: 'BMW', scale: 1.05 },
  { name: 'Audi', scale: 1.15 },
  { name: 'Porsche', scale: 1.4 }, // stacked crest + wordmark
  { name: 'VW', scale: 1.25 }, // small circle mark
  { name: 'CARIAD', scale: 0.9 }, // very wide wordmark
  { name: 'Bosch', scale: 2.0 },
  { name: 'Schaeffler', scale: 0.85 }, // wide wordmark
  { name: 'Continental', scale: 0.9 }, // wide wordmark
  { name: 'ZF', scale: 1.3 }, // small circle
  { name: 'Magna', scale: 0.95 },
  { name: 'Microsoft', scale: 0.95 },
  { name: 'NVIDIA', scale: 0.75 }, // wide wordmark
  { name: 'Tesla', scale: 1.5 }, // stacked T + wordmark
  { name: 'Ford', scale: 0.9 }, // wide oval
  { name: 'Stellantis', scale: 1.1 },
  { name: 'Toyota', scale: 2.8 }, // stacked, small SVG canvas
  { name: 'Honda', scale: 1.3 }, // stacked mark + wordmark
  { name: 'BYD', scale: 2.15 },
  { name: 'NIO', scale: 1.0 },
  { name: 'Xiaomi', scale: 1.5 }, // square logo on small canvas
  { name: 'Geely', scale: 0.8 }, // wide wordmark
  { name: 'CATL', scale: 0.75 } // wide wordmark
  ];

  return (
    <section style={{ padding: '40px 0 56px', background: '#fff', borderTop: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)' }}>
      <div className="container" data-comment-anchor="2828f3f8ee-div-38-7">
        <div style={{ marginBottom: 28 }}>
          <div className="section-eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '0 0 12px' }}>
            <span style={{ display: 'inline-block', width: 16, height: 1, background: 'var(--fg-3)' }}></span>
            Meine Audience
          </div>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(22px, 2.2vw, 28px)', fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.015em', lineHeight: 1.25, margin: 0, maxWidth: 760 }}>
            Ich erreiche über 90.000 Automotive-Entscheider.{' '}
            <span style={{ color: 'var(--fg-3)' }}>Hier arbeiten sie:</span>
          </p>
        </div>

        <div className="logo-wall">
          {audience.map((l) =>
          <LogoTile key={l.name} name={l.name} scale={l.scale} />
          )}
          <MoreTile />
        </div>
      </div>

      <style>{`
        .logo-wall {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 0;
        }
        .logo-tile {
          background: #fff;
          height: 96px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 20px;
          position: relative;
          border-right: 1px solid var(--border-default);
          transition: background 200ms var(--ease-out);
          overflow: hidden;
        }
        .logo-tile:nth-child(6n) { border-right: 0; }
        .logo-tile:nth-child(n+7) { border-top: 1px solid var(--border-default); }
        .logo-tile .logo-frame {
          /* Fixed normalized box every logo lives in. object-fit:contain + a per-logo
             scale transform on the inner img makes wildly-different SVG canvases read
             at the same optical size. */
          width: 140px;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .logo-tile img {
          max-width: 100%;
          max-height: 100%;
          width: auto;
          height: auto;
          object-fit: contain;
          filter: grayscale(1) contrast(0.85) brightness(0.95);
          opacity: 0.62;
          transition: filter 200ms var(--ease-out), opacity 200ms var(--ease-out);
        }
        .logo-tile:hover img {
          filter: grayscale(0) contrast(1) brightness(1);
          opacity: 1;
        }
        @media (max-width: 720px) {
          .logo-tile .logo-frame { width: 110px; height: 36px; }
        }
        .logo-tile:hover { background: var(--bg-page); }

        .logo-tile.more .partner-name {
          font-family: var(--font-serif);
          font-style: italic;
          font-weight: 500;
          font-size: 15px;
          color: var(--ap-blue);
        }

        @media (max-width: 1024px) {
          .logo-wall { grid-template-columns: repeat(4, 1fr); }
          .logo-tile:nth-child(6n) { border-right: 1px solid var(--border-default); }
          .logo-tile:nth-child(4n) { border-right: 0; }
          .logo-tile:nth-child(n+5) { border-top: 1px solid var(--border-default); }
        }
        @media (max-width: 720px) {
          .logo-wall { grid-template-columns: repeat(3, 1fr); }
          .logo-tile { height: 76px; padding: 0 10px; }
          .logo-tile:nth-child(4n) { border-right: 1px solid var(--border-default); }
          .logo-tile:nth-child(3n) { border-right: 0; }
          .logo-tile:nth-child(n+4) { border-top: 1px solid var(--border-default); }
        }
        @media (max-width: 460px) {
          .logo-wall { grid-template-columns: repeat(2, 1fr); }
          .logo-tile:nth-child(3n) { border-right: 1px solid var(--border-default); }
          .logo-tile:nth-child(2n) { border-right: 0; }
          .logo-tile:nth-child(n+3) { border-top: 1px solid var(--border-default); }
        }
      `}</style>
    </section>);

}

function LogoTile({ name, scale = 1 }) {
  return (
    <div className="logo-tile" title={name}>
      <div className="logo-frame">
        <img
          src={`assets/logos/readers/${name}.svg`}
          alt={name}
          loading="lazy"
          style={{ transform: `scale(${scale})`, transformOrigin: 'center' }} />
        
      </div>
    </div>);

}

function MoreTile() {
  return (
    <div className="logo-tile more" title="und viele mehr">
      <span className="partner-name">+ viele mehr</span>
    </div>);

}

window.LogoBar = LogoBar;