import React from "react";

const SiddhaThree = () => {
  return (
    <div className="bg-[#F5F1EB] min-h-screen py-12 px-6 sm:px-12">
      <h1 className="sm:pt-14 pb-10 font-serif mt-4 sm:text-6xl text-3xl text-zinc-800 text-center">
        Design Available
      </h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-8">
        {[
          {
            title: "Loose Beads/Red Thread",
            description:
              "Loose beads provide flexibility in crafting your own unique Rudraksha accessories. Ideal for those who wish to design custom malas or incorporate Rudraksha beads into existing jewelry pieces.",
            image: "/sidhi-mala/1.webp",
          },
          {
            title: "Silver Capped",
            description:
              "Silver-capped Rudraksha beads add an elegant touch to your spiritual accessories. The silver caps not only enhance the aesthetics but also provide additional durability.",
            image: "/sidhi-mala/2_01d4b37c-ade7-44a1-8847-b63ca7945b5b.webp",
          },
          {
            title: "Silver Chain",
            description:
              "A Rudraksha chain with silver links combines the sacred energy of Rudraksha with the elegance of silver. The chain design allows for a more versatile and adjustable accessory, suitable for daily wear.",
            image: "/sidhi-mala/3_4bb67323-1af4-4167-9f11-34cdab60e320.webp",
          },
          {
            title: "Rudraksha Chain",
            description:
              "A Rudraksha chain with silver links combines the sacred energy of Rudraksha with the elegance of silver. The chain design allows for a more versatile and adjustable accessory, suitable for daily wear.",
            image: "/sidhi-mala/4_b5f14d83-0ef5-4e47-8e96-d36db882aadc.webp",
          },
        ].map((item, index) => (
          <div
            key={index}
            className="relative text-white flex flex-col justify-end h-64 sm:h-80 bg-cover bg-center bg-no-repeat w-full p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"
            style={{ backgroundImage: `url(${item.image})` }}
          >
            <div className="bg-black bg-opacity-50 p-4 rounded-lg">
              <h1 className="sm:text-2xl text-lg font-bold mb-2">
                {item.title}
              </h1>
              <h3 className="sm:text-sm text-xs leading-relaxed">
                {item.description}
              </h3>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SiddhaThree;