"use client";

import { ArrowRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    title: "لاگ اجرا",
    description:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
  },
  {
    title: "قالب آماده",
    description:
      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
  },
  {
    title: "اتصال ابزار",
    description:
      "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
  },
];

interface Feature189Props {
  className?: string;
}

const Feature189 = ({ className }: Feature189Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid items-center gap-12 lg:grid-cols-2">
          <div className="relative mb-8 lg:mb-0">
            <div className="relative -top-12 z-10 mx-auto w-[50%] sm:w-[35%]">
              <img
                alt="سازنده گردش‌کار"
                src="/block-media/shadcnblocks/block/placeholder-2.svg"
                className="h-[200px] rounded-lg object-cover shadow-lg sm:h-[300px]"
              />
            </div>
            <div className="absolute top-8 start-0 z-0 w-[50%] -rotate-12 rtl:rotate-12 sm:w-[35%]">
              <img
                alt="نمای اتوماسیون فرایند"
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                className="h-[200px] rounded-lg object-cover shadow-lg sm:h-[300px]"
              />
            </div>
            <div className="absolute top-8 end-0 z-20 w-[50%] rotate-12 rtl:-rotate-12 sm:w-[35%]">
              <img
                alt="لاگ اجرای خودکار"
                src="/block-media/shadcnblocks/block/placeholder-3.svg"
                className="h-[200px] rounded-lg object-cover shadow-lg sm:h-[300px]"
              />
            </div>
          </div>

          <div className="max-w-xl text-start max-lg:mx-auto lg:ms-auto">
            <h2 className="text-xl font-medium text-balance sm:text-3xl md:text-xl lg:max-w-[80%]">
              فرایندها را استاندارد و سریع کنید
            </h2>

            <div className="mt-6 grid gap-6 sm:mt-10 sm:gap-10">
              {FEATURES.map((feature) => (
                <div key={feature.title} className="flex items-start gap-4">
                  <div>
                    <p className="font-semibold">{feature.title}</p>
                    <p className="mt-1 text-sm text-pretty text-muted-foreground sm:text-base">
                      {feature.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            <Button
              variant="secondary"
              className="mt-6 flex items-center gap-1 sm:mt-10"
            >
              بیشتر بدانید
              <ArrowRight className="size-4 rtl:rotate-180" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature189 };