reui-blocks/blocks/feature69.tsx

"use client";

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

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

const features = [
  {
    id: "feature-1",
    title: "تحلیل کانال",
    description:
      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    href: "#",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    id: "feature-2",
    title: "اتوماسیون ایمیل",
    description:
      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
    href: "#",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    id: "feature-3",
    title: "A/B تست",
    description:
      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
    href: "#",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
];

interface Feature69Props {
  className?: string;
}

const Feature69 = ({ className }: Feature69Props) => {
  const [selection, setSelection] = useState(0);
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    carouselApi.scrollTo(selection);
  }, [carouselApi, selection]);
  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    const updateSelection = () => {
      setSelection(carouselApi.selectedScrollSnap());
    };
    carouselApi.on("select", updateSelection);
    return () => {
      carouselApi.off("select", updateSelection);
    };
  }, [carouselApi]);
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-8 md:flex-row-reverse">
          <div className="aspect-5/6 overflow-clip rounded-3xl bg-accent">
            <Carousel
              setApi={setCarouselApi}
              className="h-full w-full [&>div]:h-full"
              opts={{ direction: "rtl" }}
            >
              <CarouselContent className="mx-0 h-full w-full">
                {features.map((feature) => (
                  <CarouselItem key={feature.id} className="px-0">
                    <img
                      src={feature.image}
                      alt={`نمای ${feature.title}`}
                      className="h-full w-full object-cover object-center"
                    />
                  </CarouselItem>
                ))}
              </CarouselContent>
            </Carousel>
          </div>
          <div className="flex shrink-0 flex-col md:w-1/2 md:ps-8 lg:ps-24 lg:text-start 2xl:ps-32">
            <h2 className="mb-6 text-3xl font-bold text-pretty lg:text-2xll">
              کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
            </h2>
            <p className="mb-16 text-muted-foreground lg:text-xl">
              با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
            </p>
            <ul className="space-y-2">
              {features.map((feature, i) => (
                <li
                  key={feature.id}
                  className="group relative w-full cursor-pointer px-6 py-3 transition data-open:bg-accent"
                  data-open={selection === i ? "true" : undefined}
                  onClick={() => setSelection(i)}
                >
                  <div className="flex items-center justify-between gap-x-2">
                    <div className="text-sm font-semibold text-accent-foreground">
                      {feature.title}
                    </div>
                    <div className="flex size-8 items-center justify-center rounded-full bg-accent text-accent-foreground group-hover:bg-primary group-hover:text-primary-foreground group-data-open:bg-primary group-data-open:text-primary-foreground">
                      <ChevronDown className="size-4 shrink-0 transition-transform duration-200 group-data-open:rotate-180" />
                    </div>
                  </div>
                  <div className="hidden text-sm font-medium group-data-open:block">
                    <p className="my-4 text-muted-foreground lg:my-6">
                      {feature.description}
                    </p>
                    <a
                      href={feature.href}
                      className="group/link flex items-center pb-3 text-sm text-accent-foreground"
                    >
                      بیشتر بدانید
                      <ArrowRight className="ms-2 size-4 transition-transform group-hover/link:translate-x-1 rtl:rotate-180 rtl:group-hover/link:-translate-x-1" />
                    </a>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature69 };