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

interface Projects9Props {
  className?: string;
}

const Projects9 = ({ className }: Projects9Props) => {
  const images = [
    {
      src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
      alt: "نمای خلوت",
      title: "افکت‌های نور",
      description: "لحظه‌ای از آرامش در یک تجربه روان",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
      alt: "جریان اصلی کاربر",
      title: "فضای تمرکز",
      description: "گرید منظمی که حس نظم و وضوح می‌سازد",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
      alt: "تم بهاری روشن",
      title: "فرم چندمرحله‌ای",
      description: "جایی که طراحی و کد در هماهنگی کامل می‌آمیزند",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
      alt: "نمای کلی داشبورد",
      title: "نمای کلی داشبورد",
      description: "کامپوننت‌هایی که با تکرار و تست پالایش شده‌اند",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
      alt: "منوی کشویی (Drawer)",
      title: "حالت تمرکز (Focus Mode)",
      description: "جریان آنبوردینگ که کاربر را گام‌به‌گام پیش می‌برد",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
      alt: "بلاک‌های چیده‌شده داشبورد",
      title: "نمودار خطی درآمد در حالت تیره",
      description: "افکت‌های نور و گرادیان در تم تیره",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 md:grid-cols-2">
          {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 { Projects9 };