import { useEffect, useRef } from "react";
import { gsap } from "gsap";

const SecondSlide = () => {
  const firstImageRef = useRef(null);
  useEffect(() => {
    if (firstImageRef.current)
      gsap.to(firstImageRef.current, {
        left: "151%",
        top: "18%",
        duration: 1.5,
      });
  }, []);

  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 w-[1500px] mx-auto leading-[87px]">
        Решаем задачи с помощью
        <br /> интерактивных решений
      </p>
      <img
        className="w-[60%] mx-auto"
        src="/images/slides/second-slide-1.svg"
        alt="image"
      />
      <img
        ref={firstImageRef}
        className="absolute left-[167%] scale-75 top-[2%]"
        src="/images/slides/second-slide-2.svg"
        alt="image"
      />
      <p className="absolute text-white text-4xl left-[168%] w-[500px] top-[69%]">
        Мы презентуем ваш бизнес с помощью инновационных технологий
        визуализации: 3D, виртуальной(VR) и дополненной (AR)реальности, 360
        фото, видео, аэросъемки.
      </p>
    </div>
  );
};

export default SecondSlide;
