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

const FEATURES = [
  {
    id: "privacy",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/photos/kevin-chin-qk4S-s0IX68-unsplash.jpg",
    imageAlt: "صف اولویت سرنخ‌ها",
    number: "۰۱",
    title: "همکاری فروش و بازاریابی",
  },
  {
    id: "multitouch",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/photos/simon-lee-BRHLD4L1Hag-unsplash.jpg",
    imageAlt: "داشبورد عملکرد فروش",
    number: "۰۲",
    title: "اولویت‌بندی سرنخ",
  },
  {
    id: "engine",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/photos/simon-lee-R_6A6CovgIM-unsplash.jpg",
    imageAlt: "نمودار نرخ تبدیل",
    number: "تیم فروش",
    title: "قالب پیشنهاد فروش",
  },
] as const;

interface Feature297Props {
  className?: string;
}

const Feature297 = ({ className }: Feature297Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "py-32 font-handwriting text-background dark:text-foreground",
        className,
      )}
    >
      <div className="container">
        <div className="grid gap-4 md:grid-cols-3">
          {FEATURES.map((feature) => (
            <a
              key={feature.id}
              href={feature.href}
              className="group relative overflow-hidden rounded-sm"
            >
              <img
                src={feature.image}
                alt={feature.imageAlt}
                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
              />
              <div className="absolute inset-0 flex flex-col justify-between p-6 text-start">
                <span className="text-xl tracking-wide">{feature.number}</span>
                <h2 className="text-xl font-medium tracking-tight text-balance">
                  {feature.title}
                </h2>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature297 };