import Image from "next/image";

const ProjectsSection = () => {
  return (
    <section className="w-full">
      <div className="relative mb-20 mx-auto h-fit w-full max-w-screen-2xl pt-2 px-2 sm:px-3 sm:pt-3 lg:pt-5 lg:px-10  ">
        <div className="flex flex-col gap-10 lg:gap-20">
          <div className=" z-10 flex h-full bg-projects bg-cover bg-bottom bg-no-repeat rounded-xl flex-row md:h-[320px] items-center px-5 py-12 sm:px-8 lg:px-10">
            <div className="flex w-full flex-col text-white items-center max-w-[700px] mx-auto gap-2">
              <div className="flex flex-col gap-2">
                <h1 className="text-3xl font-bold capitalize leading-tight text-bluegray sm:text-4xl sm:leading-tight">Our Projects</h1>
                <div className="h-1 w-full bg-green-500"></div>
              </div>
              <p className="text-center "> At Verola®, we take pride in delivering ergonomic solutions that enhance workplaces and homes across Indonesia. Explore some of our recent projects and see how we’ve transformed spaces into hubs of comfort, productivity, and style.</p>
            </div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10 sm:gap-x-10 sm:gap-y-20">
            <div className="flex flex-col gap-3">
              <Image src="/assets/img/projects-1.webp" alt="Project 1" width={0} height={0} sizes="100vw" style={{width: "100%", height: "auto"}} className=" object-cover rounded-xl" />
              <p className="text-lg font-medium px-5">Office space at PT Inti Bangun Selaras</p>
            </div>{" "}
            <div className="flex flex-col gap-3">
              <Image src="/assets/img/projects-2.webp" alt="Project 1" width={0} height={0} sizes="100vw" style={{width: "100%", height: "auto"}} className=" object-cover rounded-xl" />
              <p className="text-lg font-medium px-5">Meeting Room at PT Inti Bangun Selaras</p>
            </div>
            <div className="flex flex-col gap-3">
              <Image src="/assets/img/projects-3.webp" alt="Project 1" width={0} height={0} sizes="100vw" style={{width: "100%", height: "auto"}} className=" object-cover rounded-xl" />
              <p className="text-lg font-medium px-5">Meeting Room at TEMS</p>
            </div>
            <div className="flex flex-col gap-3">
              <Image src="/assets/img/projects-4.webp" alt="Project 1" width={0} height={0} sizes="100vw" style={{width: "100%", height: "auto"}} className=" object-cover rounded-xl" />
              <p className="text-lg font-medium px-5">Meeting Room at T1 Office</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ProjectsSection;
