export function BreakingDownTheStatsThatMatter() {
  return (
    <section className="font-inter py-20">
      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
        <h2 className="font-manrope text-center text-4xl font-bold text-black">
          Breaking Down the Stats That Matter
        </h2>
        <p className="mx-auto w-full max-w-4xl pt-4 text-center text-xl leading-8 font-normal text-gray-500">
          Take a closer look at the key metrics that fuel our growth and
          innovation. We break down the stats that truly make a difference to
          our success.
        </p>
        <div className="flex flex-col gap-8 pt-14">
          <div className="flex flex-col justify-between gap-8 rounded-2xl border border-gray-200 bg-gray-50 px-8 py-10 sm:flex-row sm:items-center">
            <div className="flex flex-col gap-2.5">
              <h4 className="text-2xl leading-6 font-medium text-gray-900">
                Expert Consultants{" "}
              </h4>
              <p className="text-base leading-6 font-normal text-gray-500">
                Expert consultants delivering impactful results through proven
                strategies
              </p>
            </div>
            <h5 className="font-manrope text-4xl font-bold text-indigo-600">
              99+
            </h5>
          </div>
          <div className="flex flex-col justify-between gap-8 rounded-2xl border border-gray-200 bg-gray-50 px-8 py-10 sm:flex-row sm:items-center">
            <div className="flex flex-col gap-2.5">
              <h4 className="text-2xl leading-6 font-medium text-gray-900">
                Active Clients{" "}
              </h4>
              <p className="text-base leading-6 font-normal text-gray-500">
                Supporting a growing network of active clients worldwide
              </p>
            </div>
            <h5 className="font-manrope text-4xl font-bold text-indigo-600">
              130+
            </h5>
          </div>
          <div className="flex flex-col justify-between gap-8 rounded-2xl border border-gray-200 bg-gray-50 px-8 py-10 sm:flex-row sm:items-center">
            <div className="flex flex-col gap-2.5">
              <h4 className="text-2xl leading-6 font-medium text-gray-900">
                Projects Delivered{" "}
              </h4>
              <p className="text-base leading-6 font-normal text-gray-500">
                Successfully delivered projects that drive lasting impact
              </p>
            </div>
            <h5 className="font-manrope text-4xl font-bold text-indigo-600">
              80+
            </h5>
          </div>
          <div className="flex flex-col justify-between gap-8 rounded-2xl border border-gray-200 bg-gray-50 px-8 py-10 sm:flex-row sm:items-center">
            <div className="flex flex-col gap-2.5">
              <h4 className="text-2xl leading-6 font-medium text-gray-900">
                Orders in Queue{" "}
              </h4>
              <p className="text-base leading-6 font-normal text-gray-500">
                Current orders in queue, ready for prompt delivery
              </p>
            </div>
            <h5 className="font-manrope text-4xl font-bold text-indigo-600">
              60+
            </h5>
          </div>
        </div>
      </div>
    </section>
  )
}