reui-blocks/blocks/feature186.tsx

"use client";

import { Database, LockKeyhole, Sparkles } from "lucide-react";
import React, { useState } from "react";

import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

interface DataItem {
  id: string;
  title: string;
  description: string;
  image: string;
  imageAlt: string;
  icon: React.ReactNode;
}

const DATA: DataItem[] = [
  {
    id: "feature-1",
    title: "پروفایل ۳۶۰ درجه مشتری",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
    icon: <Sparkles className="size-5 text-white sm:size-6" />,
  },
  {
    id: "feature-2",
    title: "اتوماسیون مراحل فروش",
    description:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    imageAlt: "نمای پایپ‌لاین فروش",
    icon: <Database className="size-5 text-white sm:size-6" />,
  },
  {
    id: "feature-3",
    title: "پیش‌بینی درآمد",
    description:
      "بر اساس داده واقعی پایپ‌لاین، درآمد ماه‌های آینده را با اطمینان بیشتر تخمین بزنید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    imageAlt: "پروفایل یکپارچه مشتری",
    icon: <LockKeyhole className="size-5 text-white sm:size-6" />,
  },
];

interface Feature186Props {
  className?: string;
}

const Feature186 = ({ className }: Feature186Props) => {
  const [selection, setSelection] = useState(DATA[0].id);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full max-w-full overflow-x-hidden py-16 md:py-32",
        className,
      )}
    >
      <div
        className="absolute inset-x-0 top-0 z-0 h-[min(800px,100%)] w-full [mask-image:radial-gradient(ellipse_at_center,white_20%,transparent_70%)] bg-repeat opacity-30"
        style={{
          backgroundImage:
            "url('/block-media/shadcnblocks/block/patterns/architect.svg')",
          backgroundSize: "60px",
        }}
      />
      <div className="relative z-10 container min-w-0 px-4 sm:px-6">
        <div className="min-w-0 text-right">
          <h2 className="text-xl font-medium text-balance sm:text-2xll lg:text-2xll">
            هر سرنخ را تا قرارداد دنبال کنید
          </h2>
          <p className="mt-4 max-w-3xl text-sm text-pretty text-muted-foreground sm:text-base md:text-lg">
            تمام تعاملات، سرنخ‌ها و قراردادها در یک فضای کاری متمرکز جمع می‌شود.
            تیم فروش بدون جابجایی بین ابزارها، سریع‌تر پیش‌بینی می‌کند و معاملات
            بیشتری می‌بندد.
          </p>

          <div className="mt-6 min-w-0 lg:mt-8">
            <Tabs
              dir="rtl"
              value={selection}
              onValueChange={setSelection}
              className="w-full min-w-0 gap-4"
            >
              <TabsList className="flex h-auto! w-full min-w-0 flex-wrap justify-start gap-2 bg-transparent p-0 sm:gap-3">
                {DATA.map((feature) => (
                  <TabsTrigger
                    key={feature.id}
                    value={feature.id}
                    className="h-auto! flex-none max-w-full px-3 py-2 text-xs whitespace-normal sm:text-sm"
                  >
                    {feature.title}
                  </TabsTrigger>
                ))}
              </TabsList>

              <div className="relative w-full min-w-0">
                {DATA.map((feature) => (
                  <TabsContent
                    key={feature.id}
                    value={feature.id}
                    className="mt-0 min-w-0"
                  >
                    <div className="flex w-full min-w-0 flex-col gap-4 rounded-lg bg-accent p-4 sm:gap-6 sm:p-6 md:p-10 lg:p-14 lg:px-24">
                      <div className="w-full min-w-0 max-w-md text-right">
                        <div className="flex size-10 items-center justify-center rounded-full bg-black sm:size-12">
                          {feature.icon}
                        </div>
                        <div className="mt-4 space-y-2 sm:mt-6 md:mt-8">
                          <h3 className="text-lg font-bold text-pretty sm:text-xl">
                            {feature.title}
                          </h3>
                          <p className="text-sm text-pretty text-muted-foreground sm:text-base lg:text-lg">
                            {feature.description}
                          </p>
                        </div>
                      </div>
                      <div className="w-full min-w-0 overflow-hidden rounded-lg">
                        <img
                          src={feature.image}
                          alt={feature.imageAlt}
                          className="aspect-video h-auto w-full max-w-full object-cover object-center sm:aspect-[16/10]"
                        />
                      </div>
                    </div>
                  </TabsContent>
                ))}
              </div>

              <div className="flex justify-center gap-1 py-1 sm:hidden">
                {DATA.map((feature) => (
                  <Button
                    key={feature.id}
                    variant="ghost"
                    size="sm"
                    className="size-8 px-0"
                    aria-label={feature.title}
                    onClick={() => setSelection(feature.id)}
                  >
                    <span
                      className={cn(
                        "size-2 rounded-full",
                        feature.id === selection ? "bg-primary" : "bg-input",
                      )}
                    />
                  </Button>
                ))}
              </div>
            </Tabs>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature186 };