"use client";

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

const integrations = [
  {
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg",
    title: "Indigo Technology",
    description:
      "تاریخچه تماس، قرارداد و تیکت هر مشتری را در یک صفحه ببینید و بدون جستجو تصمیم بگیرید.",
    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
  },
  {
    image:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-uR__S5GX8Io-unsplash.jpg",
    title: "Rapid Financial",
    description:
      "وظایف تکراری فروش را خودکار کنید و تمرکز تیم را روی بستن معامله بگذارید.",
    imageAlt: "نمای پایپ‌لاین فروش",
  },
];

interface Feature157Props {
  className?: string;
}

const Feature157 = ({ className }: Feature157Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h4 className="mb-4 text-center text-muted-foreground/50">پروفایل ۳۶۰ درجه مشتری</h4>
        <h1 className="mx-auto mb-12 max-w-3xl text-center text-xl font-semibold text-balance sm:text-2xll lg:text-[56px]">
          هر سرنخ را تا قرارداد دنبال کنید
        </h1>
        <div className="flex flex-col items-center justify-between gap-12 lg:flex-row">
          {integrations.map((item) => (
            <a
              key={item.title}
              className="relative flex-auto basis-1 text-start transition-opacity delay-150 duration-300 hover:opacity-80"
              href="#"
            >
              <img
                src={item.image}
                alt={item.imageAlt}
                className="mb-6 aspect-[1.5] w-full rounded-2xl object-cover"
              />
              <div className="mb-2 text-xl font-semibold">{item.title}</div>
              <div className="text-pretty">{item.description}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature157 };