'use client'
import { guranteeData } from "@/utils";
import Image from "next/image";
import React from "react";
import { motion } from "framer-motion";

const HeroSix = () => {
  return (
    <section className="py-16 bg-gradient-to-b from-background to-muted">
      <div className="container px-4 mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            Our Sacred Commitment
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Certified Excellence in Rudraksha - Nepal&apos;s Premier ISO 9001:2015
            Accredited Organization
          </p>
        </motion.div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
          {guranteeData.map((item, index) => (
            <motion.div
              key={item.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              className="flex flex-col items-center text-center"
            >
              <div className="relative w-24 h-24 mb-4">
                <Image
                  src={item.imageUrl || "/placeholder.svg"}
                  alt={item.title}
                  layout="fill"
                  objectFit="contain"
                  className="rounded-full bg-primary/10 p-4"
                />
              </div>
              <h3 className="text-sm font-medium text-foreground uppercase tracking-wide">
                {item.title}
              </h3>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default HeroSix;