import { ArrowRight, Flame } from "lucide-react";

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

const cards = [
  {
    title: "لاگ اجرا",
    description:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    wide: false,
  },
  {
    title: "قالب آماده",
    description: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    wide: true,
  },
  {
    title: "اتصال ابزار",
    description:
      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    wide: false,
  },
  {
    title: "سازنده گردش‌کار",
    description: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    wide: false,
  },
  {
    title: "تریگر رویداد",
    description: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
    wide: false,
  },
];

function FeatureCard({
  title,
  description,
  image,
  wide,
}: (typeof cards)[number]) {
  return (
    <a
      href="#"
      className={cn(
        "flex flex-col rounded-lg border",
        wide && "justify-between lg:col-span-2",
      )}
    >
      <div className="flex justify-between p-6">
        <div className="flex flex-col gap-1 text-start">
          <h3 className="font-medium md:text-lg">{title}</h3>
          <p className="text-sm text-muted-foreground md:text-base">
            {description}
          </p>
        </div>
        <span className="flex size-10 shrink-0 items-center justify-center rounded-full border">
          <ArrowRight className="h-auto w-4 -rotate-45 rtl:rotate-[135deg]" />
        </span>
      </div>
      <div className="rounded-lg p-1">
        <img
          src={image}
          alt={`نمای ${title}`}
          className={cn(
            "max-h-72 rounded-lg border object-cover",
            wide ? "h-full w-full" : "size-full",
          )}
        />
      </div>
    </a>
  );
}

interface Feature134Props {
  className?: string;
}

const Feature134 = ({ className }: Feature134Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4">
          <Badge
            variant="outline"
            className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
          >
            <Flame className="h-auto w-4" />
            فرایند هوشمند
          </Badge>
          <h2 className="text-center text-3xl font-semibold lg:text-xl">
            فرایندها را استاندارد و سریع کنید
          </h2>
          <p className="text-center text-muted-foreground lg:text-lg">
            اتوماسیون را در کل سازمان یکپارچه کنید
          </p>
        </div>
        <div className="mt-14 grid gap-5 lg:grid-cols-3">
          {cards.map((card) => (
            <FeatureCard key={card.title} {...card} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature134 };