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

const logos = [
  "/block-media/shadcnblocks/block/block-1.svg",
  "/block-media/shadcnblocks/block/block-2.svg",
  "/block-media/shadcnblocks/block/block-3.svg",
  "/block-media/shadcnblocks/block/block-4.svg",
  "/block-media/shadcnblocks/block/block-5.svg",
  "/block-media/shadcnblocks/block/block-1.svg",
  "/block-media/shadcnblocks/block/block-2.svg",
  "/block-media/shadcnblocks/block/block-3.svg",
];

interface Feature90Props {
  className?: string;
}

const Feature90 = ({ className }: Feature90Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted/10 py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
          <h2 className="mb-2 text-center text-xl font-extrabold text-balance lg:text-2xll">
            رتبه کلمات کلیدی را پیگیری کنید
          </h2>
          <p className="text-center text-lg text-muted-foreground lg:text-xl">
            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
          </p>
          <Button variant="outline" className="mt-6">
            ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.
          </Button>
        </div>
        <div className="my-14">
          <div className="flex justify-center">
            {logos.map((logo, index) => (
              <span
                key={`${logo}-${index}`}
                className={cn(
                  "flex aspect-square h-[13vw] min-h-10 shrink-0 items-center justify-center rounded-full border-2 border-background bg-muted md:h-28",
                  index > 0 && "-ms-4 sm:-ms-5",
                )}
              >
                <img
                  src={logo}
                  alt={`لوگوی یکپارچه‌سازی ${(index + 1).toLocaleString("fa-IR")}`}
                  className="h-auto w-[8vw] max-w-12 md:w-12"
                />
              </span>
            ))}
          </div>
        </div>
        <div className="text-center text-sm">
          ترافیک ارگانیک
          <a href="#" className="ms-1 font-bold underline">
            با SEO دقیق‌تر رشد کنید
          </a>
        </div>
      </div>
    </section>
  );
};

export { Feature90 };