import {
  BoxesIcon,
  CheckIcon,
  HeadphonesIcon,
  PuzzleIcon,
  ShieldCheckIcon,
} from "lucide-react";
import { Fragment } from "react";

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

const CARDS = [
  {
    id: "product-features",
    title: "تریگر رویداد",
    description:
      "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    icon: BoxesIcon,
    features: [
      "ارسال خودکار ایمیل",
      "ایجاد خودکار تسک",
      "گزارش خطای اجرا",
      "اجرای خودکار وظایف",
      "تأخیر زمان‌بندی‌شده",
      "شرط بر اساس فیلد",
      "ارسال خودکار ایمیل",
    ],
  },
  {
    id: "security",
    title: "شرط هوشمند",
    description:
      "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
    icon: ShieldCheckIcon,
    features: [
      "ایجاد خودکار تسک",
      "گزارش خطای اجرا",
      "اجرای خودکار وظایف",
      "تأخیر زمان‌بندی‌شده",
      "شرط بر اساس فیلد",
      "ارسال خودکار ایمیل",
      "ایجاد خودکار تسک",
    ],
  },
  {
    id: "integration-apis",
    title: "اعلان خودکار",
    description: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    icon: PuzzleIcon,
    features: [
      "گزارش خطای اجرا",
      "اجرای خودکار وظایف",
      "تأخیر زمان‌بندی‌شده",
      "شرط بر اساس فیلد",
      "ارسال خودکار ایمیل",
      "ایجاد خودکار تسک",
    ],
  },
  {
    id: "support-resources",
    title: "تأیید چندمرحله‌ای",
    description:
      "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
    icon: HeadphonesIcon,
    features: [
      "گزارش خطای اجرا",
      "اجرای خودکار وظایف",
      "تأخیر زمان‌بندی‌شده",
      "شرط بر اساس فیلد",
      "ارسال خودکار ایمیل",
      "ایجاد خودکار تسک",
    ],
  },
];

interface Feature203Props {
  className?: string;
}

const Feature203 = ({ className }: Feature203Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto grid max-w-3xl gap-9 md:grid-cols-2">
          {CARDS.map((card) => {
            const Icon = card.icon;

            return (
              <div
                key={card.id}
                className="flex flex-col gap-8 rounded-xl bg-muted p-9 text-start"
              >
                <div className="flex flex-col gap-6">
                  <span className="flex size-10 items-center justify-center rounded-xl bg-primary">
                    <Icon className="size-5 text-background" />
                  </span>
                  <div className="flex flex-col gap-2.5">
                    <h3 className="text-xl font-semibold">{card.title}</h3>
                    <p className="text-sm text-pretty text-muted-foreground">
                      {card.description}
                    </p>
                  </div>
                </div>
                <ul className="flex flex-col gap-3.5">
                  {card.features.map((feature) => (
                    <Fragment key={feature}>
                      <Separator />
                      <li className="flex items-center gap-2 text-sm text-muted-foreground">
                        <CheckIcon className="size-4 shrink-0 text-primary" />
                        <span className="text-pretty">{feature}</span>
                      </li>
                    </Fragment>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature203 };