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

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

const CAROUSEL_ITEMS = [
  {
    id: "performance",
    year: "تحلیل داده",
    month: "داشبورد",
    title: "گزارش زمان‌بندی‌شده",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    imageSrc:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
    imageAlt: "گزارش عملکرد",
  },
  {
    id: "react",
    year: "شاخص کلیدی",
    month: "بینش لحظه‌ای",
    title: "تحلیل کوHORT",
    description:
      "داده را بر اساس محصول، منطقه یا کانال برش دهید و الگو پیدا کنید.",
    imageSrc:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
    imageAlt: "داشبورد تحلیل داده",
  },
  {
    id: "frontend",
    year: "تحلیل داده",
    month: "داشبورد",
    title: "مقایسه دوره‌ای",
    description:
      "تغییرات مهم را در طول زمان دنبال کنید و نقطه عطف را شناسایی کنید.",
    imageSrc:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-xYFl3Q9am1E-unsplash.jpg",
    imageAlt: "نمودار شاخص کلیدی",
  },
  {
    id: "ui-ux",
    year: "شاخص کلیدی",
    month: "مه",
    title: "خروجی گزارش",
    description:
      "وقتی شاخص از حد مجاز گذشت، فوراً مطلع شوید.",
    imageSrc:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
    imageAlt: "گزارش عملکرد",
  },
  {
    id: "components",
    year: "بینش لحظه‌ای",
    month: "تحلیل داده",
    title: "داشبورد سفارشی",
    description:
      "ویجت‌های موردنیاز هر تیم را بچینید و فقط معیارهای مرتبط را ببینید.",
    imageSrc:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-majMgWtrF48-unsplash.jpg",
    imageAlt: "داشبورد تحلیل داده",
  },
] as const;

const Feature240 = () => {
  return (
    <section dir="rtl" lang="fa" className="bg-background py-32">
      <div className="relative container">
        <h1 className="z-10 mb-10 text-center text-2xll font-bold tracking-tighter text-balance text-foreground">
          داده پراکنده را به تصمیم تبدیل کنید
        </h1>

        <Carousel
          opts={{
            align: "start",
            loop: true,
            direction: "rtl",
          }}
          className="w-full"
        >
          <CarouselContent className="py-5">
            {CAROUSEL_ITEMS.map((item) => (
              <CarouselItem
                key={item.id}
                className="select-none text-background md:basis-1/2 lg:basis-1/3 dark:text-foreground"
              >
                <DottedDiv className="group h-150 w-full place-self-end p-4">
                  <div className="relative size-full bg-muted/50 p-4 transition-all ease-in-out group-hover:bg-muted">
                    <div className="relative size-full overflow-hidden rounded-3xl">
                      <img
                        src={item.imageSrc}
                        alt={item.imageAlt}
                        className="size-full object-cover transition-all ease-in-out group-hover:scale-125"
                      />
                      <div className="absolute inset-0 bg-linear-to-t from-black/80 via-transparent to-transparent" />
                    </div>

                    <div className="absolute top-4 -ms-4 flex size-full flex-col items-center justify-between p-10">
                      <p className="flex w-full items-center text-xl tracking-tighter">
                        {item.year}
                        <span className="mx-2 h-2.5 w-px bg-background dark:bg-foreground" />
                        {item.month}
                      </p>
                      <div className="flex flex-col items-center justify-center">
                        <h2 className="text-center text-xl font-semibold tracking-tight text-balance xl:text-2xll">
                          {item.title}
                        </h2>
                        <div className="mt-2 h-1 w-6 rounded-full bg-background" />
                        <p className="mt-10 max-w-sm px-2 text-center text-pretty leading-5 font-light tracking-tighter text-background/80 dark:text-foreground/80">
                          {item.description}
                        </p>
                      </div>
                      <a
                        href="#"
                        className="group mb-6 flex cursor-pointer flex-col items-center justify-center"
                      >
                        <ChevronUp
                          size={30}
                          className="transition-all ease-in-out group-hover:-translate-y-2"
                        />
                        <p className="text-xl tracking-tight">مشاهده همه</p>
                      </a>
                    </div>
                  </div>
                </DottedDiv>
              </CarouselItem>
            ))}
          </CarouselContent>

          <div className="mt-5 flex justify-end gap-3">
            <CarouselPrevious className="static size-12" />
            <CarouselNext variant="default" className="static size-12" />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature240 };

const DottedDiv = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => (
  <div className={cn("relative", className)}>
    <div className="absolute top-4 -start-[28px] h-px w-full bg-muted" />
    <div className="absolute bottom-4 -start-[28px] h-px w-full bg-muted" />
    <div className="absolute -top-25 start-4 h-[130%] w-px bg-muted" />
    <div className="absolute -top-25 end-4 h-[130%] w-px bg-muted" />
    <div className="absolute start-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
    <div className="absolute end-[12.5px] top-[12.5px] z-10 size-2 rounded-full bg-foreground" />
    <div className="absolute start-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
    <div className="absolute end-[12.5px] bottom-[12.5px] z-10 size-2 rounded-full bg-foreground" />
    {children}
  </div>
);