import { guranteeData } from "@/utils";
import Image from "next/image";
import React from "react";

const WhyShouldChooseUs = () => {
  return (
    <div className="min-h-[60vh] bg-zinc-50 mt-14 px-4 sm:px-8">
      <div className="text-center mb-12">
        <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl text-slate-800 mb-4">
          Why should you choose us?
        </h1>
        <h2 className="text-base sm:text-xl  text-slate-700">
          Witness the ancient craft of harvesting and crafting these sacred
          beads straight from the trees. Experience the authentic power and
          beauty of genuine Rudraksha with our exclusive video.`
        </h2>
      </div>
      <div className="flex justify-center gap-6 flex-wrap">
        {guranteeData.map((item) => (
          <div
            key={item.id}
            className="flex flex-col justify-center items-center mb-4 w-full sm:w-[45%] md:w-[30%] lg:w-[18%]"
          >
            <Image
              height={300}
              width={300}
              src={item.imageUrl}
              alt={item.title}
              className="w-[100px] h-[100px] sm:w-[160px] sm:h-[160px] object-cover"
            />
            <h2 className="text-sm sm:text-lg uppercase text-zinc-800 mt-3 text-center w-[80%]">
              {item.title}
            </h2>
          </div>
        ))}
      </div>
    </div>
  );
};

export default WhyShouldChooseUs;