import { withBasePath } from "@/utils/comman/Comman";
import { sectionsHereForYou } from "@/utils/data/HomePage";
import Image from "next/image";
import CartHereForYou from "./CartHereForYou";

const SectionTwo = () => {
  return (
    <div className="py-[50px]">
      <div className="max-w-7xl px-6 md:px-8 mx-auto">
        <div className="grid md:grid-cols-12 items-center gap-[1.5rem]">
          <div className="col-span-5 h-auto *:aspect-[452/320]">
            <Image
              width={452}
              height={320}
              src={withBasePath("/assets/img/Sage1.png")}
              alt="cta image "
              title="cta image "
            />
          </div>
          <div className="col-span-1md:block hidden" />
          <div className="col-span-6">
            <div className="md:text-[42px] text-3xl text-[#3e3d3d] font-semibold md:mb-[18px]">
              We’re here for you.
            </div>
            <div className="md:text-[22px] text-base text-[#5e5e5e] mb-5">
              Everyone across the board, both healthcare providers and
              recipients, deserve to lead a life filled with safe action,
              clarity and control.
            </div>
            <div className="text-[22px] text-[#5e5e5e] mb-5">
              This is our fundamental belief, our motivation and our mission.
            </div>
          </div>
        </div>
      </div>
      <div className="max-w-7xl px-6 md:px-8 mx-auto">
        <div className="grid md:grid-cols-2 gap-[1.5rem]">
          {sectionsHereForYou?.map((card, index) => (
            <CartHereForYou key={index} {...card} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default SectionTwo;