reui-blocks/blocks/feature206.tsx

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

type GridImage = {
  id: string;
  type: "image";
  src: string;
  alt: string;
  orderClass: string;
};

type GridCard = {
  id: string;
  type: "card";
  title: string;
  description: string;
  linkLabel: string;
  orderClass: string;
  variant: "muted" | "accent" | "accent-muted";
};

type GridItem = GridImage | GridCard;

const GRID_ITEMS: GridItem[] = [
  {
    id: "image-1",
    type: "image",
    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-ee1-cRqJQtA-unsplash.jpg",
    alt: "دستیار هوش مصنوعی",
    orderClass: "md:order-1 xl:order-1",
  },
  {
    id: "smart-solutions",
    type: "card",
    title: "تحلیل احساس",
    description:
      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
    linkLabel: "اتوماسیون AI",
    orderClass: "md:order-2 xl:order-2",
    variant: "muted",
  },
  {
    id: "image-2",
    type: "image",
    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-Ych4LcKFA5E-unsplash.jpg",
    alt: "پیشنهادهای هوشمند",
    orderClass: "md:order-4 xl:order-3",
  },
  {
    id: "advanced-analytics",
    type: "card",
    title: "دستیار گفتگو",
    description:
      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
    linkLabel: "دستیار کسب‌وکار",
    orderClass: "md:order-3 xl:order-4",
    variant: "accent",
  },
  {
    id: "image-3",
    type: "image",
    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-8FIN2qa2vQM-unsplash.jpg",
    alt: "تحلیل با AI",
    orderClass: "md:order-5 xl:order-6",
  },
  {
    id: "custom-integration",
    type: "card",
    title: "خلاصه‌سازی هوشمند",
    description:
      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
    linkLabel: "هوش مصنوعی",
    orderClass: "md:order-6 xl:order-5",
    variant: "accent-muted",
  },
  {
    id: "expert-support",
    type: "card",
    title: "پیشنهاد پاسخ",
    description:
      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
    linkLabel: "پیشنهاد هوشمند",
    orderClass: "md:order-7",
    variant: "muted",
  },
  {
    id: "image-4",
    type: "image",
    src: "/block-media/shadcnblocks/block/photos/simone-hutsch-ZXLGP2Qh3Mo-unsplash.jpg",
    alt: "دستیار هوش مصنوعی",
    orderClass: "md:order-8",
  },
];

const cardVariantClasses: Record<
  GridCard["variant"],
  { container: string; title: string; description: string; link: string }
> = {
  muted: {
    container: "bg-muted/50",
    title: "",
    description: "text-muted-foreground",
    link: "",
  },
  accent: {
    container: "bg-[#d1efef]",
    title: "text-white",
    description: "text-white/80",
    link: "text-white/80",
  },
  "accent-muted": {
    container: "bg-[#d1efef]",
    title: "",
    description: "text-muted-foreground",
    link: "",
  },
};

interface Feature206Props {
  className?: string;
}

const Feature206 = ({ className }: Feature206Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-6 text-center">
          <Badge variant="outline" className="rounded-full">
            اتوماسیون AI
          </Badge>
          <h2 className="text-xl font-medium text-balance md:text-2xll">
            با هوش مصنوعی سریع‌تر تصمیم بگیرید
          </h2>
          <p className="max-w-2xl text-lg text-pretty text-muted-foreground">
            مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
          </p>
        </div>
        <div className="mt-16 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {GRID_ITEMS.map((item) => {
            if (item.type === "image") {
              return (
                <img
                  key={item.id}
                  src={item.src}
                  alt={item.alt}
                  className={cn(
                    "aspect-square size-full rounded-2xl object-cover",
                    item.orderClass,
                  )}
                />
              );
            }

            const styles = cardVariantClasses[item.variant];

            return (
              <div
                key={item.id}
                className={cn(
                  "flex flex-col justify-between gap-20 rounded-2xl p-12 text-start md:gap-32",
                  styles.container,
                  item.orderClass,
                )}
              >
                <h3 className={cn("text-xl", styles.title)}>{item.title}</h3>
                <div>
                  <p className={cn("mb-8 text-pretty", styles.description)}>
                    {item.description}
                  </p>
                  <a href="#" className={cn("text-sm underline", styles.link)}>
                    {item.linkLabel}
                  </a>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature206 };