import {
  Marquee,
  MarqueeContent,
  MarqueeFade,
  MarqueeItem,
} from "@/components/kibo-ui/marquee";
import { Globe } from "@/components/magicui/globe";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero249Props {
  className?: string;
}

const LOGOS = [
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-9.svg",
  },
  {
    src: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-10.svg",
  },
];

const Hero249 = ({ className }: Hero249Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container grid xl:grid-cols-2 xl:gap-16">
          <div className="flex flex-col justify-between gap-6 py-12 text-start">
            <h1 className="text-xl font-medium tracking-tight text-balance text-foreground md:text-2xll lg:text-2xll">
              در سراسر جهان ارتباط بگیرید، همکاری کنید و رشد کنید{" "}
              <span className="text-muted-foreground">
                با ابزارهایی که سراسر دنیا را پوشش می‌دهند.
              </span>
            </h1>
            <div className="flex max-w-xl flex-col gap-6">
              <p className="text-muted-foreground md:text-lg">
                یک پلتفرم یکپارچه برای همکاری تیم‌های بین‌المللی، مدیریت پروژه‌ها و ارتباط مؤثر در هر منطقه زمانی.
                                            </p>
              <p className="md:text-lg">
                ابزارهای همکاری، ارتباطات و مدیریت پروژه را در یک محیط واحد در اختیار تیم خود قرار دهید.
                                            </p>
              <Button size="lg" className="w-fit">
                رزرو دمو
              </Button>
            </div>
          </div>
          <div className="relative flex min-h-[320px] items-center justify-center">
            <Globe className="static max-w-full" />
          </div>
        </div>
      </div>
      <div className="border-b">
        <div className="container grid items-center gap-10 py-12 lg:grid-cols-2 lg:gap-16">
          <p className="text-center text-sm lg:text-start lg:text-base">
            تیم‌هایی که از مرزها فراتر ارتباط می‌گیرند و رشد می‌کنند
          </p>
          <Marquee className="relative">
            <MarqueeContent>
              {LOGOS.map((logo, index) => (
                <MarqueeItem key={index}>
                  <img
                    src={logo.src}
                    alt={`لوگوی ${(index + 1).toLocaleString("fa-IR")}`}
                    className="mx-6 h-6 max-w-24 object-contain opacity-80 grayscale md:h-7 dark:invert"
                  />
                </MarqueeItem>
              ))}
            </MarqueeContent>
            <MarqueeFade side="left" />
            <MarqueeFade side="right" />
          </Marquee>
        </div>
      </div>
    </section>
  );
};

export { Hero249 };