import React from "react";

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

const FEATURES = [
  {
    id: "collaboration",
    title: "مدیریت محصول",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
    imageAlt: "مدیریت سفارش",
  },
  {
    id: "interface",
    title: "پرداخت امن",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
    imageAlt: "داشبورد فروش",
  },
  {
    id: "integrations",
    title: "ردیابی سفارش",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
    imageAlt: "پنل فروشگاه آنلاین",
  },
  {
    id: "analytics",
    title: "تخفیف هوشمند",
    description:
      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-xYFl3Q9am1E-unsplash.jpg",
    imageAlt: "مدیریت سفارش",
  },
] as const;

const Feature244 = () => {
  return (
    <section dir="rtl" lang="fa" className="bg-background">
      <div className="container py-32">
        <div className="mb-16 max-w-2xl space-y-8 ps-4 text-start">
          <h2 className="text-2xll font-bold tracking-tighter text-balance text-foreground md:text-2xll">
            فروش آنلاین را مقیاس‌پذیر کنید
          </h2>
          <p className="text-lg tracking-tight text-pretty text-muted-foreground md:text-xl">
            مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
          </p>
        </div>

        <Carousel
          opts={{
            align: "start",
            loop: true,
            direction: "rtl",
          }}
          className="w-full"
        >
          <CarouselContent className="p-2">
            {FEATURES.map((item) => (
              <CarouselItem key={item.id} className="md:basis-1/2 lg:basis-1/3">
                <DottedDiv className="group h-[500px] place-self-end p-4">
                  <Card className="size-full shrink-0 rounded-lg border border-border bg-muted">
                    <CardContent className="relative flex h-full flex-col items-center justify-center gap-6 p-6">
                      <img
                        src={item.image}
                        alt={item.imageAlt}
                        className="mb-4 size-40 rounded-lg object-cover"
                      />
                      <h3 className="mb-2 text-center text-xl font-medium tracking-tighter text-balance text-foreground md:text-3xl">
                        {item.title}
                      </h3>
                      <p className="text-center text-base tracking-tight text-pretty text-muted-foreground md:text-lg">
                        {item.description}
                      </p>
                    </CardContent>
                  </Card>
                </DottedDiv>
              </CarouselItem>
            ))}
          </CarouselContent>
          <div className="my-3 flex justify-end gap-3 pe-5">
            <CarouselPrevious className="static m-0 size-12 translate-y-0 p-0" />
            <CarouselNext
              variant="default"
              className="static size-12 translate-y-0"
            />
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Feature244 };

const DottedDiv = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => (
  <div className={cn("relative", className)}>
    <div className="absolute top-4 -start-0 h-px w-[115%] bg-muted" />
    <div className="absolute bottom-4 -start-0 h-px w-[115%] 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>
);