/* "Auswahl meiner Werbepartner" strip — sits before Packages.
   20 named partners + 1 "und weitere" tile = 21 = 7x3 grid (matches LogoBar pattern).
*/
function PartnerStrip() {
  const partners = [
    'Berylls', 'Exxeta', 'thoughtworks', 'Cognizant',
    'Box', 'Nagarro', 'adesso', 'Atreus',
    'Siemens', 'Mobile.de', 'Aurora Labs', 'Momenta',
    'Catena-X', 'ZYT', 'useblocks', 'Informatica',
    'Waygate', 'digital.auto', 'EuroCarBody', 'INNO Tape',
  ];

  return (
    <section style={{ padding: '40px 0 56px', background: 'var(--bg-page)', borderTop: '1px solid var(--border-default)', borderBottom: '1px solid var(--border-default)' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginBottom: 28, flexWrap: 'wrap' }}>
          <div className="section-eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 10, margin: 0 }}>
            <span style={{ display: 'inline-block', width: 16, height: 1, background: 'var(--fg-3)' }}></span>
            Auswahl meiner Werbepartner
          </div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', fontStyle: 'italic' }}>
            Eine Auswahl. Vollständige Liste auf Anfrage.
          </div>
        </div>

        <div className="partner-wall">
          {partners.map(name => (
            <div key={name} className="partner-tile" title={name}>
              <span className="partner-name">{name}</span>
            </div>
          ))}
          <div className="partner-tile more" title="und weitere">
            <span className="partner-name">+ und weitere</span>
          </div>
        </div>
      </div>

      <style>{`
        .partner-wall {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 0;
        }
        .partner-tile {
          background: #fff;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 16px;
          position: relative;
          border-right: 1px solid var(--border-default);
        }
        .partner-tile:nth-child(7n) { border-right: 0; }
        .partner-tile:nth-child(n+8) { border-top: 1px solid var(--border-default); }
        .partner-tile .partner-name {
          font-family: var(--font-sans);
          font-size: 13px;
          font-weight: 600;
          color: var(--fg-3);
          text-align: center;
          letter-spacing: -0.005em;
          line-height: 1.2;
          transition: color 200ms var(--ease-out);
        }
        .partner-tile:hover .partner-name { color: var(--fg-1); }
        .partner-tile.more .partner-name {
          font-family: var(--font-serif);
          font-style: italic;
          font-weight: 500;
          font-size: 14px;
          color: var(--ap-blue);
        }

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

window.PartnerStrip = PartnerStrip;