import React from "react";

const PricingHero = () => {
  return (
    <div className="min-h-[100vh]">
      <div className="flex justify-center lg:pt-[150px] xs:pt-[100px] lg:ml-0">
        <div className=" ml-1 lg:w-8/12 xs:w-full  text-center ">
          <h1 className="text-white font-semibold md:text-[80px] sm:text-[60px] xs:text-[40px] text-[18px] mt-4">
            Pricing
          </h1>
          <p className="mb-0 sm:text-[20px] xs:text-[20px] lg:text-center xs:text-center text-secondary  tracking-wider text-gray-100 font-thin xs:px-5 ">
            Tailor your coffee shop management with our time-flexible pricing
            plans. All packages offer the same comprehensive features, differing
            only in duration to suit your business needs. Choose from monthly,
            quarterly, or annual options, each designed for ease and efficiency.
          </p>
        </div>
      </div>
      <div className="grid lg:flex lg:justify-center xs:px-10 lg:px-[120px] mt-20">
        <div className="p-5 text-center lg:mx-10">
          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
            per Month
          </p>

          <p className="mb-0 text-[100px] font-bold text-white mt-10">46 €</p>
        </div>

        <div className="p-5 text-center lg:mx-10">
          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
            3 Months
          </p>
          <div className="flex justify-center">
            <del className="mb-0  text-[30px]  text-white  absolute mt-[15px]">
              138 €
            </del>
          </div>
          <p className="mb-0 text-[100px] font-bold text-white mt-10">110 €</p>
        </div>

        <div className="p-5 text-center lg:mx-10">
          <p className="mb-0  text-white text-[30px] font-thin bg-primary-300 w-fit mx-auto px-4 rounded-full">
            12 Months
          </p>
          <div className="flex justify-center">
            <del className="mb-0  text-[30px]  text-white  absolute mt-[15px]">
              552 €
            </del>
          </div>
          <p className="mb-0 text-[100px] font-bold text-white mt-10">390 €</p>
        </div>
      </div>
    </div>
  );
};

export default PricingHero;