import { HelpCircleIcon } from "lucide-react";

import { GlowingEffect } from "@/components/aceternity/glowing-effect";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    id: "quality",
    title: "تریگر رویداد",
    desc: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    imageAlt: "سازنده گردش‌کار",
    img: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
    badgeTitle: "فرایند هوشمند",
    gridClass: "md:col-span-1",
  },
  {
    id: "innovation-wide",
    title: "شرط هوشمند",
    desc: "مسیر متفاوت برای شرایط مختلف تعریف کنید و تصمیم‌گیری را سریع‌تر کنید.",
    imageAlt: "نمای اتوماسیون فرایند",
    img: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    badgeTitle: "اتوماسیون",
    gridClass: "lg:col-span-2",
  },
  {
    id: "performance",
    title: "اعلان خودکار",
    desc: "تیم را در لحظه از تغییر وضعیت باخبر کنید تا هیچ موردی رها نشود.",
    imageAlt: "لاگ اجرای خودکار",
    img: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
    badgeTitle: "گردش‌کار",
    gridClass: "md:col-span-1 lg:row-span-2",
  },
  {
    id: "creativity",
    title: "تأیید چندمرحله‌ای",
    desc: "مسیر کار را با کشیدن و رها کردن بسازید و بدون وابستگی به تیم فنی راه بیندازید.",
    imageAlt: "سازنده گردش‌کار",
    img: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
    badgeTitle: "صرفه‌جویی زمان",
    gridClass: "lg:col-span-2",
  },
  {
    id: "reliability",
    title: "لاگ اجرا",
    desc: "با هر رویداد مثل ثبت فرم یا تغییر وضعیت، اقدام بعدی را خودکار اجرا کنید.",
    imageAlt: "نمای اتوماسیون فرایند",
    img: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
    badgeTitle: "فرایند هوشمند",
    gridClass: "md:col-span-1",
  },
] as const;

interface Feature284Props {
  className?: string;
}

const Feature284 = ({ className }: Feature284Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("h-full overflow-hidden py-32", className)}
    >
      <div className="container flex h-full w-full items-center justify-center">
        <div className="grid w-full max-w-6xl grid-cols-1 grid-rows-2 gap-4 md:grid-cols-2 lg:h-[800px] lg:grid-cols-4">
          {FEATURES.map((feature) => (
            <div
              key={feature.id}
              className={cn(
                "relative flex flex-col gap-2 rounded-3xl border p-4 text-start",
                feature.gridClass,
              )}
            >
              <GlowingEffect
                spread={40}
                glow={true}
                disabled={false}
                proximity={64}
                inactiveZone={0.01}
              />
              <div className="flex w-full items-center justify-between">
                <p className="text-muted-foreground">{feature.badgeTitle}</p>
                <HelpCircleIcon className="size-4 shrink-0 text-muted-foreground" />
              </div>
              <div className="w-full flex-1 overflow-hidden rounded-3xl bg-muted">
                <img
                  src={feature.img}
                  alt={feature.imageAlt}
                  className="pointer-events-none h-full w-full object-cover"
                />
              </div>
              <h3 className="mt-4 text-xl font-semibold tracking-tight">
                {feature.title}
              </h3>
              <p className="text-pretty text-muted-foreground">{feature.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature284 };