// Create a media query
const mediaQuery = window.matchMedia("(max-width: 768px)");

// Function to handle changes
function handleMediaQuery(e) {
  if (e.matches) {
    document.addEventListener("DOMContentLoaded", function () {
  // Register ScrollTrigger plugin
  gsap.registerPlugin(ScrollTrigger);

  // Set initial state
  gsap.set("#img-bk1-mobile", { opacity: 0 });

  // Create the animation timeline
  var titleTL = gsap.timeline();
  
  titleTL.fromTo("#img-bk1-mobile", 
    { opacity: 0, top: -100 }, 
    { opacity: 1, top: 0, duration: 0.2, visibility: "visible" }
  );

  // Use ScrollTrigger instead of ScrollMagic
  ScrollTrigger.create({
    trigger: "#mainBanner",
    start: "top top",
    end: "+=500",
    pin: "#mainBanner",
    animation: titleTL,
    scrub: true
  });
});
  } else {
    document.addEventListener("DOMContentLoaded", function () {
  // Register ScrollTrigger plugin
  gsap.registerPlugin(ScrollTrigger);

  // Set initial state
  gsap.set("#img-bk1", { opacity: 0 });

  // Create the animation timeline
  var titleTL = gsap.timeline();
  
  titleTL.fromTo("#img-bk1", 
    { opacity: 0, top: -100 }, 
    { opacity: 1, top: 0, duration: 0.2, visibility: "visible" }
  );

  // Use ScrollTrigger instead of ScrollMagic
  ScrollTrigger.create({
    trigger: "#mainBanner",
    start: "top top",
    end: "+=500",
    pin: "#mainBanner",
    animation: titleTL,
    scrub: true
  });
});
  }
}

// Initial check
handleMediaQuery(mediaQuery);

// Listen for changes
mediaQuery.addEventListener("change", handleMediaQuery);








// When #timeline01 is reached
const section01Img = document.querySelector("#section01-img");

ScrollTrigger.create({
  trigger: "#timeline01",
  start: "top center",
  onEnter: () => {
    gsap.to(section01Img, {
      opacity: 0,
      duration: 0.3,
      onComplete: () => {
        section01Img.src = "./assets/images2/section01-1.jpg";
        gsap.to(section01Img, { opacity: 1, duration: 0.3 });
      }
    });
  },
  onLeaveBack: () => {
    gsap.to(section01Img, {
      opacity: 0,
      duration: 0.3,
      onComplete: () => {
        section01Img.src = "./assets/images2/section01-2.jpg";
        gsap.to(section01Img, { opacity: 1, duration: 0.3 });
      }
    });
  }
});


// When #timeline02 is reached
ScrollTrigger.create({
  trigger: "#timeline02",
  start: "top center",
  onEnter: () => {
    gsap.to(section01Img, {
      opacity: 0,
      duration: 0.3,
      onComplete: () => {
        section01Img.src = "./assets/images2/section01-3.jpg";
        gsap.to(section01Img, { opacity: 1, duration: 0.3 });
      }
    });
  },
  onLeaveBack: () => {
    gsap.to(section01Img, {
      opacity: 0,
      duration: 0.3,
      onComplete: () => {
        section01Img.src = "./assets/images2/section01-1.jpg";
        gsap.to(section01Img, { opacity: 1, duration: 0.3 });
      }
    });
  }
});






// Create a GSAP timeline
const tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".img2-show",
    start: "top center", // Start animation when the top of the section hits the center of the viewport
    end: "bottom center", // End animation when the bottom of the section hits the center of the viewport
    scrub: true, // Sync the animation with the scroll
    markers: false, // For debugging purposes, remove this in production
    id: "scrub",
  }
});

// Add animations to the timeline
tl2.to("#section01-img-t", {
  opacity: 0,
  display: "none",
  duration: 1, // Adjust this duration to control the speed
})
.to("#section01-img2-t", {
  opacity: 1,
  display: "block",
  x: 0, // Move the element to its normal position (from off-screen to its original position)
  duration: 1,
  ease: "power2.out", // Optional easing for a smoother effect
})



// Create a GSAP timeline
const tl3 = gsap.timeline({
  scrollTrigger: {
    trigger: ".img3-show",
    start: "top center", // Start animation when the top of the section hits the center of the viewport
    end: "bottom center", // End animation when the bottom of the section hits the center of the viewport
    scrub: true, // Sync the animation with the scroll
    markers: false, // For debugging purposes, remove this in production
    id: "scrub",
  }
});

// Add animations to the timeline
tl3.to("#section01-img2-t", {
  opacity: 0,
  display: "none",
  duration: 1, // Adjust this duration to control the speed
})
.to("#section01-img3-t", {
  opacity: 1,
  display: "block",
  x: 0, // Move the element to its normal position (from off-screen to its original position)
  duration: 1,
  ease: "power2.out", // Optional easing for a smoother effect
})




  







// When #timeline01 is reached
const section04Img = document.querySelector("#section04-img");

ScrollTrigger.create({
  trigger: "#timeline01-sec4",
  start: "top center",
  onEnter: () => {
    gsap.to(section04Img, {
      opacity: 0,
      duration: 0.3,
      onComplete: () => {
        section04Img.src = "./assets/images2/section04-2.jpg";
        gsap.to(section04Img, { opacity: 1, duration: 0.1 });
      }
    });
  },
  onLeaveBack: () => {
    gsap.to(section04Img, {
      opacity: 0,
      duration: 0.1,
      onComplete: () => {
        section04Img.src = "./assets/images2/section04-1.jpg";
        gsap.to(section04Img, { opacity: 1, duration: 0.1 });
      }
    });
  }
});


