import img2 from "@/public/title.svg";
import estadma from "@/public/plant.svg";
import creative from "@/public/creativity.svg";
import personale from "@/public/building.svg";
import defaultImg from "@/public/defaultimg.png";
import quality from "@/public/quality.svg";
import Image from "next/image";
import SectionTitle from "../reusableComponent/SectionTitleOld";

const OurValues = ({ data, className }: { data: any; className?: string }) => {
  const cards = [
    {
      id: 1,
      title: "Quality",
      img: quality,
      description:
        "We provide the highest standards of service and comfort, with meticulous attention to every detail to ensure a luxurious and distinctive accommodation experience.",
    },
    {
      id: 2,
      title: "Innovation",
      img: creative,
      description:
        "We keep pace with the latest developments in the hospitality sector through smart technologies and innovative services that facilitate our guests’ stay.",
    },
    {
      id: 3,
      title: "Sustainability",
      img: estadma,
      description:
        "We incorporate sustainable environmental practices into our operations, from reducing resource consumption to using environmentally friendly materials.",
    },
    {
      id: 4,
      title: "Personal experience",
      img: personale,
      description:
        "We provide tailored accommodation for each guest, ensuring an experience that meets their needs, whether for relaxation, business or leisure.",
    },
  ];

  return (
    <div
      className={`mx-auto flex flex-col justify-center items-center mb-[100px] ${
        className || ""
      }`}
      data-aos="fade-up"
      data-aos-duration="1000"
    >
      <SectionTitle
        className="[&_.description]:text-lg [&_.description]:font-light"
        title={data?.title}
        description={data?.description}
      />

      {/* <Image
          src={img2}
          className="lg:w-[64px] lg:h-[13px] w-[42px] h-[9px]"
          alt="img2"
        />
        <span className="text-[#CAB16C] lg:py-[16px] py-[8px] lg:text-[24px] text-[15px]  lg:font-medium font-normal text-center ">
          Our Values
        </span>
        <span className="text-white/80 lg:text-[18px] lg:font-light font-light text-[12px] ">
          Over the years, Durrat Taibah Hotels has received many awards and
          honors that reflect our commitment to quality and excellence.
        </span> */}

      <div className="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
        {data?.values?.map((item: any) => (
          <div
            key={item.id}
            className="bg-[#1C1B19] flex flex-col items-center lg:items-start text-center border
                 border-[#494947] rounded-[24px] px-[22px] py-[24px]"
          >
            <div className="flex flex-col lg:flex-row items-center justify-center gap-2 lg:gap-3">
              <div className="w-[48px] h-[48px] lg:w-[56px] lg:h-[56px] rounded-[8px] bg-[#FFFFFF1A] flex items-center justify-center">
                <Image
                  src={item?.image?.original_url || defaultImg}
                  width={50}
                  height={50}
                  alt="img.map"
                  className="w-[24px] h-[24px] lg:w-[32px] lg:h-[32px] "
                />
              </div>
              <span className="text-white  lg:text-[18px] lg:font-medium text-[16px] font-medium">
                {" "}
                {item?.name}
              </span>
            </div>
            <p className="text-center lg:text-start mt-3 line-clamp-3 text-[12px] font-light lg:text-[16px] lg:font-light">
              {item?.description}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};
export default OurValues;