reui-blocks/blocks/feature205.tsx

import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
import { ScrollBar } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const TABS = [
  {
    value: "efficiency",
    label: "تیکت",
    title: "تاریخچه مشتری",
    description:
      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
    image:
      "/block-media/shadcnblocks/block/photos/annie-spratt-hCb3lIB8L8E-unsplash.jpg",
    imageAlt: "مدیریت تیکت",
    stats: [
      { value: "رضایت مشتری", label: "مرکز تماس" },
      {
        value: "پشتیبانی مشتری",
        label: "تیکت",
      },
    ],
  },
  {
    value: "collaboration",
    label: "رضایت مشتری",
    title: "صندوق یکپارچه",
    description:
      "همه کانال‌های ارتباطی را در یک محیط مدیریت کنید و هیچ پیامی گم نشود.",
    image:
      "/block-media/shadcnblocks/block/photos/annie-spratt-MChSQHxGZrQ-unsplash.jpg",
    imageAlt: "داشبورد رضایت",
    stats: [
      { value: "۳×", label: "مرکز تماس" },
      { value: "پشتیبانی مشتری", label: "تیکت" },
    ],
  },
  {
    value: "insights",
    label: "رضایت مشتری",
    title: "اولویت‌بندی تیکت",
    description:
      "تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.",
    image:
      "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg",
    imageAlt: "مرکز پشتیبانی مشتری",
    stats: [
      { value: "مرکز تماس", label: "پشتیبانی مشتری" },
      { value: "تیکت", label: "رضایت مشتری" },
    ],
  },
] as const;

interface Feature205Props {
  className?: string;
}

const Feature205 = ({ className }: Feature205Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Tabs
          dir="rtl"
          defaultValue="efficiency"
          className="grid grid-cols-1 gap-8 rounded-4xl border border-border p-4 lg:grid-cols-2 lg:p-8 xl:gap-20"
        >
          <div className="flex flex-col-reverse justify-between gap-8 lg:flex-col">
            <div className="text-right">
              {TABS.map((tab) => (
                <TabsContent
                  key={tab.value}
                  value={tab.value}
                  className="flex animate-in flex-col gap-6 duration-300 fade-in"
                >
                  <span className="text-xs text-muted-foreground">{tab.label}</span>
                  <div className="flex flex-col gap-4">
                    <h2 className="text-3xl font-medium text-balance">
                      {tab.title}
                    </h2>
                    <p className="text-pretty text-muted-foreground">
                      {tab.description}
                    </p>
                  </div>
                </TabsContent>
              ))}
            </div>
            <ScrollableTabsList>
              <TabsList className="mx-auto h-12 overflow-y-hidden rounded-full lg:ms-0 lg:me-auto">
                {TABS.map((tab) => (
                  <TabsTrigger
                    key={tab.value}
                    value={tab.value}
                    className="h-full rounded-full px-4 py-2"
                  >
                    {tab.label}
                  </TabsTrigger>
                ))}
              </TabsList>
              <ScrollBar orientation="horizontal" className="h-2" />
            </ScrollableTabsList>
          </div>
          <div>
            {TABS.map((tab) => (
              <TabsContent
                key={tab.value}
                value={tab.value}
                className="animate-in duration-300 fade-in"
              >
                <div className="relative">
                  <img
                    src={tab.image}
                    alt={tab.imageAlt}
                    className="h-[440px] w-full rounded-3xl object-cover lg:h-[540px]"
                  />
                  <div className="absolute inset-0 rounded-3xl bg-linear-to-tr from-primary/80 via-transparent to-transparent rtl:bg-linear-to-tl" />
                  <div className="absolute bottom-0 start-0 flex flex-col justify-center gap-8 p-6 text-right text-background">
                    {tab.stats.map((stat) => (
                      <div key={stat.label} className="flex flex-col gap-1.5">
                        <p className="text-xl font-medium lg:text-2xll">
                          {stat.value}
                        </p>
                        <p className="font-medium">{stat.label}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </TabsContent>
            ))}
          </div>
        </Tabs>
      </div>
    </section>
  );
};

export { Feature205 };