import { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "@/plugins";
import Link from "next/link";
import Portfilio11 from "../../../public/assets/imgs/portfolio/1/1.jpg";
import Portfilio12 from "../../../public/assets/imgs/portfolio/1/2.jpg";
import Portfilio13 from "../../../public/assets/imgs/portfolio/1/3.jpg";
import Portfilio14 from "../../../public/assets/imgs/portfolio/1/4.jpg";
import Portfilio15 from "../../../public/assets/imgs/portfolio/1/5.jpg";
import Portfilio16 from "../../../public/assets/imgs/portfolio/1/6.jpg";
import Portfilio17 from "../../../public/assets/imgs/portfolio/1/7.jpg";
import Portfilio18 from "../../../public/assets/imgs/portfolio/1/8.jpg";
import Portfilio19 from "../../../public/assets/imgs/portfolio/1/9.jpg";
import Portfilio20 from "../../../public/assets/imgs/portfolio/1/10.jpg";
import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

const PortfolioElementV2 = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      let device_width = window.innerWidth;
      let tHero = gsap.context(() => {
        if (device_width > 767) {
          let portfolioline = gsap.timeline({
            scrollTrigger: {
              trigger: ".portfolio__area",
              start: "top center-=200",
              pin: ".portfolio__text",
              end: "bottom bottom+=80",
              markers: false,
              pinSpacing: false,
              scrub: 1,
            },
          });

          portfolioline.to(".portfolio__text", {
            scale: 3,
            duration: 1,
          });
          portfolioline.to(".portfolio__text", {
            scale: 3,
            duration: 1,
          });
          portfolioline.to(
            ".portfolio__text",
            {
              scale: 1,
              duration: 1,
            },
            "+=2"
          );
        }

        let portfolio_lists = gsap.utils.toArray(".portfolio__item");
        portfolio_lists.forEach((portfolio, i) => {
          gsap.set(portfolio, { opacity: 0.7 });
          let t1 = gsap.timeline();

          t1.set(portfolio, {
            position: "relative",
          });
          t1.to(portfolio, {
            scrollTrigger: {
              trigger: portfolio,
              scrub: 2,
              duration: 1.5,
              start: "top bottom+=100",
              end: "bottom center",
              markers: false,
            },
            scale: 1,
            opacity: 1,
            rotateX: 0,
          });
        });
      });
      return () => tHero.revert();
    }
  }, []);
  return (
    <>
      <section className="portfolio__area pb-440">
        <div className="container">
          <div className="row top_row">
            <h2 className="portfolio__text">Portfolio</h2>
            <div className="portfolio__list-1">
              <div className="portfolio__item">
                <Link href="http://doitai.pro/" target="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    className="mover"
                    src={Portfilio11}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">DoItAI.Pro Gen AI Platform</h3>
                  <p>Web Development</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="https://brandoptions.ae/" target="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio12}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">Brand Options Advertising</h3>
                  <p>Web Development</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="https://www.bonobos.agency/" target="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio13}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">Bonobos Advertising Agency</h3>
                  <p>Web Development</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="https://masar.med.sa/" target="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio14}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">Masar Rehabilitation Center</h3>
                  <p>Web Development</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="https://biznesclinics.com/" target="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio20}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">Biznes Clinics Startup Growth Platform</h3>
                  <p>Web Development</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="https://nobilita.homes/" target="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio15}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">nobilità Furniture</h3>
                  <p>Web Development</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio16}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">Awamer Food Delivery</h3>
                  <p>Mobile Development</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="https://www.instagram.com/ankhelle.eg/" target="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio17}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">Ankhelle Shoe Store</h3>
                  <p>Branding</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio18}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">Tech Avenue Electronics Store</h3>
                  <p>Branding</p>
                </div>
              </div>
              <div className="portfolio__item">
                <Link href="https://www.instagram.com/cometooman/" target="#">
                  <Image
                    priority
                    style={{ width: "100%", height: "auto" }}
                    src={Portfilio19}
                    alt="Portfolio Image"
                  />
                </Link>
                <div className="portfolio__info">
                  <h3 className="portfolio__title">Oman Visitors Tourism Platform</h3>
                  <p>Branding</p>
                </div>
              </div>
            </div>
          </div>

          {/* <div className="row row_bottom">
            <div className="col-xxl-12">
              <div
                className="portfolio__btn btn_wrapper"
                data-speed="1"
                data-lag="0.2"
              >
                <Link
                  className="wc-btn-secondary btn-hover btn-item"
                  href="/portfolio"
                >
                  <span></span>Load More
                </Link>
              </div>
            </div>
          </div> */}
        </div>
      </section>
    </>
  );
};

export default PortfolioElementV2;