export function HighlightPricingFeature() {
  return (
    <section className="py-24">
      <div className="tabs mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid w-full items-center justify-between gap-8 pb-12 lg:flex lg:gap-32">
          <h2 className="font-manrope max-w-3xl text-center text-5xl leading-normal font-semibold text-gray-900 lg:text-start">
            Collaborative Strategies for Success in Product Innovation and
            Growth
          </h2>
          <div className="flex items-center justify-center">
            <label className="relative mr-4 text-xl font-medium text-gray-900 checked:after:text-gray-500">
              Bill Monthly
            </label>
            <input
              type="checkbox"
              id="basic-with-description"
              className="relative h-6 w-11 shrink-0 cursor-pointer appearance-none rounded-full bg-gray-100 bg-none p-0.5 whitespace-normal transition-colors duration-200 ease-in-out before:inline-block before:h-5 before:w-5 before:translate-x-0 before:transform before:rounded-full before:bg-gray-900 before:shadow before:transition before:duration-200 before:ease-in-out checked:bg-gray-100 checked:bg-none checked:before:translate-x-full checked:before:bg-gray-900 focus:border-blue-600"
            />
            <label className="relative ml-4 text-xl font-medium whitespace-normal text-gray-500">
              Bill Yearly
            </label>
          </div>
        </div>
        <div
          id="tabs-with-background-1"
          role="tabpanel"
          aria-labelledby="tabs-with-background-item-1"
          className="tabcontent"
        >
          <div className="relative flex items-center">
            {/*Slider Indicator*/}
            <div className="swiper mySwiper">
              <div className="swiper-wrapper">
                <div className="swiper-slide">
                  <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-between gap-10 rounded-3xl bg-gray-100 p-12 lg:max-w-3xl lg:flex-row lg:gap-32 lg:px-12 lg:py-12 xl:max-w-4xl">
                    <div className="block w-full lg:w-1/2">
                      <span className="flex justify-center pb-2.5 text-xl leading-loose font-medium text-gray-600 line-through lg:justify-start">
                        $6,000
                      </span>
                      <div className="mb-8 text-center text-lg leading-7 font-medium text-gray-500 lg:text-start">
                        <span className="font-manrope text-5xl leading-normal font-bold text-black xl:text-6xl">
                          $ 5,000
                        </span>
                        /Month
                      </div>
                      <button className="inline-flex w-full items-center justify-center rounded-full bg-gray-900 px-6 py-2.5 shadow transition-all duration-75 ease-in-out hover:bg-gray-800">
                        <span className="px-2 text-base leading-relaxed font-semibold text-white">
                          Purchase
                        </span>
                      </button>
                    </div>
                    <div className="w-full lg:w-1/2">
                      <ul className="space-y-5 text-left text-base leading-relaxed font-normal text-gray-800 group-hover:text-white">
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>AI Advisor</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Unlimited auto tracking</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>1 Day transaction clearing </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Priority customer support </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>All Widget Access </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Everything in team plan</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-between gap-10 rounded-3xl bg-gray-100 p-12 lg:max-w-3xl lg:flex-row lg:gap-32 lg:px-12 lg:py-12 xl:max-w-4xl">
                    <div className="block w-full lg:w-1/2">
                      <span className="flex justify-center pb-2.5 text-xl leading-loose font-medium text-gray-600 line-through lg:justify-start">
                        $5,000
                      </span>
                      <div className="mb-8 text-center text-lg leading-7 font-medium text-gray-500 lg:text-start">
                        <span className="font-manrope text-5xl leading-normal font-bold text-black xl:text-6xl">
                          $ 4,000
                        </span>
                        /Month
                      </div>
                      <button className="inline-flex w-full items-center justify-center rounded-full bg-gray-900 px-6 py-2.5 shadow transition-all duration-75 ease-in-out hover:bg-gray-800">
                        <span className="px-2 text-base leading-relaxed font-semibold text-white">
                          Purchase
                        </span>
                      </button>
                    </div>
                    <div className="w-full lg:w-1/2">
                      <ul className="space-y-5 text-left text-base leading-relaxed font-normal text-gray-800 group-hover:text-white">
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>AI Advisor</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Unlimited auto tracking</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>1 Day transaction clearing </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Priority customer support </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>All Widget Access </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Everything in team plan</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-between gap-10 rounded-3xl bg-gray-100 p-12 lg:max-w-3xl lg:flex-row lg:gap-32 lg:px-12 lg:py-12 xl:max-w-4xl">
                    <div className="block w-full lg:w-1/2">
                      <span className="flex justify-center pb-2.5 text-xl leading-loose font-medium text-gray-600 line-through lg:justify-start">
                        $6,500
                      </span>
                      <div className="mb-8 text-center text-lg leading-7 font-medium text-gray-500 lg:text-start">
                        <span className="font-manrope text-5xl leading-normal font-bold text-black xl:text-6xl">
                          $ 5,500
                        </span>
                        /Month
                      </div>
                      <button className="inline-flex w-full items-center justify-center rounded-full bg-gray-900 px-6 py-2.5 shadow transition-all duration-75 ease-in-out hover:bg-gray-800">
                        <span className="px-2 text-base leading-relaxed font-semibold text-white">
                          Purchase
                        </span>
                      </button>
                    </div>
                    <div className="w-full lg:w-1/2">
                      <ul className="space-y-5 text-left text-base leading-relaxed font-normal text-gray-800 group-hover:text-white">
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>AI Advisor</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Unlimited auto tracking</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>1 Day transaction clearing </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Priority customer support </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>All Widget Access </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Everything in team plan</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <button
                id="slider-button-left"
                className="swiper-button-prev group hidden h-16 w-16 items-center justify-center rounded-full border border-solid border-gray-500 p-2 transition-all duration-500 hover:bg-black lg:flex"
                data-carousel-prev
              >
                {/* SVG removed */}
              </button>
              <button
                id="slider-button-right"
                className="swiper-button-next group hidden h-16 w-16 items-center justify-center rounded-full border border-solid border-gray-500 p-2 transition-all duration-500 hover:bg-black lg:flex"
                data-carousel-next
              >
                {/* SVG removed */}
              </button>
            </div>
          </div>
        </div>
        <div
          id="tabs-with-background-2"
          role="tabpanel"
          aria-labelledby="tabs-with-background-item-2"
          className="tabcontent"
        >
          <div className="relative flex items-center">
            {/*Slider Indicator*/}
            <div className="swiper mySwiper-1">
              <div className="swiper-wrapper">
                <div className="swiper-slide">
                  <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-between gap-10 rounded-3xl bg-gray-100 p-12 lg:max-w-3xl lg:flex-row lg:gap-32 lg:px-12 lg:py-12 xl:max-w-4xl">
                    <div className="block w-full lg:w-1/2">
                      <span className="flex justify-center pb-2.5 text-xl leading-loose font-medium text-gray-600 line-through lg:justify-start">
                        $7,000
                      </span>
                      <div className="mb-8 text-center text-lg leading-7 font-medium text-gray-500 lg:text-start">
                        <span className="font-manrope text-5xl leading-normal font-bold text-black xl:text-6xl">
                          $ 6,000
                        </span>
                        /Month
                      </div>
                      <button className="inline-flex w-full items-center justify-center rounded-full bg-gray-900 px-6 py-2.5 shadow transition-all duration-75 ease-in-out hover:bg-gray-800">
                        <span className="px-2 text-base leading-relaxed font-semibold text-white">
                          Purchase
                        </span>
                      </button>
                    </div>
                    <div className="w-full lg:w-1/2">
                      <ul className="space-y-5 text-left text-base leading-relaxed font-normal text-gray-800 group-hover:text-white">
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>AI Advisor</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Unlimited auto tracking</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>1 Day transaction clearing </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Priority customer support </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>All Widget Access </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Everything in team plan</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-between gap-10 rounded-3xl bg-gray-100 p-12 lg:max-w-3xl lg:flex-row lg:gap-32 lg:px-12 lg:py-12 xl:max-w-4xl">
                    <div className="block w-full lg:w-1/2">
                      <span className="flex justify-center pb-2.5 text-xl leading-loose font-medium text-gray-600 line-through lg:justify-start">
                        $8,000
                      </span>
                      <div className="mb-8 text-center text-lg leading-7 font-medium text-gray-500 lg:text-start">
                        <span className="font-manrope text-5xl leading-normal font-bold text-black xl:text-6xl">
                          $ 7,000
                        </span>
                        /Month
                      </div>
                      <button className="inline-flex w-full items-center justify-center rounded-full bg-gray-900 px-6 py-2.5 shadow transition-all duration-75 ease-in-out hover:bg-gray-800">
                        <span className="px-2 text-base leading-relaxed font-semibold text-white">
                          Purchase
                        </span>
                      </button>
                    </div>
                    <div className="w-full lg:w-1/2">
                      <ul className="space-y-5 text-left text-base leading-relaxed font-normal text-gray-800 group-hover:text-white">
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>AI Advisor</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Unlimited auto tracking</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>1 Day transaction clearing </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Priority customer support </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>All Widget Access </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Everything in team plan</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div className="swiper-slide">
                  <div className="mx-auto flex w-full max-w-xl flex-col items-center justify-between gap-10 rounded-3xl bg-gray-100 p-12 lg:max-w-3xl lg:flex-row lg:gap-32 lg:px-12 lg:py-12 xl:max-w-4xl">
                    <div className="block w-full lg:w-1/2">
                      <span className="flex justify-center pb-2.5 text-xl leading-loose font-medium text-gray-600 line-through lg:justify-start">
                        $7,500
                      </span>
                      <div className="mb-8 text-center text-lg leading-7 font-medium text-gray-500 lg:text-start">
                        <span className="font-manrope text-5xl leading-normal font-bold text-black xl:text-6xl">
                          $ 6,500
                        </span>
                        /Month
                      </div>
                      <button className="inline-flex w-full items-center justify-center rounded-full bg-gray-900 px-6 py-2.5 shadow transition-all duration-75 ease-in-out hover:bg-gray-800">
                        <span className="px-2 text-base leading-relaxed font-semibold text-white">
                          Purchase
                        </span>
                      </button>
                    </div>
                    <div className="w-full lg:w-1/2">
                      <ul className="space-y-5 text-left text-base leading-relaxed font-normal text-gray-800 group-hover:text-white">
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>AI Advisor</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Unlimited auto tracking</span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>1 Day transaction clearing </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Priority customer support </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>All Widget Access </span>
                        </li>
                        <li className="flex items-center space-x-4">
                          {/* Icon */}
                          {/* SVG removed */}
                          <span>Everything in team plan</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <button
                id="slider-button-left"
                className="swiper-button-prev group hidden h-16 w-16 items-center justify-center rounded-full border border-solid border-gray-500 p-2 transition-all duration-500 hover:bg-black lg:flex"
                data-carousel-prev
              >
                {/* SVG removed */}
              </button>
              <button
                id="slider-button-right"
                className="swiper-button-next group hidden h-16 w-16 items-center justify-center rounded-full border border-solid border-gray-500 p-2 transition-all duration-500 hover:bg-black lg:flex"
                data-carousel-next
              >
                {/* SVG removed */}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}