"use client";

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

const itemsData = [
  {
    id: 1,
    title: "همکاری فروش و بازاریابی",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-1.svg",
    description:
      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
  },
  {
    id: 2,
    title: "اولویت‌بندی سرنخ",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-2.svg",
    description:
      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
  },
  {
    id: 3,
    title: "قالب پیشنهاد فروش",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-3.svg",
    description:
      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
  },
  {
    id: 4,
    title: "ردیابی کووت",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-4.svg",
    description:
      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
  },
];

interface Feature132Props {
  className?: string;
}

const Feature132 = ({ className }: Feature132Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="mb-6 text-center text-2xll font-semibold">
          پیش‌بینی درآمد را دقیق‌تر کنید
        </h2>
        <p className="m-auto max-w-3xl text-center text-xl text-muted-foreground">
          هر فرصت فروش را از دست ندهید
        </p>
        <a
          className="mx-auto mt-8 block w-fit rounded-full border-2 border-muted bg-background px-6 py-4 text-sm font-semibold transition hover:border-muted-foreground"
          href="#"
        >
          شروع کنید
        </a>
        <div className="mx-auto mt-16 flex flex-col gap-6 md:flex-row">
          {itemsData.map((item) => (
            <a className="block text-start" href="#" key={item.title}>
              <img
                src={item.imageSrc}
                alt={`نمای ${item.title}`}
                className="mb-6 h-full max-h-72 w-full rounded-2xl object-cover transition hover:brightness-90 lg:max-h-96"
              />
              <h6 className="mb-3 text-lg font-semibold">{item.title}</h6>
              <p className="text-sm text-muted-foreground">{item.description}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature132 };