reui-blocks/blocks/feature192.tsx

"use client";

import { type SVGProps, useId, useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    id: "move-money",
    title: "طبقه‌بندی خودکار",
    description: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "card-program",
    title: "پیش‌بینی ریزش",
    description: "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "پیشنهادهای هوشمند",
  },
  {
    id: "lend-money",
    title: "جستجوی معنایی",
    description: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "تحلیل با AI",
  },
  {
    id: "data-analytics",
    title: "تولید محتوا",
    description: "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "compliance",
    title: "تحلیل احساس",
    description: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    imageAlt: "پیشنهادهای هوشمند",
  },
];

interface Feature192Props {
  className?: string;
}

const Feature192 = ({ className }: Feature192Props) => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "container w-full min-w-0 max-w-5xl overflow-x-hidden py-32",
        className,
      )}
    >
      <div className="relative overflow-hidden rounded-3xl border bg-linear-to-bl from-gradient-1/20 to-transparent py-5 rtl:bg-linear-to-br sm:py-6 lg:py-8">
        <div className="absolute inset-0 z-[-1]">
          <PlusSigns className="h-full w-full text-foreground/[0.05]" />
        </div>
        <div className="min-w-0 sm:px-6 lg:px-8">
          <div className="px-5 text-start sm:px-0">
            <h3 className="font-mono text-sm font-semibold text-accent-foreground">
              دستیار گفتگو
            </h3>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-xl lg:text-2xll">
              با هوش مصنوعی سریع‌تر تصمیم بگیرید
            </h2>
          </div>
          <div className="mt-10 flex min-w-0 gap-8 overflow-hidden sm:mt-16 sm:gap-12 lg:mt-20">
            <Accordion
              type="single"
              className="min-w-0 flex-1"
              defaultValue="0"
              onValueChange={(value) => setSelectedIndex(Number(value))}
            >
              {FEATURES.map((feature, index) => (
                <AccordionItem
                  key={feature.id}
                  value={index.toString()}
                  className="border-black/20 dark:border-white/20"
                >
                  <AccordionTrigger className="px-5 text-start hover:no-underline sm:px-0">
                    <span className="text-lg font-bold opacity-80 sm:text-xl">
                      {feature.title}
                    </span>
                  </AccordionTrigger>
                  <AccordionContent>
                    <p className="px-5 text-pretty leading-relaxed font-medium text-muted-foreground sm:px-0">
                      {feature.description}
                    </p>
                    <div className="mt-4 overflow-hidden ps-5 sm:hidden">
                      <img
                        src={feature.image}
                        alt={feature.imageAlt}
                        className="h-[200px] w-full max-w-full rounded-2xl object-cover shadow-lg sm:h-[240px]"
                      />
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
            <div className="relative hidden min-w-0 flex-1 sm:block">
              <img
                src={FEATURES[selectedIndex].image}
                alt={FEATURES[selectedIndex].imageAlt}
                className="h-auto w-full max-w-full rounded-2xl object-cover shadow-lg"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

interface PlusSignsProps extends SVGProps<SVGSVGElement> {
  className?: string;
}

const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
  const GAP = 16;
  const STROKE_WIDTH = 1;
  const PLUS_SIZE = 6;
  const id = useId();
  const patternId = `plus-pattern-${id}`;

  return (
    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
      <defs>
        <pattern
          id={patternId}
          x="0"
          y="0"
          width={GAP}
          height={GAP}
          patternUnits="userSpaceOnUse"
        >
          <line
            x1={GAP / 2}
            y1={(GAP - PLUS_SIZE) / 2}
            x2={GAP / 2}
            y2={(GAP + PLUS_SIZE) / 2}
            stroke="currentColor"
            strokeWidth={STROKE_WIDTH}
          />
          <line
            x1={(GAP - PLUS_SIZE) / 2}
            y1={GAP / 2}
            x2={(GAP + PLUS_SIZE) / 2}
            y2={GAP / 2}
            stroke="currentColor"
            strokeWidth={STROKE_WIDTH}
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
    </svg>
  );
};

export { Feature192 };