"use client";
import { ProgressiveBlur } from "@/components/ui/progressive-blur";
import { Play, XIcon } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";
import { useState } from "react";

function index() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  return (
    <>
      <section className="relative h-full py-14 bg-black text-white">
        <article
          className={"max-w-screen-md mx-auto text-center space-y-2 pb-7"}
        >
          <h1 className={"text-4xl  font-medium"}>
            What our client think about us
          </h1>
          <p className={"mx-auto text-gray-500"}>
            Let's hear how holidayout client's feels about our service
          </p>
        </article>
        <div className="max-w-screen-xl 2xl:px-0 px-4 mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* Stats card */}
            <div className="bg-blue-600 rounded-2xl p-8 flex flex-col justify-between">
              <p className="text-white/80 text-sm mb-2">Review</p>
              <div>
                <h3 className="text-4xl font-bold text-white pb-2">Easy</h3>
                <div>
                  <h3 className="text-xl font-bold text-white">
                    I never thought Holiday booking is that easy, thanks for
                    holidaout
                  </h3>
                  <p className="text-white/80 mt-4">- John Dale</p>
                </div>
              </div>
            </div>
            {/* Main testimonial */}
            <motion.div
              layoutId="video-dialog"
              onClick={() => setIsModalOpen(!isModalOpen)}
              className="col-span-1 md:col-span-2 cursor-pointer rounded-2xl overflow-hidden relative h-[400px] row-start-1 group"
            >
              <Image
                src="https://images.unsplash.com/photo-1543269664-56d93c1b41a6?q=80&w=2070&auto=format&fit=crop"
                alt="Friends taking selfie"
                fill
                className="object-cover"
              />
              <ProgressiveBlur
                className="pointer-events-none absolute bottom-0 left-0 h-[30%] w-full "
                blurIntensity={2}
              />
              <div className="absolute bottom-0 p-6 flex items-center justify-between">
                <div>
                  <h3 className="sm:text-2xl text-xl font-semibold text-white">
                    “Holidaout helped me discover new places and experiences.”
                  </h3>
                  <p className="text-white/80 mt-2">- Cynthia Morgan</p>
                </div>
                <button className="sm:w-20 w-16 transition-all duration-300 ease-out  sm:h-20 h-16 rounded-full bg-white/20 group-hover:bg-white  backdrop-blur-md grid place-content-center shrink-0">
                  <Play className="fill-white group-hover:fill-black group-hover:stroke-black stroke-white transition-all duration-300 " />
                </button>
              </div>
            </motion.div>

            {/* Stats card */}
            <div className="bg-neutral-950 rounded-2xl relative p-8  h-full  group flex flex-col justify-between">
              <img
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/customer/netflix.png`}
                alt="Friends taking selfie"
                className="object-cover  w-28 grayscale"
              />
              <div>
                <h3 className="sm:text-xl text-lg sm:py-2 py-4 font-bold text-white">
                  “What I really appreciate about UI Layouts is how much time it
                  saves me — it lets me focus on what truly matters: running the
                  business.”
                </h3>
                <p className="text-white/80 mt-2">- Cynthia Morgan</p>
              </div>
            </div>
            {/* Stats card */}
            <div className="bg-neutral-950 rounded-2xl p-8 flex flex-col h-full justify-between">
              <p className="text-white/80 text-sm mb-2">Facts and Numbers</p>
              <div>
                <h3 className="text-6xl font-bold text-white">30%</h3>
                <p className="text-white text-4xl mt-4">
                  Of customers recommended Holidayalot.
                </p>
              </div>
            </div>
            {/* Stats card */}
            <div className="bg-neutral-950 rounded-2xl p-8 flex flex-col gap-4 h-full justify-between">
              <div>
                <p className="text-white/80 text-sm mb-2">Success Story</p>
                <h3 className="text-2xl leading-[120%] font-semibold text-white">
                  How Layouts Became famous by using our services
                </h3>
              </div>
              <img
                src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?q=80&w=2070&auto=format&fit=crop"
                alt="Friends taking selfie"
                className="object-cover rounded-xl"
              />
            </div>
          </div>
        </div>
      </section>
      <AnimatePresence>
        {isModalOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            key="overlay"
            className="bg-black/40 backdrop-blur-lg fixed inset-0 z-50 top-0 left-0 bottom-0 right-0 w-full h-full grid place-content-center"
            onClick={() => {
              setIsModalOpen(false);
            }}
          >
            <motion.div
              layoutId="video-dialog"
              onClick={(e) => e.stopPropagation()}
              className="md:h-fit h-[60vh] md:w-[60%] w-[90%] mx-auto rounded-2xl relative cursor-default text-white p-4"
            >
              <video
                autoPlay
                muted
                loop
                controls
                className="h-full w-full object-cover rounded-2xl"
              >
                <source
                  src={
                    "https://videos.pexels.com/video-files/30877570/13203088_2560_1440_30fps.mp4"
                  }
                  type="video/mp4"
                />
              </video>
              <button
                onClick={() => setIsModalOpen(false)}
                className="absolute right-6 top-6 p-3 text-zinc-50 cursor-pointer bg-gray-900   rounded-full dark:hover:bg-gray-800"
                type="button"
                aria-label="Close dialog"
              >
                <XIcon size={24} />
              </button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

export default index;
testimonials9
