import { ArrowRight } from "lucide-react";

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

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

interface Feature82Props {
  className?: string;
}

const Feature82 = ({ className }: Feature82Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full overflow-hidden py-32", className)}
    >
      <div className="container min-w-0">
        <div className="grid min-w-0 place-items-center items-center gap-4 lg:grid-cols-5 lg:gap-16">
          <h1 className="min-w-0 text-center text-xl font-semibold text-balance lg:col-span-2 lg:text-start lg:text-2xll">
            فرایندها را استاندارد و سریع کنید
          </h1>
          <p className="min-w-0 text-center text-lg text-balance text-muted-foreground lg:col-span-2 lg:text-start">
            قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
          </p>
          <Button className="mx-auto h-auto max-w-full whitespace-normal text-balance lg:mx-0 lg:ms-auto">
            فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
          </Button>
        </div>
        <Separator className="mt-8 mb-12" />
        <ul className="grid min-w-0 grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-20">
          {integrations.map((integration) => (
            <li key={integration.title} className="min-w-0">
              <div className="min-w-0">
                <img
                  src={integration.image}
                  alt={`لوگوی ${integration.title}`}
                  className="h-auto w-16"
                />
                <h3 className="my-2 text-xl font-bold">{integration.title}</h3>
                <p className="text-sm text-balance text-muted-foreground">
                  {integration.description}
                </p>
              </div>
            </li>
          ))}
        </ul>
        <a
          href="#"
          className="mt-12 flex flex-wrap items-center justify-center gap-1 text-lg font-semibold underline"
        >
          اتوماسیون را در کل سازمان یکپارچه کنید
          <ArrowRight className="h-auto w-4 shrink-0 rtl:rotate-180" />
        </a>
      </div>
    </section>
  );
};

export { Feature82 };