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

interface Projects10Props {
  className?: string;
}

const Projects10 = ({ className }: Projects10Props) => {
  const images = [
    {
      src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
      alt: "چیدمان کارت‌ها روی پس‌زمینه ملایم",
      title: "تم روشن صبحگاهی",
      description: "رابط مینیمال با فضای خالی سنجیده و ریتم منظم",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
      alt: "کارت‌های آماری با نمودار زنده",
      title: "نمای تم سرد",
      description: "تم روشن، کارت‌ها را با رنگ‌های گرم می‌آراید",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
      alt: "منوی کشویی در جریان ناوبری",
      title: "تم تیره مه‌آلود",
      description: "تم روشن سپیده، رابط را زنده می‌کند",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
      alt: "نمای جامعه کاربران",
      title: "نمای جانبی",
      description: "تجربه‌ای که با الگو و رنگ نشانه‌گذاری شده",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw19.jpeg",
      alt: "نمای پروفایل کاربر",
      title: "نمای گرم",
      description: "نمای مطالعه محتوا در تم روشن",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw18.jpeg",
      alt: "نمای کاربر در تم تیره",
      title: "هماهنگی مینیمال",
      description: "بلاک Hero با گرادیان نرم و تایپوگرافی درشت",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw15.jpeg",
      alt: "کارت‌های شاخص در تم غروب",
      title: "تم سپیده‌دم",
      description: "نوار پیشرفت و اسکلتون لودینگ هنگام بارگذاری داده",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
      alt: "داشبوردهای تعاملی",
      title: "حالت موفقیت پس از ثبت",
      description: "کامپوننت‌ها برای توازن و ریتم بصری سنجیده چیده شده‌اند",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
      alt: "انیمیشن ظریف ورود کارت‌ها",
      title: "حالت‌های موفقیت و نوتیفیکیشن‌های دلنشین تجربه را گرم می‌کنند",
      description: "حالت‌ها و پیام‌های راهنما کنار کاربر تجربه را گرم‌تر می‌کنند",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-24", className)}>
      <div className="container">
        <div className="grid grid-cols-1 md:grid-cols-3">
          {images.map((image, index) => (
            <div
              key={index}
              className="group relative aspect-square overflow-hidden"
            >
              <img
                src={image.src}
                alt={image.alt}
                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-background/0 transition-all duration-300 group-hover:bg-background/10" />
              <div className="absolute inset-x-0 bottom-0 translate-y-full transform p-6 transition-transform duration-300 group-hover:translate-y-0">
                <div className="text-center">
                  <h3 className="mb-2 text-xl font-semibold text-muted">
                    {image.title}
                  </h3>
                  <p className="text-sm text-muted">{image.description}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Projects10 };