export function HorizontalCardAsTestimonial() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-12">
          <h2 className="font-manrope mb-4 text-center text-4xl font-bold text-gray-900">
            Simple transparent pricing{" "}
          </h2>
          <p className="text-center text-lg leading-6 text-gray-500">
            No contract. No surprise fees
          </p>
        </div>
        {/*Grid*/}
        <div className="space-y-8 sm:gap-6 lg:grid lg:grid-cols-3 lg:items-center lg:space-y-0 xl:gap-8">
          {/*Pricing Card*/}
          <div className="group mx-auto w-full max-w-sm rounded-2xl border border-solid border-gray-300 p-6 transition-all duration-500 hover:bg-indigo-600 lg:max-w-full xl:p-8">
            <div className="relative mb-8 border-b border-solid border-gray-200 pb-8 group-hover:border-indigo-400">
              <div className="mb-2 flex items-center">
                <span className="font-manrope text-4xl font-bold text-gray-900 group-hover:text-white">
                  $0
                </span>
                <span className="ml-3 text-xl text-gray-500 group-hover:text-white">
                  |&nbsp; Month
                </span>
              </div>
              <div className="mb-8 block">
                <h3 className="font-manrope text-2xl font-bold text-indigo-600 group-hover:text-white">
                  Free plan
                </h3>
              </div>
              <a
                href="javascript:;"
                className="block w-full rounded-full bg-indigo-600 px-7 py-3 text-center text-base font-semibold text-white shadow-sm transition-all duration-500 group-hover:bg-white group-hover:text-indigo-600"
              >
                Select Plan
              </a>
            </div>
            {/*List*/}
            <ul className="space-y-6 text-left text-gray-800 group-hover:text-white">
              <li className="flex items-center space-x-4">
                {/* Icon */}
                {/* SVG removed */}
                <span>AI advisor for a day</span>
              </li>
              <li className="flex items-center space-x-4">
                {/* Icon */}
                {/* SVG removed */}
                <span>2 auto tracking </span>
              </li>
              <li className="flex items-center space-x-4">
                {/* Icon */}
                {/* SVG removed */}
                <span>7 Day transaction clearing </span>
              </li>
              <li className="flex items-center space-x-4">
                {/* Icon */}
                {/* SVG removed */}
                <span>24/7 Customer support</span>
              </li>
            </ul>
            {/*List End*/}
          </div>
          {/*Pricing Card*/}
          <div className="group mx-auto w-full max-w-sm rounded-2xl border border-solid border-gray-300 p-6 transition-all duration-500 hover:bg-indigo-600 lg:max-w-full xl:p-8">
            <div className="relative mb-8 border-b border-solid border-gray-200 pb-8 group-hover:border-indigo-400">
              <div className="mb-2 flex items-center">
                <span className="font-manrope text-4xl font-bold text-gray-900 group-hover:text-white">
                  $150
                </span>
                <span className="ml-3 text-xl text-gray-500 group-hover:text-white">
                  |&nbsp; Month
                </span>
              </div>
              <div className="mb-8 block">
                <h3 className="font-manrope text-2xl font-bold text-indigo-600 group-hover:text-white">
                  Business plan
                </h3>
              </div>
              <a
                href="javascript:;"
                className="block w-full rounded-full bg-indigo-600 px-7 py-3 text-center text-base font-semibold text-white shadow-sm transition-all duration-500 group-hover:bg-white group-hover:text-indigo-600"
              >
                Select Plan
              </a>
            </div>
            {/*List*/}
            <ul className="space-y-6 text-left text-gray-800 group-hover:text-white">
              <li className="flex items-center space-x-4">
                {/* Icon */}
                {/* SVG removed */}
                <span>AI advisor full time</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>
            </ul>
            {/*List End*/}
          </div>
          {/*Pricing Card*/}
          <div className="group mx-auto w-full max-w-sm rounded-2xl border border-solid border-gray-300 p-6 transition-all duration-500 hover:bg-indigo-600 lg:max-w-full xl:p-8">
            <div className="relative mb-8 border-b border-solid border-gray-200 pb-8 group-hover:border-indigo-400">
              <div className="mb-2 flex items-center">
                <span className="font-manrope text-4xl font-bold text-gray-900 group-hover:text-white">
                  $180
                </span>
                <span className="ml-3 text-xl text-gray-500 group-hover:text-white">
                  |&nbsp; Month
                </span>
              </div>
              <div className="mb-8 block">
                <h3 className="font-manrope text-2xl font-bold text-indigo-600 group-hover:text-white">
                  Enterprise plan
                </h3>
              </div>
              <a
                href="javascript:;"
                className="block w-full rounded-full bg-indigo-600 px-7 py-3 text-center text-base font-semibold text-white shadow-sm transition-all duration-500 group-hover:bg-white group-hover:text-indigo-600"
              >
                Select Plan
              </a>
            </div>
            {/*List*/}
            <ul className="space-y-6 text-left text-gray-800 group-hover:text-white">
              <li className="flex items-center space-x-4">
                {/* Icon */}
                {/* SVG removed */}
                <span>AI advisor full time</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>
            </ul>
            {/*List End*/}
          </div>
        </div>
        {/*Grid End*/}
      </div>
    </section>
  )
}