import { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "@/plugins";
import Brand1 from "../../../public/assets/imgs/tech-partners/ufe.png";
import Brand2 from "../../../public/assets/imgs/tech-partners/sst.png";
import Brand3 from "../../../public/assets/imgs/tech-partners/nis.png";

import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

const CreativeAgencyBrand = () => {
  useEffect(() => {
    if (typeof window !== "undefined") {
      let device_width = window.innerWidth;
      let tHero = gsap.context(() => {
        gsap.set(".fade_bottom", { y: 30, opacity: 0 });

        if (device_width < 1023) {
          const fadeArray = gsap.utils.toArray(".fade_bottom");
          fadeArray.forEach((item, i) => {
            let fadeTl = gsap.timeline({
              scrollTrigger: {
                trigger: item,
                start: "top center+=200",
              },
            });
            fadeTl.to(item, {
              y: 0,
              opacity: 1,
              ease: "power2.out",
              duration: 1.5,
            });
          });
        } else {
          gsap.to(".fade_bottom", {
            scrollTrigger: {
              trigger: ".fade_bottom",
              start: "top center+=300",
              markers: false,
            },
            y: 0,
            opacity: 1,
            ease: "power2.out",
            duration: 1,
            stagger: {
              each: 0.2,
            },
          });
        }
      });
      return () => tHero.revert();
    }
  }, []);
  return (
    <>
      <section className="brand__area">
        <div className="container pt-100 pb-140">
          <div className="row">
            <div className="col-xxl-12">
              <h2 className="brand__title-3 title-anim">
                Official EdTech Partner Of
              </h2>
              <div className="brand__list-3" style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexWrap: 'wrap',
                // gap: '20px'
              }}>
                <div className="brand__item-2 fade_bottom" style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center'
                }}>
                  <Image
                    priority
                    width={150}
                    src={Brand2}
                    alt="Brand Logo"
                    style={{ marginLeft: "100px", marginRight: '100px' }}
                  />
                </div>
                <div className="brand__item-2 fade_bottom" style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center'
                }}>
                  <Image
                    priority
                    width={200}
                    src={Brand1}
                    alt="Brand Logo"
                    style={{ marginLeft: "130px", marginRight: '130px' }}
                  />
                </div>
                <div className="brand__item-2 fade_bottom" style={{
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center'
                }}>
                  <Image
                    priority
                    width={200}
                    src={Brand3}
                    alt="Brand Logo"
                    style={{ marginLeft: "110px", marginRight: '110px' }}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default CreativeAgencyBrand;