import { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "@/plugins";
import Link from "next/link";
import Thumbnail1 from "@/../public/assets/imgs/blog/detail/blog4/home-thumbnail.jpg";
import Thumbnail2 from "@/../public/assets/imgs/blog/detail/blog5/home-thumbnail.jpg";
import Thumbnail3 from "@/../public/assets/imgs/blog/detail/Blog1/home-thumbnail1.jpg";
import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

const DigitalAgencyBlog = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      let device_width = window.innerWidth;
      let tHero = gsap.context(() => {
        gsap.set(".blog__animation .blog__item", { x: 50, opacity: 0 });

        if (device_width < 1023) {
          const blogList = gsap.utils.toArray(".blog__animation .blog__item");
          blogList.forEach((item, i) => {
            let blogTl = gsap.timeline({
              scrollTrigger: {
                trigger: item,
                start: "top center+=200",
              },
            });
            blogTl.to(item, {
              x: 0,
              opacity: 1,
              ease: "power2.out",
              duration: 1.5,
            });
          });
        } else {
          gsap.to(".blog__animation .blog__item", {
            scrollTrigger: {
              trigger: ".blog__animation .blog__item",
              start: "top center+=300",
              markers: false,
            },
            x: 0,
            opacity: 1,
            ease: "power2.out",
            duration: 2,
            stagger: {
              each: 0.3,
            },
          });
        }
      });
      return () => tHero.revert();
    }
  }, []);
  return (
    <div></div>
    // <>
    //   <section className="blog__area no-pb blog__animation">
    //     <div className="container g-0 line pt-150 pb-140">
    //       <span className="line-3"></span>
    //       <div className="row">
    //         <div className="col-xxl-12 col-xl-12 col-lg-12 col-md-12">
    //           <div className="sec-title-wrapper">
    //             <h2 className="sec-sub-title">recent blog</h2>
    //             <h3 className="sec-title">Get inspired</h3>
    //           </div>
    //         </div>
    //         <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
    //           <article className="blog__item">
    //             <div className="blog__img-wrapper">
    //               <Link href="/blog/Leveraging-AI-for-Business-Efficiency-and-Innovation">
    //                 <div className="img-box">
    //                   <Image
    //                     priority
    //                     style={{ width: "auto", height: "auto" }}
    //                     className="image-box__item"
    //                     src={Thumbnail2}
    //                     alt=""
    //                   />
    //                   <Image
    //                     priority
    //                     style={{ width: "auto", height: "auto" }}
    //                     className="image-box__item"
    //                     src={Thumbnail2}
    //                     alt=""
    //                   />
    //                 </div>
    //               </Link>
    //             </div>
    //             <h4 className="blog__meta">
    //               <Link href="/blog/Leveraging-AI-for-Business-Efficiency-and-Innovation">AI, Business</Link> . 17 Jul 2024
    //             </h4>
    //             <h5>
    //               <Link href="/blog/Leveraging-AI-for-Business-Efficiency-and-Innovation" className="blog__title">
    //                 Leveraging AI for Business Efficiency and Innovation
    //               </Link>
    //             </h5>
    //             <Link href="/blog/Leveraging-AI-for-Business-Efficiency-and-Innovation" className="blog__btn">
    //               Read More{" "}
    //               <span>
    //                 <i className="fa-solid fa-arrow-right"></i>
    //               </span>
    //             </Link>
    //           </article>
    //         </div>
    //         <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
    //           <article className="blog__item">
    //             <div className="blog__img-wrapper">
    //               <Link href="/blog/Understanding-Generative-AI">
    //                 <div className="img-box">
    //                   <Image
    //                     priority
    //                     style={{ width: "auto", height: "auto" }}
    //                     className="image-box__item"
    //                     src={Thumbnail1}
    //                     alt=""
    //                   />
    //                   <Image
    //                     priority
    //                     style={{ width: "auto", height: "auto" }}
    //                     className="image-box__item"
    //                     src={Thumbnail1}
    //                     alt=""
    //                   />
    //                 </div>
    //               </Link>
    //             </div>
    //             <h4 className="blog__meta">
    //               <Link href="/blog/Understanding-Generative-AI">AI, Art</Link> . 27 Jun 2024
    //             </h4>
    //             <h5>
    //               <Link href="/blog/Understanding-Generative-AI" className="blog__title">
    //                 Understanding Generative AI for Endless Possibilities
    //               </Link>
    //             </h5>
    //             <Link href="/blog/Understanding-Generative-AI" className="blog__btn">
    //               Read More{" "}
    //               <span>
    //                 <i className="fa-solid fa-arrow-right"></i>
    //               </span>
    //             </Link>
    //           </article>
    //         </div>
    //         <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
    //           <article className="blog__item">
    //             <div className="blog__img-wrapper">
    //               <Link href="/blog/The-Guide-to-Building-a-Successful-Brand-Essential-Tips-and-Strategies-for-Long-Term-Success">
    //                 <div className="img-box">
    //                   <Image
    //                     priority
    //                     style={{ width: "auto", height: "auto" }}
    //                     className="image-box__item"
    //                     src={Thumbnail3}
    //                     alt="Blog Thumbnail"
    //                   />
    //                   <Image
    //                     priority
    //                     style={{ width: "auto", height: "auto" }}
    //                     className="image-box__item"
    //                     src={Thumbnail3}
    //                     alt="Blog Thumbnail"
    //                   />
    //                 </div>
    //               </Link>
    //             </div>
    //             <h4 className="blog__meta">
    //               <Link href="/blog/The-Guide-to-Building-a-Successful-Brand-Essential-Tips-and-Strategies-for-Long-Term-Success">Branding, Marketing</Link> . 25 Apr 2024
    //             </h4>
    //             <h5>
    //               <Link href="/blog/The-Guide-to-Building-a-Successful-Brand-Essential-Tips-and-Strategies-for-Long-Term-Success" className="blog__title">
    //                 The Guide to Building a Successful Brand
    //               </Link>
    //             </h5>
    //             <Link href="/blog/The-Guide-to-Building-a-Successful-Brand-Essential-Tips-and-Strategies-for-Long-Term-Success" className="blog__btn">
    //               Read More{" "}
    //               <span>
    //                 <i className="fa-solid fa-arrow-right"></i>
    //               </span>
    //             </Link>
    //           </article>
    //         </div>
    //       </div>
    //     </div>
    //   </section>
    // </>
  );
};

export default DigitalAgencyBlog;