import { ArrowRight } from "lucide-react";
import React from "react";

import { ThreeDMarquee } from "@/components/aceternity/3d-marquee";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero239Props {
  className?: string;
}

const Hero239 = ({ className }: Hero239Props) => {
  const images = [
    "/block-media/shadcnblocks/block/guri3/img1.jpeg",
    "/block-media/shadcnblocks/block/guri3/img2.jpeg",
    "/block-media/shadcnblocks/block/guri3/img3.jpeg",
    "/block-media/shadcnblocks/block/guri3/img4.jpeg",
    "/block-media/shadcnblocks/block/guri3/img5.jpeg",
    "/block-media/shadcnblocks/block/guri3/img6.jpeg",
    "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    "/block-media/shadcnblocks/block/guri3/img8.jpeg",
    "/block-media/shadcnblocks/block/guri3/img9.jpeg",
    "/block-media/shadcnblocks/block/guri3/img10.jpeg",
    "/block-media/shadcnblocks/block/guri3/img11.jpeg",
    "/block-media/shadcnblocks/block/guri3/img12.jpeg",
    "/block-media/shadcnblocks/block/guri3/img13.jpeg",
    "/block-media/shadcnblocks/block/guri3/img14.jpeg",
    "/block-media/shadcnblocks/block/guri3/img15.jpeg",
    "/block-media/shadcnblocks/block/guri3/img16.jpeg",
    "/block-media/shadcnblocks/block/guri3/img17.jpeg",
    "/block-media/shadcnblocks/block/guri3/img18.jpeg",
    "/block-media/shadcnblocks/block/guri3/img19.jpeg",
    "/block-media/shadcnblocks/block/guri3/img20.jpeg",
    "/block-media/shadcnblocks/block/guri3/img21.jpeg",
    "/block-media/shadcnblocks/block/guri3/img22.jpeg",
    "/block-media/shadcnblocks/block/guri3/img23.jpeg",
    "/block-media/shadcnblocks/block/guri3/img24.jpeg",
    "/block-media/shadcnblocks/block/guri3/img25.jpeg",
    "/block-media/shadcnblocks/block/guri3/img26.jpeg",
    "/block-media/shadcnblocks/block/guri3/img27.jpeg",
    "/block-media/shadcnblocks/block/guri3/img1.jpeg",
    "/block-media/shadcnblocks/block/guri3/img2.jpeg",
    "/block-media/shadcnblocks/block/guri3/img3.jpeg",
    "/block-media/shadcnblocks/block/guri3/img4.jpeg",
    "/block-media/shadcnblocks/block/guri3/img5.jpeg",
    "/block-media/shadcnblocks/block/guri3/img6.jpeg",
    "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    "/block-media/shadcnblocks/block/guri3/img8.jpeg",
    "/block-media/shadcnblocks/block/guri3/img9.jpeg",
  ];

  return (
    <section className={cn("relative py-32", className)}>
      <div className="container flex flex-col items-center justify-center gap-5 text-center">
        <p className="w-fit rounded-full bg-muted px-4 py-1 text-sm uppercase">
          ری یو آی
        </p>
        <h1 className="mt-3 max-w-xl text-2xll font-medium font-semibold tracking-tighter lg:max-w-3xl lg:text-2xll">
          با یک بار خرید به تمام کامپوننت‌های حرفه‌ای دسترسی داشته باشید
                          </h1>
        <p className="max-w-xl text-muted-foreground">
          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
                          </p>
        <div className="flex items-center gap-4">
          <Button>شروع رایگان</Button>
          <Button variant="ghost">
            مشاهده امکانات <ArrowRight className="rtl:rotate-180" />
          </Button>
        </div>

        <div className="mt-15 flex h-full w-full items-center justify-center">
          <ThreeDMarquee className="rounded-none" images={images} />
        </div>
      </div>
    </section>
  );
};

export { Hero239 };