// Registra o plugin ScrollTrigger do GSAP
gsap.registerPlugin(ScrollTrigger);

// Seleciona o container principal, seções, barra de progresso e blocos individuais
const container = document.querySelector(".container");
const sections = gsap.utils.toArray(".container .panel");
const progressBarFill = document.querySelector(".progress-bar-fill");//Barra de progresso

//Blocos que reagem com o deslocamento da barra de progresso
const bloco1 = document.querySelectorAll(".blocos_1_1");
const bloco2 = document.querySelectorAll(".blocos_1_2");
const bloco3 = document.querySelectorAll(".blocos_1_3");
const bloco4 = document.querySelectorAll(".blocos_1_4");
const bloco5 = document.querySelectorAll(".blocos_1_5");

// Configuração da animação do GSAP
gsap.to(sections, {
  xPercent: -100 * (sections.length - 1), // Move as seções horizontalmente
  ease: "none",
  scrollTrigger: {
    trigger: ".container", // Define o gatilho para a animação
    pin: true, // Mantém o gatilho fixo durante a animação
    scrub: 0.5, // Velocidade de "esfregamento" para a animação
    snap: false, // Desativa o "snap" para a animação
    end: () => "+=12000" + container, // Define o ponto final da animação
    onUpdate: (self) => { // Função chamada durante cada atualização da animação
      const progress = self.progress.toFixed(2); // Progresso da animação
      const width = progress * 100; // Largura da barra de progresso

      // Atualiza a largura da barra de progresso
      progressBarFill.style.width = width + "vw";


      // Bloco do primerio conteudo
      bloco1.forEach(bloco1 => {
        const bounds = bloco1.getBoundingClientRect();
        // Cenario 1 onde a barra de progresso está sobre o elementos
        if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
          bloco1.style.transform = "scale(1.5)"; //definição de escala maior
          bloco1.style.transition = "1s ease"; //tempo da transição que será feita na escala
          document.querySelector('.conteudo1_1').style.display = 'flex'; // Definição da visibilidade do elemento na pagina como flexivel
          document.querySelector('.conteudo1_1').style.position = 'fixed'; // Definição da posição do elemento na página como fixado 


          // Cenario 2 Onde a barra de progresso não está mais sobre o elementos
        } else {

          bloco1.style.transform = "scale(1)"; //definição de escala que retornar ao ponto zero, em outra palavras ao normal.
          bloco1.style.transition = "1s ease"; //tempo da transição que será feita na escala

        }
      });

      // Bloco do segundo conteudo
      bloco2.forEach(bloco2 => {
        const bounds = bloco2.getBoundingClientRect();
        // Cenario 1 onde a barra de progresso está sobre o elementos
        if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
          bloco2.style.transform = "scale(1.5)";//definição de escala maior.
          bloco2.style.transition = "1s ease";//tempo da transição que será feita na escala.

          document.querySelector('.conteudo1_2').style.display = 'flex';
          // Definição da visibilidade do elemento na pagina como flexivel
          document.querySelector('.conteudo1_2').style.position = 'fixed';// Definição da posição do elemento na página como fixado 

          document.querySelector('.conteudo1_2').classList.add('entrada');//adiciona a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.

          document.querySelector('.conteudo1_2').classList.remove('saida');//Remove a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.

        } else {

          bloco2.style.transform = "scale(1)";//definição de escala que retornar ao ponto zero, em outra palavras ao normal.
          bloco2.style.transition = "1s ease";//tempo da transição que será feita na escala

          document.querySelector('.conteudo1_2').classList.remove('entrada');//Remove a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
          document.querySelector('.conteudo1_2').classList.add('saida');//adiciona a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.

        }
      });


      // Bloco do Terceiro conteudo
      bloco3.forEach(bloco3 => {
        const bounds = bloco3.getBoundingClientRect();
        // Cenario 1 onde a barra de progresso está sobre o elementos
        if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
          bloco3.style.transform = "scale(1.5)";//definição de escala maior.
          bloco3.style.transition = "1s ease";//tempo da transição que será feita na escala.

          document.querySelector('.conteudo1_3').style.display = 'flex';
          // Definição da visibilidade do elemento na pagina como flexivel
          document.querySelector('.conteudo1_3').style.position = 'fixed';// Definição da posição do elemento na página como fixado 

          document.querySelector('.conteudo1_3').classList.add('entrada');//adiciona a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.

          document.querySelector('.conteudo1_3').classList.remove('saida');//Remove a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.

          document.querySelector('.conteudo1_1').style.display = 'none';//Aqui é definidio que o que o primeiro conteudo está oculto, para que não apareça enquanto o painel está surgindo.

        } else {

          bloco3.style.transform = "scale(1)";//definição de escala que retornar ao ponto zero, em outra palavras ao normal.
          bloco3.style.transition = "1s ease";//tempo da transição que será feita na escala

          document.querySelector('.conteudo1_3').classList.remove('entrada');//Remove a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
          document.querySelector('.conteudo1_3').classList.add('saida');//adiciona a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.

        }
      });

      // Bloco do Quarto conteudo
      bloco4.forEach(bloco4 => {
        const bounds = bloco4.getBoundingClientRect();
        // Cenario 1 onde a barra de progresso está sobre o elementos
        if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
          bloco4.style.transform = "scale(1.5)";//definição de escala maior.
          bloco4.style.transition = "1s ease";//tempo da transição que será feita na escala.

          document.querySelector('.conteudo1_4').style.display = 'flex';
          // Definição da visibilidade do elemento na pagina como flexivel
          document.querySelector('.conteudo1_4').style.position = 'fixed';// Definição da posição do elemento na página como fixado 

          document.querySelector('.conteudo1_4').classList.add('entrada');//adiciona a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.

          document.querySelector('.conteudo1_4').classList.remove('saida');//Remove a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.

          document.querySelector('.conteudo1_1').style.display = 'none';//Aqui é definidio que o que o primeiro conteudo está oculto, para que não apareça enquanto o painel está surgindo.

        } else {

          bloco4.style.transform = "scale(1)";//definição de escala que retornar ao ponto zero, em outra palavras ao normal.
          bloco4.style.transition = "1s ease";//tempo da transição que será feita na escala

          document.querySelector('.conteudo1_4').classList.remove('entrada');//Remove a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
          document.querySelector('.conteudo1_4').classList.add('saida');//adiciona a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.

        }
      });

      // Bloco do Quinto conteudo
      bloco5.forEach(bloco5 => {
        const bounds = bloco5.getBoundingClientRect();
        // Cenario 1 onde a barra de progresso está sobre o elementos
        if (bounds.left < window.innerWidth * progress && bounds.right > window.innerWidth * progress) {
          bloco5.style.transform = "scale(1.5)";//definição de escala maior.
          bloco5.style.transition = "1s ease";//tempo da transição que será feita na escala.

          document.querySelector('.conteudo1_5').style.display = 'flex';
          // Definição da visibilidade do elemento na pagina como flexivel
          document.querySelector('.conteudo1_5').style.position = 'fixed';// Definição da posição do elemento na página como fixado 

          document.querySelector('.conteudo1_5').classList.add('entrada');//adiciona a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.

          document.querySelector('.conteudo1_5').classList.remove('saida');//Remove a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.

          document.querySelector('.conteudo1_1').style.display = 'none';//Aqui é definidio que o que o primeiro conteudo está oculto, para que não apareça enquanto o painel está surgindo.

        } else {

          bloco5.style.transform = "scale(1)";//definição de escala que retornar ao ponto zero, em outra palavras ao normal.
          bloco5.style.transition = "1s ease";//tempo da transição que será feita na escala

          document.querySelector('.conteudo1_5').classList.remove('entrada');//Remove a animação definida classe entrada no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a entrada do elemento sobre a tela.
          document.querySelector('.conteudo1_5').classList.add('saida');//adiciona a animação definida classe saida no css, "index_parallax_2.css", sendo sempre ela que vai ser chamada para a saida do elemento sobre a tela.

        }
      });

    }
  },
});