import Link from "next/link";
import React, { useState } from "react";

const PricingHero = () => {
  const [oneMonth, setOneMonth] = useState(0);
  const [threeMonth, setThreeMonth] = useState(0);
  const [oneYear, setOneYear] = useState(0);
  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 xs:grid-cols-1 lg:grid-cols-3 gap-10 xs:px-[20px] lg:px-[100px] mt-10">
        <div className=" p-3 flex">
          <div className="w-4/12   ">
            <div
              className={`bg-[#132420] p-4 rounded-l-3xl cursor-pointer tr03  ${
                oneMonth == 0 ? " " : "opacity-50"
              } `}
              onClick={() => setOneMonth(0)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 10 user
              </p>
            </div>
            <div
              className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03  ${
                oneMonth == 1 ? " " : "opacity-50"
              } `}
              onClick={() => setOneMonth(1)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 25 user
              </p>
            </div>

            <div
              className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03  ${
                oneMonth == 2 ? " " : "opacity-50"
              } `}
              onClick={() => setOneMonth(2)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 50 user
              </p>
            </div>
          </div>

          <div className="w-8/12 bg-[#132420] xs:p-5 lg:p-10 rounded-r-3xl rounded-bl-3xl">
            <h2 className="mb-0 text-center font-bold xs:text-[18px] lg:text-[25px] text-gray-400">
              1 Mounth
            </h2>

            <p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px]  font-bold">
              {oneMonth == 0
                ? "  15,000,000 R"
                : oneMonth == 1
                ? "  24,000,000 R"
                : oneMonth == 2
                ? "  29,500,000 R"
                : "  15,000,000 R"}
            </p>

            <p className="mb-0 text-center  text-gray-400 text-sm">
              It could be the best package for you, so feel free to use the
              14-day free trial
            </p>
            <div className="flex justify-center mt-10">
              <Link href="/app/login">
                <button className=" btn btn-primary  px-10 rounded-full  py-2 xs:hidden lg:block">
                  Get started
                </button>
              </Link>
            </div>
          </div>
        </div>
        <div className=" p-3 flex">
          <div className="w-4/12   ">
            <div
              className={`bg-[#132420] p-4 rounded-l-3xl cursor-pointer tr03  ${
                threeMonth == 0 ? " " : "opacity-50"
              } `}
              onClick={() => setThreeMonth(0)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 10 user
              </p>
            </div>
            <div
              className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03  ${
                threeMonth == 1 ? " " : "opacity-50"
              } `}
              onClick={() => setThreeMonth(1)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 25 user
              </p>
            </div>

            <div
              className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03  ${
                threeMonth == 2 ? " " : "opacity-50"
              } `}
              onClick={() => setThreeMonth(2)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 50 user
              </p>
            </div>
          </div>

          <div className="w-8/12 bg-[#132420] xs:p-5 lg:p-10 rounded-r-3xl rounded-bl-3xl">
            <h2 className="mb-0 text-center font-bold xs:text-[18px] lg:text-[25px] text-gray-400">
              3 Mounth
            </h2>

            <p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px]  font-bold">
              {threeMonth == 0
                ? "  36,000,000 R"
                : threeMonth == 1
                ? "  57,600,000 R"
                : threeMonth == 2
                ? "  70,800,000 R"
                : "  36,000,000 R"}{" "}
            </p>

            <p className="mb-0 text-center  text-gray-400 text-sm">
              It could be the best package for you, so feel free to use the
              14-day free trial
            </p>
            <div className="flex justify-center mt-10">
              <Link href="/app/login">
                <button className=" btn btn-primary  px-10 rounded-full  py-2 xs:hidden lg:block">
                  Get started
                </button>
              </Link>
            </div>
          </div>
        </div>
        <div className=" p-3 flex">
          <div className="w-4/12   ">
            <div
              className={`bg-[#132420] p-4 rounded-l-3xl cursor-pointer tr03  ${
                oneYear == 0 ? " " : "opacity-50"
              } `}
              onClick={() => setOneYear(0)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 10 user
              </p>
            </div>
            <div
              className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03  ${
                oneYear == 1 ? " " : "opacity-50"
              } `}
              onClick={() => setOneYear(1)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 25 user
              </p>
            </div>

            <div
              className={`bg-[#132420] p-4 rounded-l-3xl mt-3 cursor-pointer tr03  ${
                oneYear == 2 ? " " : "opacity-50"
              } `}
              onClick={() => setOneYear(2)}
            >
              <p className="mb-0 text-center text-white xs:text-sm lg:text-xl">
                up 50 user
              </p>
            </div>
          </div>

          <div className="w-8/12 bg-[#132420] xs:p-5 lg:p-10 rounded-r-3xl rounded-bl-3xl">
            <h2 className="mb-0 text-center font-bold xs:text-[18px] lg:text-[25px] text-gray-400">
              12 Mounth
            </h2>

            <p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px]  font-bold">
              {oneYear == 0
                ? "  108,000,000 R"
                : oneYear == 1
                ? "  172,800,000 R"
                : oneYear == 2
                ? "  212,400,000 R"
                : "  108,000,000 R"}{" "}
            </p>

            <p className="mb-0 text-center  text-gray-400 text-sm">
              It could be the best package for you, so feel free to use the
              14-day free trial
            </p>
            <div className="flex justify-center mt-10">
              <Link href="/app/login">
                <button className=" btn btn-primary  px-10 rounded-full  py-2 xs:hidden lg:block">
                  Get started
                </button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PricingHero;