reui-blocks/blocks/feature312.tsx

import { CirclePlus } from "lucide-react";

import { cn } from "@/lib/utils";

type StatCard = {
  value: string;
  label: string;
  description?: string;
  logos?: string[];
};

interface Feature312Props {
  sectionLabel?: string;
  heading: string;
  subheading?: string;
  descriptionHeading?: string;
  description?: string;
  image: string;
  imageAlt?: string;
  stats: StatCard[];
  className?: string;
}

const Feature312 = ({
  sectionLabel = "فرایند هوشمند",
  heading = "فرایندها را استاندارد و سریع کنید",
  subheading = "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
  descriptionHeading = "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
  description = "قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.",
  image = "/block-media/shadcnblocks/block/guri3/img9.jpeg",
  imageAlt = "سازنده گردش‌کار",
  stats = [
    {
      value: "اتوماسیون",
      label: "گردش‌کار",
      description:
        "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    },
    {
      value: "صرفه‌جویی زمان",
      label: "فرایند هوشمند",
      logos: [
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
        "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg",
      ],
    },
  ],
  className,
}: Feature312Props) => {
  const logoAlts = ["اتوماسیون را در کل سازمان یکپارچه کنید", "اتوماسیون", "گردش‌کار"];

  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted py-24", className)}>
      <div className="container mx-auto flex max-w-7xl flex-col gap-2 md:gap-30">
        <div className="flex flex-col gap-2 md:grid md:auto-rows-[minmax(0,1fr)] md:grid-cols-[repeat(4,minmax(50px,1fr))] md:grid-rows-[repeat(1,minmax(0,1fr))] md:gap-8">
          <div className="flex items-center gap-2 text-xs font-bold md:text-sm">
            <CirclePlus size={20} className="shrink-0" />
            <span>{sectionLabel}</span>
          </div>

          <div className="col-span-3 max-w-3xl text-right">
            <h2 className="text-xl leading-tight font-bold tracking-tight text-balance md:text-xl">
              {heading}
              <span className="block font-semibold text-muted-foreground">
                {subheading}
              </span>
            </h2>
          </div>
        </div>

        <div className="relative flex flex-col gap-4 md:grid md:auto-rows-[minmax(0,1fr)] md:grid-cols-[repeat(4,minmax(50px,1fr))] md:grid-rows-[repeat(1,minmax(0,1fr))] md:gap-10">
          <div className="relative h-full w-full overflow-hidden rounded-2xl border-2 border-muted bg-background md:col-span-2">
            <img
              src={image}
              alt={imageAlt}
              className="aspect-video h-full w-full object-cover"
            />
            <div className="absolute top-10 end-10">
              <CirclePlus size={20} />
            </div>
          </div>

          <div className="col-span-2 flex flex-col gap-16">
            <div className="w-5/6">
              <p className="col-span-3 text-right text-xl font-medium text-pretty">
                {descriptionHeading}
                <span className="text-muted-foreground">{description}</span>
              </p>
            </div>

            <div className="grid grid-cols-1 gap-1 md:grid-cols-2">
              <div className="order-1 rounded-2xl bg-background p-8 md:order-1">
                <div className="flex items-start justify-between">
                  <div className="text-xs text-muted-foreground">۱</div>
                  <div className="text-3xl font-bold md:text-2xll">
                    {stats[0]?.value}
                  </div>
                </div>
              </div>

              <div className="order-3 rounded-2xl bg-background p-8 md:order-2">
                <div className="flex items-start justify-between">
                  <div className="text-xs text-muted-foreground">۲</div>
                  <div className="text-3xl font-bold md:text-2xll">
                    {stats[1]?.value}
                  </div>
                </div>
              </div>

              <div className="order-2 flex min-h-80 flex-col justify-between gap-16 rounded-2xl bg-background p-8 md:order-3">
                <div className="text-right">
                  <div className="text-lg font-bold text-pretty md:w-3/4">
                    {stats[0]?.label}
                  </div>
                </div>
                <div className="text-right text-pretty text-muted-foreground">
                  {stats[0]?.description}
                </div>
              </div>

              <div className="order-4 flex h-80 h-full flex-col justify-between gap-16 rounded-2xl bg-background p-8 md:order-4">
                <div className="text-right">
                  <div className="text-lg font-bold text-pretty md:w-3/4">
                    {stats[1]?.label}
                  </div>
                </div>
                <div className="flex justify-start gap-3 text-muted-foreground">
                  {stats[1]?.logos?.map((logo, index) => (
                    <div key={logo}>
                      <img
                        src={logo}
                        alt={logoAlts[index] ?? `لوگوی شرکت همکار ${index + 1}`}
                        className="h-6 w-14"
                      />
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature312 };