"use client";

import { cn } from "@/lib/utils";
const ITEMS = [
  {
    name: "Zarinpal",
    src: "/block-media/shadcnblocks/block/mainline/logos/mercury.svg",
    width: 143,
    height: 26,
    href: "https://www.zarinpal.com/",
  },
  {
    name: "Watershed",
    src: "/block-media/shadcnblocks/block/mainline/logos/watershed.svg",
    width: 154,
    height: 31,
    href: "https://watershed.com",
  },
  {
    name: "Retool",
    src: "/block-media/shadcnblocks/block/mainline/logos/retool.svg",
    width: 113,
    height: 22,
    href: "https://retool.com",
  },
  {
    name: "Descript",
    src: "/block-media/shadcnblocks/block/mainline/logos/descript.svg",
    width: 112,
    height: 27,
    href: "https://descript.com",
  },
  {
    name: "Perplexity",
    src: "/block-media/shadcnblocks/block/mainline/logos/perplexity.svg",
    width: 141,
    height: 32,
    href: "https://perplexity.ai",
  },
  {
    name: "Monzo",
    src: "/block-media/shadcnblocks/block/mainline/logos/monzo.svg",
    width: 104,
    height: 18,
    href: "https://monzo.com",
  },
  {
    name: "Ramp",
    src: "/block-media/shadcnblocks/block/mainline/logos/ramp.svg",
    width: 105,
    height: 28,
    href: "https://ramp.com",
  },
  {
    name: "Raycast",
    src: "/block-media/shadcnblocks/block/mainline/logos/raycast.svg",
    width: 128,
    height: 33,
    href: "https://raycast.com",
  },
  {
    name: "Arc",
    src: "/block-media/shadcnblocks/block/mainline/logos/arc.svg",
    width: 90,
    height: 28,
    href: "https://arc.com",
  },
];

interface Logos7Props {
  className?: string;
}

const Logos7 = ({ className }: Logos7Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden bg-muted py-32 dark:bg-muted", className)}
    >
      <div className="container text-center">
        <h2 className="text-xl font-semibold tracking-tight text-balance lg:text-3xl">
          پشتوانه بهترین تیم‌های محصول جهان.
          <br />
          <span className="text-muted-foreground">
            از استارتاپ‌های نسل جدید تا شرکت‌های تثبیت‌شده.
          </span>
        </h2>
      </div>

      <div className="relative mt-10">
        <div className="flex w-full">
          {/* First marquee group */}
          <div
            className="flex shrink-0 animate-marquee items-center gap-12 rtl:[animation-direction:reverse]"
          >
            {ITEMS.map((logo, index) => (
              <a href={logo.href} target="_blank" key={index} className="p-6">
                <img
                  src={logo.src}
                  alt={`لوگوی ${logo.name}`}
                  width={logo.width}
                  height={logo.height}
                  className="object-contain transition-opacity hover:opacity-70"
                />
              </a>
            ))}
          </div>
          {/* Second marquee group */}
          <div
            className="flex shrink-0 animate-marquee items-center gap-12 rtl:[animation-direction:reverse]"
          >
            {ITEMS.map((logo, index) => (
              <a href={logo.href} target="_blank" key={index} className="p-6">
                <img
                  src={logo.src}
                  alt={`لوگوی ${logo.name}`}
                  width={logo.width}
                  height={logo.height}
                  className="object-contain transition-opacity hover:opacity-70"
                />
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Logos7 };