import React from "react";

const logos = [
  "launchpad",
  "northbeam",
  "scaleops",
  "pathfinder",
  "catalyst",
  "orbit",
];

const LogoCloud: React.FC = () => {
  return (
    <section className="py-12 bg-white">
      <div className="max-w-6xl mx-auto px-6">
        <div className="flex flex-col gap-6 items-center">
          <span className="text-xs uppercase tracking-[0.28em] text-gray-500 font-medium">
            Trusted by modern organic teams
          </span>
          <div className="flex flex-wrap justify-center gap-8 md:gap-12 items-center">
            {logos.map((name) => (
              <div
                key={name}
                className="h-8 md:h-10 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
              >
                <img
                  src={`/marketing/images/logo-${name}.svg`}
                  alt={`${name} logo`}
                  className="h-full w-auto"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default LogoCloud;