export function FourTierPricingPlan() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="inline-flex w-full flex-col items-start justify-start gap-10 lg:gap-12">
          <div className="flex w-full flex-col items-center justify-center gap-3 lg:items-start lg:gap-4">
            <h2 className="font-manrope text-center text-4xl leading-normal font-bold text-gray-900 lg:text-start">
              Best Plans for Business
            </h2>
            <p className="text-center text-base leading-relaxed font-normal text-gray-500 lg:text-start">
              Choose a Plan Tailored to Your Needs
            </p>
          </div>
          <div className="grid w-full grid-cols-1 items-center justify-start gap-5 md:grid-cols-2 lg:grid-cols-4">
            <div className="group inline-flex h-full w-full flex-col items-start justify-center gap-8 rounded-xl border-t border-r-[2.6px] border-b-[2.6px] border-l border-transparent border-b-gray-900 bg-indigo-100 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-900">
              <div className="flex w-full flex-col items-start justify-start gap-3">
                <div className="flex flex-col items-start justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-gray-900">
                    Free Package
                  </h4>
                  <h2 className="font-manrope text-4xl leading-normal font-bold text-gray-900">
                    $00
                    <span className="text-base leading-relaxed font-normal">
                      Per Month
                    </span>
                  </h2>
                </div>
                <h6 className="text-base leading-relaxed font-normal text-gray-500">
                  Basic features for up to 10 users with limited projects and
                  reporting
                </h6>
              </div>
              <button className="flex w-full items-center justify-center rounded-lg bg-gray-50 px-3.5 py-2 group-hover:bg-gray-900 group-hover:shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                <span className="px-1.5 text-sm leading-6 font-medium text-gray-900 group-hover:text-white">
                  Buy Now
                </span>
              </button>
            </div>
            <div className="group inline-flex h-full w-full flex-col items-start justify-center gap-8 rounded-xl border-t border-r-[2.6px] border-b-[2.6px] border-l border-transparent border-b-gray-900 bg-amber-100 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-900">
              <div className="flex w-full flex-col items-start justify-start gap-3">
                <div className="flex flex-col items-start justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-gray-900">
                    Basic Package
                  </h4>
                  <h2 className="font-manrope text-4xl leading-normal font-bold text-gray-900">
                    $39
                    <span className="text-base leading-relaxed font-normal">
                      Per Month
                    </span>
                  </h2>
                </div>
                <h6 className="text-base leading-relaxed font-normal text-gray-500">
                  Basic features for up to 50 users with limited projects and
                  unlimited reporting
                </h6>
              </div>
              <button className="flex w-full items-center justify-center rounded-lg bg-gray-50 px-3.5 py-2 group-hover:bg-gray-900 group-hover:shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                <span className="px-1.5 text-sm leading-6 font-medium text-gray-900 group-hover:text-white">
                  Buy Now
                </span>
              </button>
            </div>
            <div className="group inline-flex h-full w-full flex-col items-start justify-center gap-8 rounded-xl border-t border-r-[2.6px] border-b-[2.6px] border-l border-transparent border-b-gray-900 bg-emerald-100 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-900">
              <div className="flex w-full flex-col items-start justify-start gap-3">
                <div className="flex flex-col items-start justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-gray-900">
                    Pro Package
                  </h4>
                  <h2 className="font-manrope text-4xl leading-normal font-bold text-gray-900">
                    $59
                    <span className="text-base leading-relaxed font-normal">
                      Per Month
                    </span>
                  </h2>
                </div>
                <h6 className="text-base leading-relaxed font-normal text-gray-500">
                  Basic features for up to 100 users with unlimited projects and
                  reporting
                </h6>
              </div>
              <button className="flex w-full items-center justify-center rounded-lg bg-gray-50 px-3.5 py-2 group-hover:bg-gray-900 group-hover:shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                <span className="px-1.5 text-sm leading-6 font-medium text-gray-900 group-hover:text-white">
                  Buy Now
                </span>
              </button>
            </div>
            <div className="group inline-flex h-full w-full flex-col items-start justify-center gap-8 rounded-xl border-t border-r-[2.6px] border-b-[2.6px] border-l border-transparent border-b-gray-900 bg-orange-100 p-5 shadow-[0px_15px_30px_-4px_rgba(16,_24,_40,_0.03)] transition-all duration-700 ease-in-out hover:border-gray-900">
              <div className="flex w-full flex-col items-start justify-start gap-3">
                <div className="flex flex-col items-start justify-start gap-2.5">
                  <h4 className="text-xl leading-8 font-medium text-gray-900">
                    Premium Package
                  </h4>
                  <h2 className="font-manrope text-4xl leading-normal font-bold text-gray-900">
                    $89
                    <span className="text-base leading-relaxed font-normal">
                      Per Month
                    </span>
                  </h2>
                </div>
                <h6 className="text-base leading-relaxed font-normal text-gray-500">
                  Basic features for up to unlimited users with unlimited
                  projects and reporting
                </h6>
              </div>
              <button className="flex w-full items-center justify-center rounded-lg bg-gray-50 px-3.5 py-2 group-hover:bg-gray-900 group-hover:shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)]">
                <span className="px-1.5 text-sm leading-6 font-medium text-gray-900 group-hover:text-white">
                  Buy Now
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}