export function KeyMetricsDrivingBusinessResults() {
  return (
    <section className="font-inter py-20">
      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col gap-3">
          <div className="mx-auto w-fit rounded-full border border-indigo-300 bg-indigo-50 px-2.5 py-0.5 text-xs leading-4 font-medium text-indigo-600 lg:mx-0">
            Stats
          </div>
          <h2 className="font-manrope w-full text-center text-4xl font-bold text-black lg:max-w-2xl lg:text-start">
            Essential Insights for Performance Growth
          </h2>
        </div>
        <div className="pt-14">
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:pl-44 xl:pl-96">
            <div className="group flex flex-col gap-5 rounded-2xl border border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-200 hover:bg-indigo-50">
              <div className="flex items-center justify-between gap-5">
                <h3 className="font-manrope text-3xl font-bold text-gray-900 transition-all duration-500 group-hover:text-indigo-600">
                  99+
                </h3>
                <span className="text-lg leading-8 font-normal text-gray-600">
                  Expert Consultants{" "}
                </span>
              </div>
              <div className="flex flex-col gap-10 border-t border-gray-200 pt-5 transition-all duration-500 group-hover:border-indigo-200">
                <p className="text-base leading-6 font-normal text-gray-500">
                  Our expert consultants provide tailored strategies and
                  insights to drive your business forward. With deep industry
                  knowledge, we deliver solutions that achieve measurable
                  results.
                </p>
                <button className="flex w-fit items-center justify-center gap-1.5 rounded-full border border-gray-300 p-2 text-xs leading-4 font-medium transition-all duration-500 group-hover:border-indigo-300 group-hover:text-indigo-600">
                  Learn More{/* SVG removed */}
                </button>
              </div>
            </div>
            <div className="group flex flex-col gap-5 rounded-2xl border border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-200 hover:bg-indigo-50">
              <div className="flex items-center justify-between gap-5">
                <h3 className="font-manrope text-3xl font-bold text-gray-900 transition-all duration-500 group-hover:text-indigo-600">
                  84+
                </h3>
                <span className="text-lg leading-8 font-normal text-gray-600">
                  Project Completed
                </span>
              </div>
              <div className="flex flex-col gap-10 border-t border-gray-200 pt-5 transition-all duration-500 group-hover:border-indigo-200">
                <p className="text-base leading-6 font-normal text-gray-500">
                  With numerous projects completed successfully, we consistently
                  deliver high-quality results on time. Each project reflects
                  our commitment to excellence and client satisfaction.
                </p>
                <button className="flex w-fit items-center justify-center gap-1.5 rounded-full border border-gray-300 p-2 text-xs leading-4 font-medium transition-all duration-500 group-hover:border-indigo-300 group-hover:text-indigo-600">
                  Learn More{/* SVG removed */}
                </button>
              </div>
            </div>
            <div className="group flex flex-col gap-5 rounded-2xl border border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-200 hover:bg-indigo-50">
              <div className="flex items-center justify-between gap-5">
                <h3 className="font-manrope text-3xl font-bold text-gray-900 transition-all duration-500 group-hover:text-indigo-600">
                  128+
                </h3>
                <span className="text-lg leading-8 font-normal text-gray-600">
                  Active Clients
                </span>
              </div>
              <div className="flex flex-col gap-10 border-t border-gray-200 pt-5 transition-all duration-500 group-hover:border-indigo-200">
                <p className="text-base leading-6 font-normal text-gray-500">
                  We proudly serve a diverse portfolio of active clients, each
                  benefiting from our dedicated support and tailored solutions.
                  Our strong relationships foster collaboration and drive mutual
                  success.
                </p>
                <button className="flex w-fit items-center justify-center gap-1.5 rounded-full border border-gray-300 p-2 text-xs leading-4 font-medium transition-all duration-500 group-hover:border-indigo-300 group-hover:text-indigo-600">
                  Learn More{/* SVG removed */}
                </button>
              </div>
            </div>
            <div className="group flex flex-col gap-5 rounded-2xl border border-gray-200 bg-gray-50 p-5 transition-all duration-500 hover:border-indigo-200 hover:bg-indigo-50">
              <div className="flex items-center justify-between gap-5">
                <h3 className="font-manrope text-3xl font-bold text-gray-900 transition-all duration-500 group-hover:text-indigo-600">
                  58+
                </h3>
                <span className="text-lg leading-8 font-normal text-gray-600">
                  Order in Queue{" "}
                </span>
              </div>
              <div className="flex flex-col gap-10 border-t border-gray-200 pt-5 transition-all duration-500 group-hover:border-indigo-200">
                <p className="text-base leading-6 font-normal text-gray-500">
                  Our streamlined process ensures that every order in the queue
                  is handled efficiently and promptly. We prioritize timely
                  delivery while maintaining the highest quality standards for
                  customer satisfaction.
                </p>
                <button className="flex w-fit items-center justify-center gap-1.5 rounded-full border border-gray-300 p-2 text-xs leading-4 font-medium transition-all duration-500 group-hover:border-indigo-300 group-hover:text-indigo-600">
                  Learn More{/* SVG removed */}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}