import { useTranslations } from "next-intl";
import React, { useState } from "react";
import { Link } from "src/i18n/routing";

const PricingHero = () => {
  const [oneMonth, setOneMonth] = useState(0);
  const [threeMonth, setThreeMonth] = useState(0);
  const [oneYear, setOneYear] = useState(0);

  const t = useTranslations("pricing");
  return (
    <div className="min-h-[100vh]">
      <div className="flex justify-center lg:pt-[150px] xs:pt-[100px] lg:ml-0">
        <div className="ml-1 text-center lg:w-8/12 xs:w-full">
          <h1 className="text-white font-semibold md:text-[80px] sm:text-[60px] xs:text-[40px] text-[18px] mt-4">
            {t("title")}
          </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 ">
            {t("desc")}
          </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="flex p-3 ">
          <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">
                {t("oneMounth.users1")}
              </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">
                {t("oneMounth.users2")}{" "}
              </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">
                {t("oneMounth.users3")}{" "}
              </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">
              {t("oneMounth.title")}{" "}
            </h2>

            <p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px]  font-bold">
              {oneMonth == 0
                ? t("oneMounth.pricing1")
                : oneMonth == 1
                ? t("oneMounth.pricing2")
                : oneMonth == 2
                ? t("oneMounth.pricing3")
                : t("oneMounth.pricing1")}
            </p>

            <p className="mb-0 text-sm text-center text-gray-400">
              {t("oneMounth.desc")}{" "}
            </p>
            <div className="flex justify-center mt-10">
              <Link href="/app/login">
                <button className="px-10 py-2 rounded-full btn btn-primary xs:hidden lg:block">
                  {t("oneMounth.button")}{" "}
                </button>
              </Link>
            </div>
          </div>
        </div>
        <div className="flex p-3 ">
          <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">
                {t("threeMounth.users1")}
              </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">
                {t("threeMounth.users2")}
              </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">
                {t("threeMounth.users3")}
              </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">
              {t("threeMounth.title")}{" "}
            </h2>

            <p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px]  font-bold">
              {threeMonth == 0
                ? t("threeMounth.pricing1")
                : threeMonth == 1
                ? t("threeMounth.pricing2")
                : threeMonth == 2
                ? t("threeMounth.pricing3")
                : t("threeMounth.pricing1")}
            </p>

            <p className="mb-0 text-sm text-center text-gray-400">
              {t("threeMounth.desc")}{" "}
            </p>
            <div className="flex justify-center mt-10">
              <Link href="/app/login">
                <button className="px-10 py-2 rounded-full btn btn-primary xs:hidden lg:block">
                  {t("threeMounth.button")}{" "}
                </button>
              </Link>
            </div>
          </div>
        </div>
        <div className="flex p-3 ">
          <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">
                {t("sixMounth.users1")}{" "}
              </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">
                {t("sixMounth.users2")}{" "}
              </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">
                {t("sixMounth.users3")}{" "}
              </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">
              {t("sixMounth.title")}{" "}
            </h2>

            <p className="mb-0 text-center text-white xs:text-[25px] lg:text-[33px]  font-bold">
              {oneYear == 0
                ? t("sixMounth.pricing1")
                : oneYear == 1
                ? t("sixMounth.pricing2")
                : oneYear == 2
                ? t("sixMounth.pricing3")
                : t("sixMounth.pricing1")}
            </p>

            <p className="mb-0 text-sm text-center text-gray-400">
              {t("sixMounth.desc")}{" "}
            </p>
            <div className="flex justify-center mt-10">
              <Link href="/app/login">
                <button className="px-10 py-2 rounded-full btn btn-primary xs:hidden lg:block">
                  {t("sixMounth.button")}{" "}
                </button>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PricingHero;