import React from "react";

const PremuimBannerThree = ({ data, categoriesForPremiumThree }) => {
  const { header4 } = data || {};

  return (
    <div className="min-h-[75vh]">
      <h2 className="text-center sm:text-5xl mt-3 font-[500] text-zinc-800 text-3xl font-serif sm:pt-20 pt-7 tracking-wide mb-11">
        {header4 ?? "Who Should Book A Consultation?"}
      </h2>
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {categoriesForPremiumThree.map((category, index) => (
            <div
              key={index}
              className=" p-4 flex flex-col items-center text-center "
            >
              <h2 className=" rounded-full h-20 w-20 bg-gradient-to-b from-[#E7DBC8] to-pink-50 flex items-center justify-center">
                {category.logo}
              </h2>
              <h3 className=" sm:text-lg text-sm font-semibold">
                {category.title}
              </h3>
              <p className="mt-2 text-xs sm:text-[0.96rem] text-gray-600">
                {category.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default PremuimBannerThree;