import { PartnerLogoPlaceholder } from "@/components/brand/PartnerLogoPlaceholder";
import { WavyContourLinesBackground } from "@/components/brand/WavyContourLinesBackground";

export function PartnerMarquee() {
  const slots = Array.from({ length: 8 }, (_, i) => i);

  return (
    <section className="section-white relative overflow-hidden border-y border-border bg-white py-8 text-[#0d3d26]">
      <WavyContourLinesBackground className="z-0" />
      <p className="relative z-10 mb-6 text-center text-xs font-semibold uppercase tracking-widest text-[#3d5248]">
        With the support of
      </p>
      <div className="relative z-10 overflow-hidden">
        <div className="marquee flex shrink-0 items-center gap-8">
          {[...slots, ...slots].map((i) => (
            <PartnerLogoPlaceholder key={i} size="sm" className="shrink-0" />
          ))}
        </div>
      </div>
    </section>
  );
}