"use client";

import AutoScroll from "embla-carousel-auto-scroll";
import { ArrowRight } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

interface Hero230Props {
  className?: string;
}

const Hero230 = ({ className }: Hero230Props) => {
  const images = [
    "/block-media/shadcnblocks/block/lummi/random14.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
    "/block-media/shadcnblocks/block/lummi/random11.jpeg",
    "/block-media/shadcnblocks/block/lummi/landscape5.jpeg",
    "/block-media/shadcnblocks/block/lummi/random15.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
    "/block-media/shadcnblocks/block/lummi/person1.jpeg",
    "/block-media/shadcnblocks/block/lummi/person2.jpeg",
    "/block-media/shadcnblocks/block/lummi/person3.jpeg",
    "/block-media/shadcnblocks/block/lummi/random1.jpeg",
    "/block-media/shadcnblocks/block/lummi/random11.jpeg",
    "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    "/block-media/shadcnblocks/block/lummi/random3.jpeg",
  ];
  const logos = [
    {
      id: "logo-1",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-2",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-3",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-4",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-5",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-6",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
      className: "h-5 w-auto",
    },
    {
      id: "logo-7",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-8",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-1",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-2",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-3",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-4",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-5",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-6",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg",
      className: "h-5 w-auto",
    },
    {
      id: "logo-7",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg",
      className: "h-7 w-auto",
    },
    {
      id: "logo-8",
      description: "لوگوی شریک",
      image:
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg",
      className: "h-7 w-auto",
    },
  ];
  return (
    <section className={cn("py-32", className)}>
      <div className="container flex flex-col items-center justify-center gap-4 text-center">
        <Button
          variant="secondary"
          className="group flex w-fit items-center justify-center gap-3 rounded-full bg-muted/70 px-5 py-1"
        >
          <span className="size-2.5 rounded-full bg-foreground" />
          پلن مناسب برای هر تیم
                          </Button>
        <h1 className="font-calSans max-w-3xl text-2xll font-medium tracking-tight text-foreground md:text-2xll">
          مجموعه بلاک‌های آماده <br /> برای رابط کاربری و استایل‌دهی مدرن
                          </h1>
        <p className="mt-3 max-w-xl text-muted-foreground/80">
          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
                          </p>
        <div className="mt-8 mb-12 flex gap-4">
          <Button
            variant="secondary"
            className="group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
          >
            <span>مشاهده مستندات</span>
            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
          </Button>
          <Button
            variant="default"
            className="group flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
          >
            <span>شروع رایگان</span>
            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
          </Button>
        </div>

        <div className="relative mx-auto flex items-center justify-center">
          <Carousel
            plugins={[
              AutoScroll({
                speed: 1,
                startDelay: 0,
                playOnInit: true,
                stopOnInteraction: false,
                stopOnMouseEnter: false,
              }),
            ]}
            opts={{ loop: true, align: "start" }}
          >
            <CarouselContent className="ms-0">
              {logos.map((logo, index) => (
                <CarouselItem
                  key={index}
                  className="relative me-6 flex h-15 basis-1/2 justify-center ps-0 opacity-30 sm:basis-1/4 md:basis-1/3 lg:basis-1/9"
                >
                  <div className="flex flex-col items-center justify-center">
                    <img
                      src={logo.image}
                      alt={logo.description}
                      className={logo.className}
                    />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <div className="bg-gradient-t o-r absolute inset-y-0 left-0 w-32 from-background to-transparent"></div>
          <div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent"></div>
        </div>
        <div className="relative mx-auto -mt-12 flex items-center justify-center">
          <Carousel
            plugins={[
              AutoScroll({
                speed: 1,
                startDelay: 0,
                playOnInit: true,
                stopOnInteraction: false,
                stopOnMouseEnter: false,
              }),
            ]}
            opts={{ loop: true, align: "start" }}
          >
            <CarouselContent>
              {images.map((image, index) => (
                <CarouselItem
                  key={index}
                  className="relative flex basis-1/2 translate-y-18 cursor-grab justify-center active:cursor-grabbing sm:basis-1/4 md:basis-1/3 lg:basis-1/5"
                >
                  <div className="easeOut mt-auto w-full overflow-hidden rounded-t-3xl border transition-all hover:-translate-y-18">
                    <img
                      src={image}
                      alt="تصویر نمونه"
                      className="h-full w-full object-cover"
                    />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
        </div>
      </div>
    </section>
  );
};

export { Hero230 };