"use client";

import { useState } from "react";

export default function Pricing3() {
  const [isMonthly, setIsMonthly] = useState(true);
  return (
    <section id="snippet-3" className="wrapper !bg-[#ffffff]  ">
      <div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
        <h2 className="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-7 !text-center">
          Our Pricing
        </h2>
        <div className="pricing-wrapper">
          <div className="flex flex-wrap items-center justify-center switcher">
            <p className="!mb-0 !pr-[.75rem]">Monthly</p>
            <div
              onClick={() => {
                setIsMonthly((pre) => !pre);
              }}
              className="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent"
            >
              <div
                className={`pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercas ${
                  isMonthly ? "pricing-switcher-active !text-white" : ""
                }`}
              />
              <div
                className={`pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercas ${
                  !isMonthly ? "pricing-switcher-active !text-white" : ""
                }`}
              />
              <div className="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[#1fc76f] opacity-100 switcher-button" />
            </div>
            <p className="!mb-0 !pl-3 !relative">
              Yearly <span className="!text-[#e2626b]">(Save 30%)</span>
            </p>
          </div>
          <div className="flex flex-wrap mx-0 !mt-2">
            <div className="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]">
              <div className="pricing card !shadow-none !border-0">
                <div className="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]">
                  <div className="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]">
                    {" "}
                    <i className="uil uil-shopping-bag before:content-['\ecba']" />{" "}
                  </div>
                  <h4 className="card-title">Basic Plan</h4>
                  <div className="prices !text-[#343f52]">
                    <div
                      className={`price ${
                        isMonthly ? "price-show" : "price-hidden"
                      }  !justify-start`}
                    >
                      <span className="price-currency">$</span>
                      <span className="price-value">9</span>
                      <span className="price-duration">mo</span>
                    </div>
                    <div
                      className={`price ${
                        !isMonthly ? "price-show" : "price-hidden"
                      }  !justify-start`}
                    >
                      <span className="price-currency">$</span>
                      <span className="price-value">99</span>
                      <span className="price-duration">yr</span>
                    </div>
                  </div>
                  {/*/.prices */}
                  <ul className="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
                    <li className="relative !pl-6">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>1</strong> Project{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>100K</strong> API Access{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>100MB</strong> Storage{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell" />
                      <span>
                        {" "}
                        Weekly <strong>Reports</strong>{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell" />
                      <span>
                        {" "}
                        7/24 <strong>Support</strong>
                      </span>
                    </li>
                  </ul>
                  <a
                    href="#"
                    className="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]"
                  >
                    Choose Plan
                  </a>
                </div>
                {/*/.card-body */}
              </div>
              {/*/.pricing */}
            </div>
            {/*/column */}
            <div className="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]">
              <div className="pricing card !shadow-none !border-0">
                <div className="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]">
                  <div className="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]">
                    {" "}
                    <i className="uil uil-shopping-cart-alt before:content-['\ecbc']" />{" "}
                  </div>
                  <h4 className="card-title">Premium Plan</h4>
                  <div className="prices !text-[#343f52]">
                    <div
                      className={`price ${
                        isMonthly ? "price-show" : "price-hidden"
                      }  !justify-start`}
                    >
                      <span className="price-currency">$</span>
                      <span className="price-value">19</span>
                      <span className="price-duration">mo</span>
                    </div>
                    <div
                      className={`price ${
                        !isMonthly ? "price-show" : "price-hidden"
                      }  !justify-start`}
                    >
                      <span className="price-currency">$</span>
                      <span className="price-value">199</span>
                      <span className="price-duration">yr</span>
                    </div>
                  </div>
                  {/*/.prices */}
                  <ul className="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>5</strong> Projects{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>100K</strong> API Access{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>200MB</strong> Storage{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        {" "}
                        Weekly <strong>Reports</strong>
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell" />
                      <span>
                        {" "}
                        7/24 <strong>Support</strong>
                      </span>
                    </li>
                  </ul>
                  <a
                    href="#"
                    className="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]"
                  >
                    Choose Plan
                  </a>
                </div>
                {/*/.card-body */}
              </div>
              {/*/.pricing */}
            </div>
            {/*/column */}
            <div className="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]">
              <div className="pricing card !bg-[#edf2fc]">
                <div className="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]">
                  <div className="icon btn btn-circle btn-lg btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f]   active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]">
                    {" "}
                    <i className="uil uil-store before:content-['\ed04']" />{" "}
                  </div>
                  <h4 className="card-title">Corporate Plan</h4>
                  <div className="prices !text-[#343f52]">
                    <div
                      className={`price ${
                        isMonthly ? "price-show" : "price-hidden"
                      }  !justify-start`}
                    >
                      <span className="price-currency">$</span>
                      <span className="price-value">29</span>
                      <span className="price-duration">mo</span>
                    </div>
                    <div
                      className={`price ${
                        !isMonthly ? "price-show" : "price-hidden"
                      }  !justify-start`}
                    >
                      <span className="price-currency">$</span>
                      <span className="price-value">299</span>
                      <span className="price-duration">yr</span>
                    </div>
                  </div>
                  {/*/.prices */}
                  <ul className="pl-0 list-none bullet-bg bullet-primary !mt-7 !mb-8">
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>20</strong> Projects{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>300K</strong> API Access{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>500MB</strong> Storage{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        {" "}
                        Weekly <strong>Reports</strong>
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !text-white bg-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        {" "}
                        7/24 <strong>Support</strong>
                      </span>
                    </li>
                  </ul>
                  <a
                    href="#"
                    className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f]   active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
                  >
                    Choose Plan
                  </a>
                </div>
                {/*/.card-body */}
              </div>
              {/*/.pricing */}
            </div>
            {/*/column */}
            <div className="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] max-w-full !mt-[30px]">
              <div className="pricing card !shadow-none !border-0">
                <div className="card-body flex-[1_1_auto] py-[60px] px-[40px] !border-0 border-[#fff]">
                  <div className="icon btn btn-circle btn-lg btn-soft-primary pointer-events-none !p-0 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !rounded-[100%]">
                    {" "}
                    <i className="uil uil-store-alt before:content-['\ecf9']" />{" "}
                  </div>
                  <h4 className="card-title">Community Plan</h4>
                  <div className="prices !text-[#343f52]">
                    <div
                      className={`price ${
                        isMonthly ? "price-show" : "price-hidden"
                      }  !justify-start`}
                    >
                      <span className="price-currency">$</span>
                      <span className="price-value">49</span>
                      <span className="price-duration">mo</span>
                    </div>
                    <div
                      className={`price ${
                        !isMonthly ? "price-show" : "price-hidden"
                      }  !justify-start`}
                    >
                      <span className="price-currency">$</span>
                      <span className="price-value">499</span>
                      <span className="price-duration">yr</span>
                    </div>
                  </div>
                  {/*/.prices */}
                  <ul className="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>90</strong> Projects{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>900K</strong> API Access{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        <strong>900MB</strong> Storage{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        {" "}
                        Weekly <strong>Reports</strong>{" "}
                      </span>
                    </li>
                    <li className="relative !pl-6 !mt-[0.35rem]">
                      <i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
                      <span>
                        {" "}
                        7/24 <strong>Support</strong>
                      </span>
                    </li>
                  </ul>
                  <a
                    href="#"
                    className="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]"
                  >
                    Choose Plan
                  </a>
                </div>
                {/*/.card-body */}
              </div>
              {/*/.pricing */}
            </div>
          </div>
          {/*/.row */}
        </div>
        {/*/.pricing-wrapper */}
      </div>
      {/* /.container */}

      {/* /.container */}
    </section>
  );
}