// When #timeline02 is reached
ScrollTrigger.create({
  trigger: "#timeline02-sec4",
  start: "top center",
  onEnter: () => {
    gsap.to(section04Img, {
      opacity: 0,
      duration: 0.1,
      onComplete: () => {
        section04Img.src = "./assets/images2/section04-3.png";
        gsap.to(section04Img, { opacity: 1, duration: 0.1 });
      }
    });
  },
  onLeaveBack: () => {
    gsap.to(section04Img, {
      opacity: 0,
      duration: 0.1,
      onComplete: () => {
        section04Img.src = "./assets/images2/section04-2.jpg";
        gsap.to(section04Img, { opacity: 1, duration: 0.1 });
      }
    });
  }
});











// Create a GSAP timeline
const tl4 = gsap.timeline({
  scrollTrigger: {
    trigger: ".section04-last1-t",
    start: "top center", // Start animation when the top of the section hits the center of the viewport
    end: "bottom center", // End animation when the bottom of the section hits the center of the viewport
    scrub: true, // Sync the animation with the scroll
    markers: false, // For debugging purposes, remove this in production
    id: "scrub",
  }
});

// Add animations to the timeline
tl4.to("#section04-last1", {
  opacity: 0,
  display: "none",
  duration: 1, // Adjust this duration to control the speed
})

.to("#section04-last2", {
  opacity: 1,
  display: "block",
  x: 0, // Move the element to its normal position (from off-screen to its original position)
  duration: 1,
  ease: "power2.out", // Optional easing for a smoother effect
})




// Create a GSAP timeline
const tl5 = gsap.timeline({
  scrollTrigger: {
    trigger: ".section04-last2-t",
    start: "top center", // Start animation when the top of the section hits the center of the viewport
    end: "bottom center", // End animation when the bottom of the section hits the center of the viewport
    scrub: true, // Sync the animation with the scroll
    markers: false, // For debugging purposes, remove this in production
    id: "scrub",
  }
});

// Add animations to the timeline
tl5.to("#section04-last2", {
  opacity: 0,
  display: "none",
  duration: 1, // Adjust this duration to control the speed
})
.to("#section04-last3", {
  opacity: 1,
  display: "block",
  x: 0, // Move the element to its normal position (from off-screen to its original position)
  duration: 1,
  ease: "power2.out", // Optional easing for a smoother effect
})








  
function showLogo(id, el) {
  // Remove active class from all dog blocks
  document.querySelectorAll('.dog-block').forEach(el => el.classList.remove('active'));

  // Remove active class from all logo blocks
  document.querySelectorAll('.logo-block').forEach(el => el.classList.remove('active'));

  // Add active class to selected dog block
  document.getElementById(id).classList.add('active');

  // Remove active class from all menu items
  document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('active'));

  // Add active class to clicked menu item
  el.classList.add('active');

  // Smooth scroll to content on mobile devices
  if (window.innerWidth <= 768) {
    const target = document.querySelector('.logos-cards .content');
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}



  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.sensitive-img').forEach(img => {
      img.addEventListener('click', () => {
        img.classList.add('revealed');
        img.classList.remove('sensitive-img');
      });
    });
  });

  function revealImage() {
    const overlay = document.querySelector('.sensitive-overlay');
    if (overlay) {
      overlay.classList.add('hidden');
    }
  }






// section05
// const section05before = gsap.timeline({
//   scrollTrigger: {
//     trigger: "#before-section05",
//     start: "top center",
//     end: "top center", 
//     scrub: true,
//     markers: false, 
//     id: "scrub",
//   }
// });
// section05before.to("#section5-img", {
//   display:"block",
//   duration: .1, 
// })

// const tl6 = gsap.timeline({
//   scrollTrigger: {
//     trigger: "#section05",
//     start: "top center",
//     end: "top center", 
//     scrub: true,
//     markers: false, 
//     id: "scrub",
//   }
// });
// tl6.to("#section5-img", {
//   opacity: 1,
//   duration: .5, 
// })


// const section05after = gsap.timeline({
//   scrollTrigger: {
//     trigger: "#after-section05",
//     start: "top center", 
//     end: "bottom center", 
//     scrub: true, 
//     markers: false, 
//     id: "scrub",
//   }
// });
// section05after.to("#section5-img", {
//   opacity: 0,
//   display: "none",
//   duration: 1, 
// })




// section06
  // Create a GSAP timeline
// const section06before = gsap.timeline({
//   scrollTrigger: {
//     trigger: "#before-section06",
//     start: "top center",
//     end: "top center", 
//     scrub: true,
//     markers: false, 
//     id: "scrub",
//   }
// });
// section06before.to("#section6-img", {
//   display:"block",
//   duration: .1, 
// })



// const t10 = gsap.timeline({
//   scrollTrigger: {
//     trigger: ".section06-img-bk",
//     start: "top",
//     end: "center", 
//     scrub: true, 
//     markers: true, 
//     id: "scrub",
//   }
// });
// t10.to("#section6-img", {
//   opacity: 1,
//   duration: .5, 
// })



// const section06after = gsap.timeline({
//   scrollTrigger: {
//     trigger: "#section06",
//     start: "top center", 
//     end: "bottom center", 
//     scrub: true, 
//     markers: false, 
//     id: "scrub",
//   }
// });
// section06after.to("#section6-img", {
//   opacity: 0,
//   display: "none",
//   duration: 1, 
// })