(() => {

  const SETTINGS = {
    sectionId: "custom-about-partners",
    targetSelector: ".sec-1",
    speed: 0.35,
    pauseOnHover: false
  };


  /* ===============================
     LOGOS COLUMN 1
  =============================== */

  const columnOne = [

    {
      src: "https://i.ibb.co/LXt9X3Gd/02-1-1.png",
      alt: "شريك النجاح 1"
    },

    {
      src: "https://i.ibb.co/yFCs6gxw/r-Kr-WD46m7owt-GPt6qr-WCh-YSJc-Rd94ejrc-P8r-L2t-X-2.png",
      alt: "شريك النجاح 2"
    },

    {
      src: "https://i.ibb.co/Z1twX8CK/Rectangle.png",
      alt: "شريك النجاح 3"
    },

    {
      src: "https://i.ibb.co/wZv1DTnW/Rectangle-4029.png",
      alt: "شريك النجاح 4"
    },

    {
      src: "https://i.ibb.co/KjJG90Hg/Link-logo.png",
      alt: "شريك النجاح 5"
    },{
      src: "https://i.ibb.co/yBGXJyPK/Group-1000007142.png",
      alt: "شريك النجاح 6"
    },

    {
      src: "https://i.ibb.co/vxRsnkDP/download-3.png",
      alt: "شريك النجاح 7"
    }


  ];


  /* ===============================
     LOGOS COLUMN 2
  =============================== */

  const columnTwo = [

    {
      src: "https://i.ibb.co/yBGXJyPK/Group-1000007142.png",
      alt: "شريك النجاح 8"
    },

    {
      src: "https://i.ibb.co/vxRsnkDP/download-3.png",
      alt: "شريك النجاح 9"
    },

    {
      src: "https://i.ibb.co/Y4dcqQG2/download-1.png",
      alt: "شريك النجاح 10"
    },

    {
      src: "https://i.ibb.co/LXt9X3Gd/02-1-1.png",
      alt: "شريك النجاح 11"
    },

    {
      src: "https://i.ibb.co/yFCs6gxw/r-Kr-WD46m7owt-GPt6qr-WCh-YSJc-Rd94ejrc-P8r-L2t-X-2.png",
      alt: "شريك النجاح 12"
    },

    {
      src: "https://i.ibb.co/Z1twX8CK/Rectangle.png",
      alt: "شريك النجاح 13"
    },

    {
      src: "https://i.ibb.co/wZv1DTnW/Rectangle-4029.png",
      alt: "شريك النجاح 14"
    },

    {
      src: "https://i.ibb.co/KjJG90Hg/Link-logo.png",
      alt: "شريك النجاح 15"
    }

  ];


  /* ===============================
     GENERATE LOGOS
  =============================== */

  function generateItems(items) {

    return items.map(item => `
      <div class="partner-item">

        <img
          src="${item.src}"
          alt="${item.alt || ""}"
          loading="lazy"
          draggable="false"
        >

      </div>
    `).join("");

  }


  /* ===============================
     GENERATE TRACK
  =============================== */

  function generateTrack(items) {

    const logos = generateItems(items);

    return `
      <div class="partners-track">

        <div class="partners-set">
          ${logos}
        </div>

        <div
          class="partners-set"
          aria-hidden="true"
        >
          ${logos}
        </div>

      </div>
    `;

  }


  /* ===============================
     CREATE SECTION
  =============================== */

  function createSection() {

    const section = document.createElement("section");

    section.id = SETTINGS.sectionId;

    section.innerHTML = `

      <div class="about-partners-container">


        <!-- TEXT -->

        <div class="about-content">

          <div class="about-content-inner">


            <h2 class="about-title">
              من نحن؟
            </h2>


            <p class="about-description">

              فريق واحد يصمم المتجر وينفذه ويشغله.

              <br>

              جادة الرقمية شركة سعودية تعمل مع الشركات
              على منصات التجارة التي تستخدمها فعلاً:
              سلة، زد، ووردبريس.

              نبدأ من تجربة المستخدم وننفذ الواجهة
              بأنفسنا ونصنع المحتوى ونطبق الظهور
              في البحث وندير الإعلان.

            </p>


            <a
              href="#"
              class="about-button"
            >

              <span>
                تعرف على شركاء النجاح
              </span>

              <span class="about-button-arrow">
                ←
              </span>

            </a>


          </div>

        </div>


        <!-- LOGOS -->

        <div class="partners-area">


          <!-- COLUMN 1 -->

          <div
            class="partners-column"
            data-direction="up"
          >

            ${generateTrack(columnOne)}

          </div>


          <!-- COLUMN 2 -->

          <div
            class="partners-column"
            data-direction="down"
          >

            ${generateTrack(columnTwo)}

          </div>


        </div>


      </div>

    `;

    return section;

  }


  /* ===============================
     START SLIDER
  =============================== */

  function startSlider(section) {

    const sliders =
      section.querySelectorAll(
        ".partners-column"
      );


    sliders.forEach(column => {

      const track =
        column.querySelector(
          ".partners-track"
        );


      const firstSet =
        column.querySelector(
          ".partners-set"
        );


      const direction =
        column.dataset.direction;


      let position = 0;

      let setHeight = 0;

      let isPaused = false;

      let lastTime =
        performance.now();


      /* ===============================
         MEASURE
      =============================== */

      function measure() {

        const newHeight =
          firstSet.getBoundingClientRect().height;


        if (!newHeight) {
          return;
        }


        setHeight = newHeight;


        if (direction === "down") {

          position = -setHeight;

        } else {

          position = 0;

        }


        track.style.transform =
          `translate3d(0, ${position}px, 0)`;

      }


      /* ===============================
         ANIMATION
      =============================== */

      function animate(time) {

        let delta =
          time - lastTime;


        if (delta > 40) {
          delta = 40;
        }


        lastTime = time;


        if (
          !isPaused &&
          setHeight > 0
        ) {

          const movement =
            SETTINGS.speed *
            (delta / 16.6667);


          /* UP */

          if (direction === "up") {

            position -= movement;


            if (
              position <= -setHeight
            ) {

              position += setHeight;

            }

          }


          /* DOWN */

          else {

            position += movement;


            if (
              position >= 0
            ) {

              position -= setHeight;

            }

          }


          track.style.transform =
            `translate3d(0, ${position}px, 0)`;

        }


        requestAnimationFrame(
          animate
        );

      }


      /* ===============================
         HOVER
      =============================== */

      if (SETTINGS.pauseOnHover) {

        column.addEventListener(
          "mouseenter",
          () => {

            isPaused = true;

          }
        );


        column.addEventListener(
          "mouseleave",
          () => {

            isPaused = false;

            lastTime =
              performance.now();

          }
        );

      }


      /* ===============================
         RESIZE
      =============================== */

      if (
        typeof ResizeObserver !==
        "undefined"
      ) {

        const resizeObserver =
          new ResizeObserver(() => {

            const newHeight =
              firstSet.getBoundingClientRect().height;


            if (!newHeight) {
              return;
            }


            if (
              Math.abs(
                newHeight - setHeight
              ) < 1
            ) {
              return;
            }


            setHeight =
              newHeight;


            if (
              direction === "down"
            ) {

              if (
                position >= 0 ||
                position < -setHeight
              ) {

                position =
                  -setHeight;

              }

            }


          });


        resizeObserver.observe(
          firstSet
        );

      }


      /* ===============================
         WAIT IMAGES
      =============================== */

      const images =
        firstSet.querySelectorAll("img");


      let loadedImages = 0;


      function imageDone() {

        loadedImages++;


        if (
          loadedImages >=
          images.length
        ) {

          measure();

        }

      }


      if (images.length) {

        images.forEach(image => {

          if (image.complete) {

            imageDone();

          }

          else {

            image.addEventListener(
              "load",
              imageDone,
              { once: true }
            );


            image.addEventListener(
              "error",
              imageDone,
              { once: true }
            );

          }

        });

      }

      else {

        measure();

      }


      requestAnimationFrame(
        animate
      );

    });

  }


  /* ===============================
     INSERT AFTER .sec-1
  =============================== */

  function insertSection() {

    if (
      document.getElementById(
        SETTINGS.sectionId
      )
    ) {

      return true;

    }


    const target =
      document.querySelector(
        SETTINGS.targetSelector
      );


    if (!target) {

      return false;

    }


    const section =
      createSection();


    target.insertAdjacentElement(
      "afterend",
      section
    );


    startSlider(section);


    return true;

  }


  /* ===============================
     INIT
  =============================== */

  function init() {

    if (insertSection()) {
      return;
    }


    const observer =
      new MutationObserver(() => {

        if (insertSection()) {

          observer.disconnect();

        }

      });


    observer.observe(
      document.documentElement,
      {
        childList: true,
        subtree: true
      }
    );


    let attempts = 0;


    const interval =
      setInterval(() => {

        attempts++;


        if (insertSection()) {

          clearInterval(interval);

          observer.disconnect();

          return;

        }


        if (attempts >= 120) {

          clearInterval(interval);

          observer.disconnect();

        }

      }, 500);

  }


  if (
    document.readyState === "loading"
  ) {

    document.addEventListener(
      "DOMContentLoaded",
      init
    );

  }

  else {

    init();

  }

})();