export function ReviewTestimonialsWithVideo() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-6 text-sm font-medium text-gray-600 max-lg:text-center">
          OUR CUSTOMERS
        </div>
        <h2 className="font-manrope mb-16 text-4xl font-bold text-gray-900 max-lg:text-center">
          Don't take it from us
        </h2>
        <div className="mx-auto grid max-w-md grid-cols-1 gap-8 md:max-w-2xl md:grid-cols-2 lg:max-w-full lg:grid-cols-3">
          <div className="lg:-order-none grid grid-cols-1 gap-8 md:order-last md:col-span-2 md:grid-cols-2 lg:col-span-1 lg:grid-cols-1">
            <div className="group rounded-xl border border-gray-200 bg-gray-50 p-6 transition-all duration-500 hover:border-gray-400 hover:bg-emerald-600">
              <p className="border-b border-gray-300 pb-6 text-base font-normal text-gray-600 transition-all duration-500 group-hover:text-white">
                Experience peace of mind and confidence with Pipe's cutting-edge
                funding solutions. Our platform enables you to
              </p>
              <div className="mt-6 flex items-center justify-between gap-3">
                <div className="block">
                  <h6 className="text-base font-medium text-gray-900 transition-all duration-500 group-hover:text-white">
                    Noah Robinson
                  </h6>
                  <p className="text-xs font-normal text-indigo-600 transition-all duration-500 group-hover:text-white">
                    Product Designer
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  {/* SVG removed */}
                  <p className="text-base font-semibold text-indigo-600 transition-all duration-500 group-hover:text-white">
                    4.5
                  </p>
                </div>
              </div>
            </div>
            <div className="group rounded-xl border border-gray-200 bg-gray-50 p-6 transition-all duration-500 hover:border-gray-400 hover:bg-emerald-600">
              <p className="border-b border-gray-300 pb-6 text-base font-normal text-gray-600 transition-all duration-500 group-hover:text-white">
                Discover unparalleled peace of mind and unwavering confidence
                with Pipe's revolutionary funding solutions.
              </p>
              <div className="mt-6 flex items-center justify-between gap-3">
                <div className="block">
                  <h6 className="text-base font-medium text-gray-900 transition-all duration-500 group-hover:text-white">
                    Jackson Bennett
                  </h6>
                  <p className="text-xs font-normal text-indigo-600 transition-all duration-500 group-hover:text-white">
                    Design Lead
                  </p>
                </div>
                <div className="flex items-center gap-2">
                  {/* SVG removed */}
                  <p className="text-base font-semibold text-indigo-600 transition-all duration-500 group-hover:text-white">
                    4.5
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className="group rounded-xl border border-gray-200 bg-gray-50 p-6 transition-all duration-500 hover:border-gray-400 hover:bg-emerald-600">
            <div className="flex w-full items-center justify-center">
              <img
                src="https://pagedone.io/asset/uploads/1711606520.png"
                alt="image"
                className="mx-auto h-auto w-full rounded-lg object-cover"
              />
              <button className="absolute z-10 rounded-full border border-white bg-white/20 p-4 text-white transition-all duration-700 hover:scale-110">
                {/* SVG removed */}
              </button>
            </div>
            <p className="border-b border-gray-300 py-6 text-base font-normal text-gray-600 transition-all duration-500 group-hover:text-white">
              Discover the peace of mind and confidence that comes with
              accessing Pipe's innovative funding.
            </p>
            <div className="mt-6 flex items-center justify-between gap-3">
              <div className="block">
                <h6 className="text-base font-medium text-gray-900 transition-all duration-500 group-hover:text-white">
                  Ethan Miller
                </h6>
                <p className="text-xs font-normal text-indigo-600 transition-all duration-500 group-hover:text-white">
                  CEO
                </p>
              </div>
              <div className="flex items-center gap-2">
                {/* SVG removed */}
                <p className="text-base font-semibold text-indigo-600 transition-all duration-500 group-hover:text-white">
                  4.5
                </p>
              </div>
            </div>
          </div>
          <div className="group flex flex-col justify-between rounded-xl border border-gray-200 bg-gray-50 p-6 transition-all duration-500 hover:border-gray-400 hover:bg-emerald-600">
            <p className="text-base font-normal text-gray-600 transition-all duration-500 group-hover:text-white">
              Experience a newfound sense of tranquility and confidence with
              Pipe's state-of-the-art funding solutions. Our platform seamlessly
              empowers you to overcome financial challenges with ease. Whether
              you're seeking stability or aiming for growth, Pipe equips you
              with the tools and resources needed to navigate your financial
              journey effortlessly.
            </p>
            <div className="flex items-center justify-between gap-3 border-t border-gray-300 pt-6">
              <div className="block">
                <h6 className="text-base font-medium text-gray-900 transition-all duration-500 group-hover:text-white">
                  Noah Robinson
                </h6>
                <p className="text-xs font-normal text-indigo-600 transition-all duration-500 group-hover:text-white">
                  Product Designer
                </p>
              </div>
              <div className="flex items-center gap-2">
                {/* SVG removed */}
                <p className="text-base font-semibold text-indigo-600 transition-all duration-500 group-hover:text-white">
                  4.5
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}