import React from "react";
import Image from "next/image";

const ProductGallery = () => {
  const galleryImg = [
    {
      id: 1,
      src: "/gallery1.jpg",
      alt: "Gallery image 1",
      text: "All Rudraksha",
    },
    {
      id: 2,
      src: "/gallery3.jpg",
      alt: "Gallery image 2",
      text: "Siddha Mala",
    },
    {
      id: 3,
      src: "/gallery2.jpg",
      alt: "Gallery image 3",
      text: "Murti & Yantra",
    },
    {
      id: 4,
      src: "/gallery4.png",
      alt: "Gallery image 4",
      text: "Rudraksha Combination",
    },
    { id: 5, src: "/gallery5.webp", alt: "Gallery image 5", text: "Japa Mala" },
    {
      id: 6,
      src: "/gallery6.jpg",
      alt: "Gallery image 6",
      text: "Kantha Mala",
    },
    { id: 7, src: "/gallery7.webp", alt: "Gallery image 7", text: "Shaligram" },
  ];

  const ImageWithOverlay = ({ src, alt, text, className }) => (
    <div className={`relative overflow-hidden shadow-lg group ${className}`}>
      <Image
        src={src}
        alt={alt}
        layout="fill"
        objectFit="cover"
        className="transition-transform duration-300 group-hover:scale-110 "
      />
      <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
        <p className="text-white text-lg font-semibold">{text}</p>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-8xl mx-auto">
        <div className="text-center mb-12">
          <h1 className="font-serif text-5xl text-slate-800 mb-4">
            Product Categories
          </h1>
          <h2 className="text-xl text-slate-700">
            Discover the Essence: Explore our Diverse Product Categories
          </h2>
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
          {/* Left column */}
          <div className="grid grid-rows-2 gap-3">
            <ImageWithOverlay
              src={galleryImg[2].src}
              alt={galleryImg[2].alt}
              text={galleryImg[2].text}
              className="h-[300px] cursor-pointer"
            />
            <div className="grid grid-cols-2 gap-3 ">
              <ImageWithOverlay
                src={galleryImg[3].src}
                alt={galleryImg[3].alt}
                text={galleryImg[3].text}
                className="h-[200px] cursor-pointer"
              />
              <ImageWithOverlay
                src={galleryImg[4].src}
                alt={galleryImg[4].alt}
                text={galleryImg[4].text}
                className="h-[200px]"
              />
            </div>
          </div>

          {/* Middle column */}
          <ImageWithOverlay
            src={galleryImg[1].src}
            alt={galleryImg[1].alt}
            text={galleryImg[1].text}
            className="h-[520px]"
          />

          {/* Right column */}
          <div className="grid grid-rows-2 gap-3">
            <ImageWithOverlay
              src={galleryImg[0].src}
              alt={galleryImg[0].alt}
              text={galleryImg[0].text}
              className="h-[300px]"
            />
            <div className="grid grid-cols-2 gap-3">
              <ImageWithOverlay
                src={galleryImg[5].src}
                alt={galleryImg[5].alt}
                text={galleryImg[5].text}
                className="h-[200px]"
              />
              <ImageWithOverlay
                src={galleryImg[6].src}
                alt={galleryImg[6].alt}
                text={galleryImg[6].text}
                className="h-[200px]"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProductGallery;