reui-blocks/blocks/projects17a.tsx

"use client";

import { ArrowLeft, ArrowRight } from "lucide-react";
import { useEffect, useState } from "react";

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

const projects17aProp = [
  {
    id: 1,
    title: "افزایش ۴۰٪ نرخ تبدیل",
    location: "شرکت SaaS B2B",
    year: "۱۴۰۳",
    category: "سامانه مدیریت ارتباط با مشتری",
    description:
      "پیاده‌سازی امتیازدهی لید و اتوماسیون ایمیل که نرخ تبدیل را از ۸٪ به ۲۲٪ رساند.",
    image:
      "/block-media/shadcnblocks/block/photos/jeremy-bishop-iEjCQtcsVPY-unsplash.jpg",
  },
  {
    id: 2,
    title: "کاهش ۶۰٪ زمان پاسخ",
    location: "تیم پشتیبانی ۵۰ نفره",
    year: "۱۴۰۳",
    category: "پشتیبانی",
    description:
      "یکپارچه‌سازی سامانه مدیریت ارتباط با مشتری با سیستم تیکتینگ و خودکارسازی پاسخ به سوالات متداول.",
    image:
      "/block-media/shadcnblocks/block/photos/ivan-bandura-hqnUYXsN5oY-unsplash.jpg",
  },
  {
    id: 3,
    title: "داشبورد فروش یکپارچه",
    location: "استارتاپ فناوری",
    year: "۱۴۰۲",
    category: "تحلیل",
    description:
      "ساخت داشبورد KPI برای نمایش درآمد، قیف فروش و پیش‌بینی فصلی در یک نما.",
    image:
      "/block-media/shadcnblocks/block/photos/ivan-bandura-3QqzCTIfUJI-unsplash.jpg",
  },
  {
    id: 4,
    title: "خودکارسازی کمپین ایمیل",
    location: "آژانس بازاریابی",
    year: "۱۴۰۲",
    category: "بازاریابی",
    description:
      "راه‌اندازی ۱۲ جریان ایمیل هدفمند با نرخ باز شدن ۲۶٪ و کلیک ۸٪.",
    image:
      "/block-media/shadcnblocks/block/photos/kevin-charit-1fL2Q1JcbNc-unsplash.jpg",
  },
  {
    id: 5,
    title: "بهینه‌سازی SEO",
    location: "فروشگاه آنلاین",
    year: "۱۴۰۳",
    category: "سئو",
    description:
      "افزایش ترافیک ارگانیک ۸۵٪ با استراتژی محتوا و بهینه‌سازی فنی در ۶ ماه.",
    image:
      "/block-media/shadcnblocks/block/photos/ines-alvarez-fdez-VjRc6HDXJ5s-unsplash.jpg",
  },
  {
    id: 6,
    title: "گزارش عملکرد فصلی",
    location: "شرکت سازمانی",
    year: "۱۴۰۲",
    category: "گزارش‌گیری",
    description:
      "گزارش تحلیلی سه‌ماهه با بررسی MRR، churn rate و LTV برای هیئت‌مدیره.",
    image:
      "/block-media/shadcnblocks/block/photos/john-murphey-ZWUWSEY6OGk-unsplash.jpg",
  },
];

interface Projects17aProps {
  className?: string;
}

const Projects17a = ({ className }: Projects17aProps) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);

  useEffect(() => {
    if (!carouselApi) return;
    const updateSelection = () => {
      setCanScrollPrev(carouselApi.canScrollPrev());
      setCanScrollNext(carouselApi.canScrollNext());
    };
    updateSelection();
    carouselApi.on("select", updateSelection);
    return () => {
      carouselApi.off("select", updateSelection);
    };
  }, [carouselApi]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
      <div className="w-full">
        <div className="mb-16 px-8 text-start">
          <h1 className="text-3xl font-medium tracking-tight lg:text-6xl">
            پروژه‌ها
          </h1>
          <p className="mt-4 text-lg text-muted-foreground">
            مطالعات موردی با چیدمان مینیمال
          </p>
        </div>
        <div className="relative w-full">
          <Carousel
            dir="rtl"
            setApi={setCarouselApi}
            opts={{
              align: "start",
              direction: "rtl",
              loop: false,
              breakpoints: {
                "(max-width: 768px)": {
                  dragFree: true,
                },
              },
            }}
            className="w-full"
          >
            <CarouselContent>
              {projects17aProp.map((project) => (
                <CarouselItem key={project.id} className="basis-auto ps-8">
                  <div className="w-[700px] space-y-4 text-start">
                    <div className="aspect-video overflow-hidden rounded-xl">
                      <img
                        src={project.image || "/placeholder.svg"}
                        alt={project.title}
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <div className="space-y-3">
                      <div className="flex items-center justify-between gap-4">
                        <h2 className="text-2xl font-normal tracking-tight">
                          {project.title}
                        </h2>
                        <span className="shrink-0 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary">
                          {project.category}
                        </span>
                      </div>
                    </div>
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>
          </Carousel>
          <div className="pointer-events-none absolute inset-x-4 inset-y-0 top-52 z-10 flex justify-between">
            <Button
              size="icon"
              variant="outline"
              onClick={() => carouselApi?.scrollPrev()}
              disabled={!canScrollPrev}
              className="pointer-events-auto ms-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white"
            >
              <ArrowRight className="h-5 w-5" />
              <span className="sr-only">اسلاید قبلی</span>
            </Button>
            <Button
              size="icon"
              variant="outline"
              onClick={() => carouselApi?.scrollNext()}
              disabled={!canScrollNext}
              className="pointer-events-auto me-4 h-12 w-12 rounded-full border-gray-200 bg-white/90 hover:bg-white"
            >
              <ArrowLeft className="h-5 w-5" />
              <span className="sr-only">اسلاید بعدی</span>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Projects17a };