import { useRef } from "react";

const FirstSlide = () => {
  const firstImageRef = useRef(null);
  const secondImageRef = useRef(null);

  //   useEffect(() => {
  //     if (firstImageRef.current) {
  //       console.log("imageRef.current", firstImageRef.current);
  //       gsap.fromTo(
  //         firstImageRef.current,
  //         { transform: "scale(2.0)" },
  //         {
  //           transform: "scale(1.6)",
  //           duration: 1.5,
  //           scrollTrigger: {
  //             trigger: firstImageRef.current,
  //             start: "10% bottom",
  //           },
  //         }
  //       );
  //       gsap.fromTo(
  //         secondImageRef.current,
  //         { transform: "scale(2.0)", left: "5%" },
  //         {
  //           transform: "scale(1.6)",
  //           left: "-5%",
  //           duration: 2.2,
  //           scrollTrigger: {
  //             trigger: firstImageRef.current,
  //             start: "10% bottom",
  //           },
  //         }
  //       );
  //     }
  //   }, []);
  return (
    <div className="flex flex-col justify-center align-middle min-w-[100vw] max-w-[100vw]">
      <p className="font-bold text-8xl text-wrap text-white mx-auto leading-[87px]">
        Технологии расширенной
        <br /> реальности для вашего бизнеса
      </p>

      {/* <motion.div
          initial={{ scale: 1.2 }}
          whileInView={{ scale: 1 }}
          viewport={{ amount: "all" }}
          transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98] }}
          className="flex flex-col gap-1"
        > */}
      <img
        ref={firstImageRef}
        className="absolute top-[40%]"
        src="/images/slides/first-slide-2.png"
        alt="image"
      />
      {/* </motion.div> */}
      <img
        ref={secondImageRef}
        className="absolute top-[40%] scale-150 left-[10%]"
        src="/images/slides/first-slide-1.png"
        alt="image"
      />
      <p className="absolute text-white text-4xl top-[85%] left-[57%]">
        Мы приглашаем вас в мир
        <br /> удивительного будущего с<br /> технологиями виртуальной <br /> и
        смешанной реальности
      </p>
    </div>
  );
};

export default FirstSlide;
