import { Marquee } from "@/components/ui/logo-marquee";
import Image from "next/image";

const companies = [
  { url: "/images/svg/googleplus logo.svg" },
  { url: "/images/svg/linkedin-plain-wordmark logo.svg" },
  { url: "/images/svg/metallb-horizontal-white logo.svg" },
  { url: "/images/svg/microsoft logo.svg" },
  // add more logopngeeded
];

const SocialProff = () => {
  return (
    <section
      id="logos"
      className="tab:px-6 relative z-20 mx-auto w-full max-w-[1420px] py-2 sm:px-2.5 lg:px-0"
    >
      <div className="tab:flex-row flex w-full flex-col items-center justify-between gap-2 md:gap-0">
        <h3 className="font-switzer leading-b2 tab:w-3/12 tab:text-left tab:px-0 text-xl font-semibold text-black sm:w-full sm:px-7 sm:text-center lg:w-2/12">
          Trusted by more than <span className="text-black">5k+</span> satisfied
          clients
        </h3>
        <div className="tab:w-8/12 relative mt-2 overflow-hidden sm:w-full">
          <Marquee gap="3rem" className="max-w-full [--duration:10s]">
            {companies.map((company, idx) => (
              <Image
                key={idx}
                width={112}
                height={42}
                src={company.url}
                className="w-full object-contain grayscale transition-all duration-300 hover:grayscale-0 sm:h-10 md:h-10"
                alt={`Company logo ${idx + 1}`}
              />
            ))}
          </Marquee>

          {/* left gradient fade */}
          <div className="pointer-events-none absolute inset-y-0 left-0 h-full w-1/4 bg-gradient-to-r from-white to-transparent"></div>

          {/* right gradient fade */}
          <div className="pointer-events-none absolute inset-y-0 right-0 h-full w-1/4 bg-gradient-to-l from-white to-transparent"></div>
        </div>
      </div>
    </section>
  );
};

export default SocialProff;