export interface Brand {
  src: string;
  alt: string;
}

export interface BrandsStripProps {
  /** Small uppercase title, e.g. "Marken, mit denen wir arbeiten". */
  title?: string;
  /** White-on-transparent manufacturer logos (702x190 px assets), five per row. */
  brands: Brand[];
}

/**
 * The one dark band of the page (`.kwac-brands`): near-black background, small
 * gray uppercase title and a five-column row of white manufacturer logos at 90%
 * opacity. Three columns below 740px, two below 400px.
 */
export function BrandsStrip({ title = 'Marken, mit denen wir arbeiten', brands }: BrandsStripProps) {
  return (
    <section className="kwac-brands" aria-label="Hersteller und Qualitätsmarken">
      <p className="kwac-brands-title">{title}</p>
      <div className="kwac-brands-row">
        {brands.map((b) => (
          <img key={b.src} src={b.src} width={702} height={190} loading="lazy" alt={b.alt} />
        ))}
      </div>
    </section>
  );
}