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

gsap.registerPlugin(ScrollTrigger);

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

        if (device_width < 1023) {
          const blogList = gsap.utils.toArray(".blog__animation .blog__item-3");
          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-3", {
            scrollTrigger: {
              trigger: ".blog__animation .blog__item-3",
              start: "top center+=300",
              markers: false,
            },
            x: 0,
            opacity: 1,
            ease: "power2.out",
            duration: 2,
            stagger: {
              each: 0.3,
            },
          });
        }
      });
      return () => tHero.revert();
    }
  }, []);
  return (
    <>
      <section className="blog__area-3 blog-v3 blog__animation">
        <div className="container line">
          <div className="line-3"></div>
          <div className="row ">
            <div className="col-xxl-12">
              <div className="sec-title-wrapper text-anim pt-130">
                <h1 className="sec-sub-title">SyncROI Blog</h1>
                <h3 className="sec-title title-anim">
                  Our Learning <br />
                  Journey
                </h3>
                <p>
                  Read our blog and try to see everything
                  from everyone&apos;s perspective.{" "}
                </p>
              </div>
            </div>
          </div>

          <div className="row">
            <div className="col-xxl-6 col-xl-6 col-lg-6">
              <article className="blog__item-3">
                <div className="blog__img-wrapper-3">
                  <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={Thumbnail5}
                        alt="Blog Thumbnail"
                      />
                      <Image
                        priority
                        style={{ width: "auto", height: "auto" }}
                        className="image-box__item"
                        src={Thumbnail5}
                        alt="Blog Thumbnail"
                      />
                    </div>
                  </Link>
                </div>
                <div className="blog__info-3">
                  <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-3">
                      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>
                </div>
              </article>
            </div>
            <div className="col-xxl-6 col-xl-6 col-lg-6">
              <article className="blog__item-3">
                <div className="blog__img-wrapper-3">
                  <Link href="/blog/Understanding-Generative-AI">
                    <div className="img-box">
                      <Image
                        priority
                        style={{ width: "auto", height: "auto" }}
                        className="image-box__item"
                        src={Thumbnail4}
                        alt="Blog Thumbnail"
                      />
                      <Image
                        priority
                        style={{ width: "auto", height: "auto" }}
                        className="image-box__item"
                        src={Thumbnail4}
                        alt="Blog Thumbnail"
                      />
                    </div>
                  </Link>
                </div>
                <div className="blog__info-3">
                  <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-3">
                      Understanding Generative AI: Endless Possibilities for Innovation
                    </Link>
                  </h5>
                  <Link href="/blog/Understanding-Generative-AI" className="blog__btn">
                    Read More{" "}
                    <span>
                      <i className="fa-solid fa-arrow-right"></i>
                    </span>
                  </Link>
                </div>
              </article>
            </div>
            <div className="col-xxl-6 col-xl-6 col-lg-6">
              <article className="blog__item-3">
                <div className="blog__img-wrapper-3">
                  <Link href="/blog/7-Essential-Networking-Tips-for-Entrepreneurs">
                    <div className="img-box">
                      <Image
                        priority
                        style={{ width: "auto", height: "auto" }}
                        className="image-box__item"
                        src={Thumbnail1}
                        alt="Blog Thumbnail"
                      />
                      <Image
                        priority
                        style={{ width: "auto", height: "auto" }}
                        className="image-box__item"
                        src={Thumbnail1}
                        alt="Blog Thumbnail"
                      />
                    </div>
                  </Link>
                </div>
                <div className="blog__info-3">
                  <h4 className="blog__meta">
                    <Link href="/blog/7-Essential-Networking-Tips-for-Entrepreneurs">Entrepreneurship, Business</Link> . 06 Jun 2024
                  </h4>
                  <h5>
                    <Link href="/blog/7-Essential-Networking-Tips-for-Entrepreneurs" className="blog__title-3">
                      7 Essential Networking Tips for Entrepreneurs
                    </Link>
                  </h5>
                  <Link href="/blog/7-Essential-Networking-Tips-for-Entrepreneurs" className="blog__btn">
                    Read More{" "}
                    <span>
                      <i className="fa-solid fa-arrow-right"></i>
                    </span>
                  </Link>
                </div>
              </article>
            </div>

            <div className="col-xxl-6 col-xl-6 col-lg-6">
              <article className="blog__item-3">
                <div className="blog__img-wrapper-3">
                  <Link href="/blog/Mastering-Time-Management-Tips-for-Busy-Entrepreneurs">
                    <div className="img-box">
                      <Image
                        priority
                        style={{ width: "auto", height: "auto" }}
                        className="image-box__item"
                        src={Thumbnail2}
                        alt="Blog Thumbnail"
                      />
                      <Image
                        priority
                        style={{ width: "auto", height: "auto" }}
                        className="image-box__item"
                        src={Thumbnail2}
                        alt="Blog Thumbnail"
                      />
                    </div>
                  </Link>
                </div>
                <div className="blog__info-3">
                  <h4 className="blog__meta">
                    <Link href="/blog/Mastering-Time-Management-Tips-for-Busy-Entrepreneurs">Entrepreneurship, Productivity</Link> . 17 May 2024
                  </h4>
                  <h5>
                    <Link href="/blog/Mastering-Time-Management-Tips-for-Busy-Entrepreneurs" className="blog__title-3">
                      Mastering Time Management: Tips for Busy Entrepreneurs
                    </Link>
                  </h5>
                  <Link href="/blog/Mastering-Time-Management-Tips-for-Busy-Entrepreneurs" className="blog__btn">
                    Read More{" "}
                    <span>
                      <i className="fa-solid fa-arrow-right"></i>
                    </span>
                  </Link>
                </div>
              </article>
            </div>
            <div className="col-xxl-6 col-xl-6 col-lg-6">
              <article className="blog__item-3">
                <div className="blog__img-wrapper-3">
                  <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>
                <div className="blog__info-3">
                  <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-3">
                      The Guide to Building a Successful Brand: Tips and Strategies for Long-Term Success
                    </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>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default BlogElementV2;