"use client";

import React, { useState } from "react";

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

const SLIDES = [
  {
    name: "کاوه مرادی",
    content:
      "معماری مدرن و قابلیت‌های پیشرفته این پلتفرم، زمان توسعه API‌های سازمانی ما را ۴۰٪ کاهش داد و کیفیت کد را به‌طور قابل‌توجهی ارتقا بخشید.",
    logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark-black.svg",
    logoAlt: "لوگوی Laravel",
    logoClass: "h-10 md:h-12",
    imageAlt: "نمونه کار توسعه وب با Laravel",
    images: [
      { src: "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg", position: 0 },
      { src: "/block-media/shadcnblocks/block/photos/fabian-centeno-njeVb6E3XB8-unsplash.jpg", position: 2 },
      { src: "/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg", position: 5 },
      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 3 },
      { src: "/block-media/shadcnblocks/block/photos/tirza-van-dijk-o1SKqmgSDbg-unsplash.jpg", position: 1 },
      { src: "/block-media/shadcnblocks/block/photos/studio-kealaula-IVZ_XAoZF3s-unsplash.jpg", position: 6 },
      { src: "/block-media/shadcnblocks/block/photos/annie-spratt-hCb3lIB8L8E-unsplash.jpg", position: 4 },
      { src: "/block-media/shadcnblocks/block/photos/stephen-dawson-qwtCeJ5cLYs-unsplash.jpg", position: 7 },
      { src: "/block-media/shadcnblocks/block/photos/vitaly-gariev-y7xUr3aDLXc-unsplash.jpg", position: 8 },
    ],
  },
  {
    name: "مهسا نوری",
    content:
      "پیاده‌سازی استراتژی دیجیتال مارکتینگ به‌صورت داده‌محور، نرخ تبدیل ما را در ۶ ماه ۴۰٪ افزایش داد و هزینه جذب مشتری ۳۵٪ کاهش یافت.",
    logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark-black.svg",
    logoAlt: "لوگوی Tailwind CSS",
    logoClass: "h-6 md:h-8",
    imageAlt: "نمونه کار طراحی رابط کاربری",
    images: [
      { src: "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg", position: 1 },
      { src: "/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg", position: 3 },
      { src: "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg", position: 5 },
      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 4 },
      { src: "/block-media/shadcnblocks/block/photos/tirza-van-dijk-o1SKqmgSDbg-unsplash.jpg", position: 0 },
      { src: "/block-media/shadcnblocks/block/photos/studio-kealaula-IVZ_XAoZF3s-unsplash.jpg", position: 6 },
      { src: "/block-media/shadcnblocks/block/photos/stephen-dawson-qwtCeJ5cLYs-unsplash.jpg", position: 7 },
      { src: "/block-media/shadcnblocks/block/photos/vitaly-gariev-y7xUr3aDLXc-unsplash.jpg", position: 8 },
      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 2 },
    ],
  },
  {
    name: "امیر محمدی",
    content:
      "داشبورد تحلیلی یکپارچه با ارائه بینش‌های بلادرنگ، به تیم مدیریتی امکان تصمیم‌گیری سریع‌تر و دقیق‌تر را داد و هماهنگی بین واحدها را بهبود بخشید.",
    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
    logoAlt: "لوگوی Vercel",
    logoClass: "h-6 md:h-8",
    imageAlt: "نمونه کار استقرار و زیرساخت ابری",
    images: [
      { src: "/block-media/shadcnblocks/block/photos/redd-f-5U_28ojjgms-unsplash.jpg", position: 0 },
      { src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg", position: 2 },
      { src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-xxa7qYObMrI-unsplash.jpg", position: 3 },
      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 4 },
      { src: "/block-media/shadcnblocks/block/photos/tirza-van-dijk-o1SKqmgSDbg-unsplash.jpg", position: 5 },
      { src: "/block-media/shadcnblocks/block/photos/studio-kealaula-IVZ_XAoZF3s-unsplash.jpg", position: 6 },
      { src: "/block-media/shadcnblocks/block/photos/stephen-dawson-qwtCeJ5cLYs-unsplash.jpg", position: 7 },
      { src: "/block-media/shadcnblocks/block/photos/vitaly-gariev-y7xUr3aDLXc-unsplash.jpg", position: 8 },
      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 9 },
      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 1 },

    ],
  },
];

interface CaseStudies5Props {
  className?: string;
}

const CaseStudies5 = ({ className }: CaseStudies5Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-background py-32", className)}
    >
      <div className="container">
        <Carousel
          dir="rtl"
          className="w-full"
          opts={{
            loop: true,
            direction: "rtl",
          }}
        >
          <CarouselContent className="m-0">
            {SLIDES.map((slide, index) => (
              <CarouselItem key={index} className="p-0">
                <div className="flex flex-col md:flex-row">
                  <div className="w-full p-4 md:w-1/2">
                    <div className="grid h-[400px] grid-cols-3 grid-rows-3 gap-1">
                      {Array.from({ length: 9 }).map((_, idx) => {
                        const image = slide.images.find((img) => img.position === idx);
                        return (
                          <div
                            key={idx}
                            className="overflow-hidden rounded-md bg-muted"
                          >
                            {image && (
                              <img
                                src={image.src}
                                alt={slide.imageAlt}
                                className="h-full w-full object-cover"
                              />
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                  <div className="flex w-full flex-col justify-center p-8 md:w-1/2">
                    <img
                      src={slide.logo}
                      alt={slide.logoAlt}
                      className={cn("mb-6", slide.logoClass)}
                    />
                    <p className="mb-6 leading-relaxed text-muted-foreground">
                      {slide.content}
                    </p>
                    <p className="font-medium">{slide.name}</p>
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious className="!left-auto !-right-12 rtl:rotate-180" />
          <CarouselNext className="!right-auto !-left-12 rtl:rotate-180" />
        </Carousel>
      </div>
    </section>
  );
};

export { CaseStudies5 };