import { cn } from "@/lib/utils";

const features = [
  {
    href: "#",
    image: "/block-media/shadcnblocks/block/block-2.svg",
    imageAlt: "گزارش مالی یکپارچه",
    title: "خرید و تأمین",
    description:
      "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
  },
  {
    href: "#",
    image: "/block-media/shadcnblocks/block/block-3.svg",
    imageAlt: "داشبورد ERP",
    title: "فاکتور و پرداخت",
    description:
      "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
  },
];

interface Feature77Props {
  className?: string;
}

const Feature77 = ({ className }: Feature77Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center">
        <div className="text-center">
          <h3 className="text-xl font-semibold text-pretty md:mb-4 lg:mb-6 lg:max-w-3xl lg:text-2xll">
            گردش تأیید
          </h3>
        </div>
      </div>
      <div className="container mt-16">
        <div className="relative">
          <div className="grid border md:grid-cols-2 md:divide-s">
            {features.map((feature) => (
              <a
                key={feature.title}
                href={feature.href}
                className="group relative flex flex-col items-center border-border pt-8 pb-8 text-center transition-all duration-200 md:border-t md:px-8 md:pt-12 md:pb-12 lg:px-12 lg:pt-16 lg:pb-20"
              >
                <div className="absolute top-0 h-px w-full bg-border md:hidden" />
                <div className="mb-8 flex aspect-1/1 w-16 items-center justify-center md:w-[6.25rem] lg:mb-[3.25rem]">
                  <img
                    src={feature.image}
                    alt={feature.imageAlt}
                    className="h-full w-full object-contain object-center"
                  />
                </div>
                <h2 className="mb-4 text-xl font-semibold md:mb-5">
                  {feature.title}
                </h2>
                <p className="mb-auto text-muted-foreground">
                  {feature.description}
                </p>
              </a>
            ))}
          </div>
          <div className="absolute -start-[5px] -top-[5px]">
            <div className="size-[12px] rounded-full bg-primary" />
          </div>
          <div className="absolute -end-[5px] -top-[5px]">
            <div className="size-[12px] rounded-full bg-primary" />
          </div>
          <div className="absolute -start-[5px] -bottom-[5px]">
            <div className="size-[12px] rounded-full bg-primary" />
          </div>
          <div className="absolute -end-[5px] -bottom-[5px]">
            <div className="size-[12px] rounded-full bg-primary" />
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature77 };