const brands = ["loops", "pwc", "resend", "udio", "krea", "gopuff"];

export function Brands() {
  return (
    <div className="py-24">
      <div className="max-w-screen-xl mx-auto px-4 lg:px-8">
        <p className="max-w-sm mx-auto text-pretty text-center font-medium mb-6 md:text-lg">
          Trusted and loved by fast-growing companies worldwide
        </p>

        <div className="max-w-xs mx-auto grid grid-cols-2 items-center md:grid-cols-3 md:max-w-lg lg:grid-cols-6 lg:max-w-3xl">
          {brands.map((brand) => (
            <div key={brand} className="flex items-center justify-center">
              <img
                className="h-14 w-auto"
                alt={`${brand} logo`}
                src={`https://assets.rapidui.dev/brands/${brand}.svg`}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}