import React from "react";
import Image from "next/image";
import Link from "next/link";
import { productsCards } from "@/utils";

const ExclusiveProductCards = () => {
  

  return (
    <div className="container mx-auto px-4 py-8 max-w-8xl">
      <div className="text-center mb-12">
        <h1 className="font-serif text-5xl text-slate-800 mb-4">
          Only at Gupta Rudraksha™
        </h1>
        <h2 className="text-xl text-slate-700">
          Explore divinity with Gupta Rudraksha&#39;s rare and authentic collection.
          Step into a world of spiritual bliss.
        </h2>
      </div>
      <div className="flex-wrap gap-5 flex items-center justify-center">
        {productsCards.map((product) => (
          <Link href={`/products/${product.title}`} key={product.id}>
            <div
              key={product.id}
              className="relative bg-[#EDE8E0]  overflow-hidden h-[350px] w-[300px] "
            >
              <div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
                Exclusive
              </div>
              <div className="h-[300px] w-[300px] flex items-center justify-center">
                <Image
                  src={"/one-one.jpg"}
                  alt={`Logo for ${product.title}`}
                  width={160}
                  height={150}
                  className="object-contain hover:scale-125 transition-all ease-in duration-300"
                />
              </div>
              <div className="p-4 ">
                <h3 className="text-center text-[1rem] uppercase  text-gray-800">
                  {product.title}
                </h3>
              </div>
            </div>
          </Link>
        ))}
      </div>
      <div className="py-4 border-y-2 mt-9">
        <Link href={'/collections/only-in-nepa-rudraksha'}><h2 className="text-2xl text-center underline text-[#C19A5B]">Shop Exclusive Products</h2></Link>
      </div> 
    </div>
  );
};

export default ExclusiveProductCards;