import { BarChart, Heart, Monitor, Plus, TrendingUp } from "lucide-react";

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

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

interface Feature97Props {
  className?: string;
}

const Feature97 = ({ className }: Feature97Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative w-full max-w-full overflow-hidden py-32", className)}
    >
      <div className="container min-w-0 max-w-full">
        <div className="mx-auto flex w-full min-w-0 max-w-xl flex-col gap-6 text-center">
          <h2 className="max-w-full text-xl font-semibold text-balance break-words">
            فرایندها را استاندارد و سریع کنید
          </h2>
          <p className="max-w-full text-lg text-pretty break-words">
            اتوماسیون را در کل سازمان یکپارچه کنید
          </p>
          <div className="flex w-full min-w-0 flex-col justify-center gap-2 sm:flex-row sm:flex-wrap sm:items-start">
            <Button variant="outline" className="w-full shrink-0 sm:w-auto">
              فرایند هوشمند
            </Button>
            <Button className="h-auto min-w-0 max-w-full whitespace-normal px-4 py-2 text-start text-pretty break-words sm:flex-1">
              <Plus className="ms-2 size-4 shrink-0 self-start" />
              <span className="min-w-0">
                قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود.
                تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
              </span>
            </Button>
          </div>
        </div>
        <div className="mx-auto mt-20 grid w-full min-w-0 max-w-5xl gap-12 md:grid-cols-2 md:gap-20">
          {highlights.map((item) => (
            <div key={item.title} className="min-w-0 max-w-full text-center">
              <item.icon className="mx-auto size-7" />
              <h3 className="mt-4 mb-2 text-xl font-semibold break-words">
                {item.title}
              </h3>
              <p className="text-pretty break-words">{item.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature97 };