"use client";

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

const cardsData = [
  {
    title: "تریگر رویداد",
    description:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "سازنده گردش‌کار",
    imageClassName: "aspect-[1.45] h-full w-full object-cover",
  },
  {
    title: "شرط هوشمند",
    description:
      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "نمای اتوماسیون فرایند",
    imageClassName:
      "aspect-[1.5] h-full w-full object-cover lg:aspect-[2.4]",
  },
  {
    title: "اعلان خودکار",
    description:
      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "لاگ اجرای خودکار",
    imageClassName: "aspect-[1.7] h-full w-full object-cover lg:w-2/3",
  },
];

interface Feature146Props {
  className?: string;
}

const Feature146 = ({ className }: Feature146Props) => {
  const [card1, card2, card3] = cardsData;

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-24 flex flex-col items-center justify-between gap-6 lg:flex-row">
          <div className="text-3xl font-medium md:w-1/2 lg:w-3/5 lg:text-center lg:text-2xll">
            <h1 className="text-muted-foreground">فرایندها را استاندارد و سریع کنید</h1>
            <h1>اتوماسیون را در کل سازمان یکپارچه کنید</h1>
          </div>
          <div className="text-start text-lg font-medium md:w-1/2 lg:w-2/5 lg:text-xl">
            خطای انسانی را در کارهای روزمره کم کنید
          </div>
        </div>
        <div className="flex justify-center">
          <div className="relative flex w-full flex-col border border-solid border-muted-foreground/30 md:w-1/2 lg:w-full">
            <div className="relative flex flex-col lg:flex-row">
              <div className="absolute top-0 start-[-50px] h-px w-12 border-b border-dashed border-b-muted-foreground/30" />
              <div className="absolute top-[-50px] start-0 h-12 w-px border-e border-dashed border-e-muted-foreground/30" />
              <div className="absolute top-0 end-[-50px] h-px w-12 border-b border-dashed border-b-muted-foreground/30" />
              <div className="absolute top-[-50px] end-0 h-12 w-px border-e border-dashed border-e-muted-foreground/30" />
              <div className="flex flex-col justify-between gap-8 border-b border-solid border-muted-foreground/30 p-10 lg:w-2/5 lg:border-e lg:border-b-0">
                <div>
                  <h2 className="font-semibold">{card1.title}</h2>
                  <p className="text-muted-foreground">{card1.description}</p>
                </div>

                <img
                  src={card1.image}
                  alt={card1.imageAlt}
                  className={card1.imageClassName}
                />
              </div>
              <div className="flex flex-col justify-between gap-8 p-10 lg:w-3/5">
                <div>
                  <h2 className="font-semibold">{card2.title}</h2>
                  <p className="text-muted-foreground">{card2.description}</p>
                </div>

                <img
                  src={card2.image}
                  alt={card2.imageAlt}
                  className={card2.imageClassName}
                />
              </div>
            </div>
            <div className="relative border-t border-solid border-muted-foreground/30">
              <div className="absolute bottom-0 start-[-50px] h-px w-12 border-b border-dashed border-b-muted-foreground/30" />
              <div className="absolute bottom-[-50px] start-0 h-12 w-px border-e border-dashed border-e-muted-foreground/30" />
              <div className="absolute end-[-50px] bottom-0 h-px w-12 border-b border-dashed border-b-muted-foreground/30" />
              <div className="absolute end-0 bottom-[-50px] h-12 w-px border-e border-dashed border-e-muted-foreground/30" />
              <div className="flex flex-col gap-8 p-10 lg:flex-row lg:items-center">
                <div className="lg:w-1/3">
                  <h2 className="font-semibold">{card3.title}</h2>
                  <p className="text-muted-foreground">{card3.description}</p>
                </div>

                <img
                  src={card3.image}
                  alt={card3.imageAlt}
                  className={card3.imageClassName}
                />
              </div>
            </div>
            <img
              src="/block-media/shadcnblocks/block/patterns/cross-pattern.svg"
              alt="سازنده گردش‌کار"
              className="absolute top-[-4px] start-[-6px] w-3"
            />
            <img
              src="/block-media/shadcnblocks/block/patterns/cross-pattern.svg"
              alt="نمای اتوماسیون فرایند"
              className="absolute top-[-4px] end-[-6px] w-3"
            />
            <img
              src="/block-media/shadcnblocks/block/patterns/cross-pattern.svg"
              alt="لاگ اجرای خودکار"
              className="absolute bottom-[-8px] start-[-6px] w-3"
            />
            <img
              src="/block-media/shadcnblocks/block/patterns/cross-pattern.svg"
              alt="سازنده گردش‌کار"
              className="absolute end-[-6px] bottom-[-8px] w-3"
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature146 };