import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const logos = [
  {
    name: "Astro",
    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
  },
  {
    name: "Vercel",
    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
  },
  {
    name: "Supabase",
    logo: "/block-media/shadcnblocks/block/logos/supabase-wordmark.svg",
  },
  {
    name: "Figma",
    logo: "/block-media/shadcnblocks/block/logos/figma-wordmark.svg",
  },
  {
    name: "Astro",
    logo: "/block-media/shadcnblocks/block/logos/nextjs-wordmark.svg",
  },
  {
    name: "Vercel",
    logo: "/block-media/shadcnblocks/block/logos/github-wordmark.svg",
  },
  {
    name: "Astro",
    logo: "/block-media/shadcnblocks/block/logos/sketch-wordmark.svg",
  },
  {
    name: "Supabase",
    logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
  },
];

interface Logos4Props {
  className?: string;
}

const Logos4 = ({ className }: Logos4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="text-center">
          <Badge variant="outline">شرکای معرفی</Badge>
          <h1 className="mx-auto mt-8 mb-5 max-w-3xl text-xl font-bold text-balance md:text-2xll">
            به شبکه شرکای ما بپیوندید. با ما رشد کنید.
          </h1>
          <p className="mx-auto max-w-3xl text-xl font-medium text-balance">
            با شرکت‌های پیشرو صنعت همکاری کنید، فرصت‌های جدید باز کنید و
            رشد کسب‌وکار خود را سرعت ببخشید.
          </p>
          <Button size="lg" className="mt-8">شریک ما شوید</Button>
        </div>
      </div>
      <div className="mx-auto mt-24 grid max-w-5xl grid-cols-2 place-items-center gap-x-4 gap-y-6 md:grid-cols-3 lg:grid-cols-4 lg:gap-6">
        {logos.map((logo) => (
          <img
            className="grayscale"
            src={logo.logo}
            key={logo.logo}
            alt={`لوگوی ${logo.name}`}
            width={144}
            height={80}
          />
        ))}
      </div>
    </section>
  );
};

export { Logos4 };