"use client";
import { useMediaQuery } from "@/hooks/use-media-query";
import { ProgressiveBlur } from "@/components/ui/progressive-blur";
import { TimelineContent } from "@/components/ui/timeline-animation";
import { motion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import AnimatedBackground from "@/components/ui/animated-gradientbg";
import Header from "./header";

const images = [
  { src: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/lawyer.png`, alt: "lawyer" },
  { src: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/civil-engineer.png`, alt: "engineer" },
  { src: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/women-doctor.png`, alt: "doctor" },
  { src: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/man-doctor.png`, alt: "doctor" },
  { src: `${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/chef.png`, alt: "chef" },
];

function RotatingImages() {
  const [imgOrder, setImgOrder] = useState([0, 1, 2, 3, 4]);
  const [swapIndex, setSwapIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setImgOrder((prev) => {
        const newOrder = [...prev];
        // Swap center (2) with the current swap partner
        const temp = newOrder[2];
        newOrder[2] = newOrder[swapIndex];
        newOrder[swapIndex] = temp;
        return newOrder;
      });

      // Update swap partner index (0, 1, 3, 4, then back to 0)
      setSwapIndex((prev) => {
        if (prev === 0) return 1;
        if (prev === 1) return 3;
        if (prev === 3) return 4;
        return 0; // After 4, go back to 0
      });
    }, 3000);

    return () => clearInterval(interval);
  }, [swapIndex]);

  const fadeTransition = { duration: 0.8, ease: "easeInOut" };

  return (
    <>
      <figure className="md:w-64 sm:w-52 w-40 h-fit relative z-[1] translate-x-52 sm:translate-y-8 translate-y-2 flex-shrink-0">
        <motion.img
          layoutId="hello"
          key={images[imgOrder[0]].src}
          src={images[imgOrder[0]].src}
          alt={images[imgOrder[0]].alt}
          className="w-full h-full object-contain"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={fadeTransition}
        />
      </figure>
      <figure className="md:w-72 sm:w-64 w-48 h-fit relative z-[1] translate-x-28 flex-shrink-0">
        <motion.img
          layoutId="hello-1"
          key={images[imgOrder[1]].src}
          src={images[imgOrder[1]].src}
          alt={images[imgOrder[1]].alt}
          className="w-full h-full object-contain"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={fadeTransition}
        />
      </figure>
      <figure className="h-fit relative z-[3] md:w-[20rem] sm:w-64 w-52 flex-shrink-0">
        <motion.img
          layoutId="hello-2"
          key={images[imgOrder[2]].src}
          src={images[imgOrder[2]].src}
          alt={images[imgOrder[2]].alt}
          className="w-full h-full object-contain"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={fadeTransition}
        />
      </figure>
      <figure className="md:w-72 sm:w-64 w-48 h-fit relative z-[2] -translate-x-28 flex-shrink-0">
        <motion.img
          layoutId="hello-3"
          key={images[imgOrder[3]].src}
          src={images[imgOrder[3]].src}
          alt={images[imgOrder[3]].alt}
          className="w-full h-full object-contain"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={fadeTransition}
        />
      </figure>
      <figure className="md:w-64 sm:w-52 w-40 h-fit -translate-x-52 relative z-[1] flex-shrink-0">
        <motion.img
          layoutId="hello-4"
          key={images[imgOrder[4]].src}
          src={images[imgOrder[4]].src}
          alt={images[imgOrder[4]].alt}
          className="w-full h-full object-contain"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={fadeTransition}
        />
      </figure>
    </>
  );
}

function index() {
  const isMobile = useMediaQuery("(max-width: 992px)");
  const heroRef = useRef<HTMLElement | null>(null);

  return (
    <>
      <Header />
      <main className="min-h-screen relative overflow-x-hidden bg-white" ref={heroRef}>
        <AnimatedBackground
          circles={[
            { fill: "#ed9fd7" },
            { fill: "#9b60cb" },
            { fill: "#e35043" },
            { fill: "#6756e5" },
          ]}
        />
        <motion.img
          initial={{ y: 20, opacity: 0, filter: "blur(10px)" }}
          animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
          src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutig-pattern.png`}
          alt="doctor"
          className="h-full object-cover absolute right-0 top-0 z-0"
        />
        <motion.img
          initial={{ y: 20, opacity: 0, filter: "blur(10px)" }}
          animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
          src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutig-pattern2.png`}
          alt="doctor"
          className="h-full object-cover absolute left-0 top-0 z-0 "
        />
        <section className="w-full max-w-screen-xl mx-auto 2xl:pb-0 pb-10">
          <div className=" pt-32 w-full">
            <article className="space-y-5 w-fit mx-auto text-center pb-10">
              <TimelineContent
                animationNum={0}
                timelineRef={heroRef}
                as="p"
                className="md:text-6xl sm:text-5xl text-4xl  font-semibold"
              >
                Why Hire People <br /> When You Can Hire AI?
              </TimelineContent>

              <TimelineContent
                animationNum={1}
                timelineRef={heroRef}
                as="p"
                className="flex items-center justify-center gap-2  text-lg text-zinc-700"
              >
                Cut Costs, Save Time, Let AI Do the Work!
              </TimelineContent>
              <TimelineContent
                as="button"
                type="button"
                animationNum={2}
                timelineRef={heroRef}
                className="p-3.5 font-semibold gap-2 mx-auto w-fit flex items-center backdrop-blur-2xl bg-gradient-to-t from-[#383838] from-100% to-[#1E1E1E] transition-all px-4 text-white rounded-full [box-shadow:inset_0px_1px_3px_rgba(255,255,255,0.25),0px_26px_27.4px_rgba(0,0,0,0.15),0px_6px_12px_rgba(0,0,0,0.12),0px_2px_5px_rgba(0,0,0,0.1)]"
              >
                <svg
                  width="26"
                  height="27"
                  viewBox="0 0 26 27"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <g clipPath="url(#clip0_4494_797)">
                    <g opacity="0.2">
                      <path
                        d="M16.2293 16.429L13.7573 23.2276C13.6995 23.3831 13.5956 23.5172 13.4595 23.6119C13.3233 23.7066 13.1614 23.7574 12.9955 23.7574C12.8297 23.7574 12.6678 23.7066 12.5316 23.6119C12.3955 23.5172 12.2915 23.3831 12.2338 23.2276L9.76586 16.429L2.96726 13.957C2.81177 13.8993 2.67766 13.7953 2.58296 13.6592C2.48826 13.523 2.4375 13.3611 2.4375 13.1953C2.4375 13.0294 2.48826 12.8675 2.58296 12.7313C2.67766 12.5952 2.81177 12.4912 2.96726 12.4335L9.76586 9.96556L12.2379 3.16697C12.2956 3.01148 12.3995 2.87737 12.5357 2.78267C12.6719 2.68797 12.8337 2.63721 12.9996 2.63721C13.1655 2.63721 13.3274 2.68797 13.4635 2.78267C13.5997 2.87737 13.7036 3.01148 13.7613 3.16697L16.2334 9.96556L23.032 12.4376C23.1874 12.4953 23.3216 12.5992 23.4163 12.7354C23.511 12.8716 23.5617 13.0335 23.5617 13.1993C23.5617 13.3652 23.511 13.5271 23.4163 13.6632C23.3216 13.7994 23.1874 13.9033 23.032 13.961L16.2293 16.429Z"
                        fill="white"
                      />
                    </g>
                    <path
                      d="M16.2293 16.429L13.7573 23.2276C13.6995 23.3831 13.5956 23.5172 13.4595 23.6119C13.3233 23.7066 13.1614 23.7574 12.9955 23.7574C12.8297 23.7574 12.6678 23.7066 12.5316 23.6119C12.3955 23.5172 12.2915 23.3831 12.2338 23.2276L9.76586 16.429L2.96726 13.957C2.81177 13.8993 2.67766 13.7953 2.58296 13.6592C2.48826 13.523 2.4375 13.3611 2.4375 13.1953C2.4375 13.0294 2.48826 12.8675 2.58296 12.7313C2.67766 12.5952 2.81177 12.4912 2.96726 12.4335L9.76586 9.96556L12.2379 3.16697C12.2956 3.01148 12.3995 2.87737 12.5357 2.78267C12.6719 2.68797 12.8337 2.63721 12.9996 2.63721C13.1655 2.63721 13.3274 2.68797 13.4635 2.78267C13.5997 2.87737 13.7036 3.01148 13.7613 3.16697L16.2334 9.96556L23.032 12.4376C23.1874 12.4953 23.3216 12.5992 23.4163 12.7354C23.511 12.8716 23.5617 13.0335 23.5617 13.1993C23.5617 13.3652 23.511 13.5271 23.4163 13.6632C23.3216 13.7994 23.1874 13.9033 23.032 13.961L16.2293 16.429Z"
                      stroke="white"
                      strokeWidth="1.7"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </g>
                  <defs>
                    <clipPath id="clip0_4494_797">
                      <rect
                        width="26"
                        height="26"
                        fill="white"
                        transform="translate(0 0.197266)"
                      />
                    </clipPath>
                  </defs>
                </svg>
                Hire Your AI Expert
              </TimelineContent>
            </article>
            <TimelineContent
              as="div"
              animationNum={3}
              timelineRef={heroRef}
              className="relative w-[95%] mx-auto md:h-[26rem] sm:h-[20rem] h-64 rounded-lg flex items-end justify-center gap-2 overflow-hidden"
              style={{
                backgroundImage: `url(${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutIQbg.png)`,
                backgroundSize: "cover",
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat",
              }}
            >
              <RotatingImages />
              {/* <motion.img
                initial={{ y: 20, opacity: 0, filter: "blur(10px)" }}
                animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
                transition={{ delay: 2.5 }}
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutig-pattern.png`}
                alt="doctor"
                className="w-96 h-full object-cover absolute right-0 top-0 "
              />
              <motion.img
                initial={{ y: 20, opacity: 0, filter: "blur(10px)" }}
                animate={{ y: 0, opacity: 1, filter: "blur(0px)" }}
                transition={{ delay: 2.5 }}
                src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/hero/layoutig-pattern2.png`}
                alt="doctor"
                className="w-96 h-full object-cover absolute left-0 top-0 "
              /> */}
              <ProgressiveBlur
                className="pointer-events-none absolute bottom-0 z-[4] left-0 h-[30%] w-full before:w-full before:h-full before:absolute before:bottom-0 before:bg-gradient-to-t before:from-black/80"
                blurIntensity={0.5}
                animate={"visible"}
                variants={{
                  hidden: { opacity: 0 },
                  visible: { opacity: 1 },
                }}
                transition={{ duration: 0.2, ease: "easeOut" }}
              />
              <div className="flex justify-center gap-5 lg:text-base sm:text-sm text-xs items-center absolute z-[4] py-2 bottom-0 w-full px-10 text-white">
                <button className="flex items-center gap-2 ">
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/icons/notebook-duotone.svg`}
                    alt="doctor"
                    className="w-6 "
                  />
                  {!isMobile && "Lawyer"}
                </button>
                <hr className="w-0.5 h-4 bg-white/40" />
                <button className="flex items-center   gap-2">
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/icons/fire-duotone.svg`}
                    alt="doctor"
                    className="w-6 "
                  />
                  {!isMobile && "Civil Engineer"}
                </button>
                <hr className="w-0.5 h-4 bg-white/40" />

                <button className="flex items-center gap-2">
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/icons/heartbeat-duotone.svg`}
                    alt="doctor"
                    className="w-6  "
                  />
                  {!isMobile && "Doctor"}
                </button>
                <hr className="w-0.5 h-4 bg-white/40" />

                <button className="flex items-center gap-2">
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/icons/cursor-click-duotone.svg`}
                    alt="doctor"
                    className="w-6"
                  />
                  {!isMobile && "Designer"}
                </button>
                <hr className="w-0.5 h-4 bg-white/40" />

                <button className="flex items-center gap-2">
                  <img
                    src={`${process.env.NEXT_PUBLIC_ANIMATION_URL}/icons/lightning-duotone.svg`}
                    alt="doctor"
                    className="w-86"
                  />
                  {!isMobile && "37 Professions to hire"}
                </button>
              </div>
            </TimelineContent>
          </div>
        </section>
      </main>
    </>
  );
}

export default index;
layoutiq
