window.onload = function () {
  headerShrink();
  initCart();
  toggleDonationButton();
  videos();
};

window.onscroll = function () {
  headerShrink();
  toggleDonationButton();
};

function initCart() {
  const items = document.querySelectorAll('.store__product .link-block');
  const header = document.querySelector('#site-header');
}

function headerShrink() {
  const header = document.getElementById('site-header');
  const scrollPosition = window.scrollY || document.documentElement.scrollTop;

  if (scrollPosition > 100) {
    header.classList.add('is-shrinked');
  } else {
    header.classList.remove('is-shrinked');
  }
}

function toggleDonationButton() {
  const btn = document.getElementById('btn--don__mobile');
  const section = document.getElementById('section__donation');
  const footer = document.getElementById('site-footer');

  if (!btn || !section || !footer) return; // sécurité

  const scrollTop = window.scrollY || window.pageYOffset;
  const triggerPoint = section.offsetTop + section.offsetHeight / 2;

  // 1️⃣ Gestion de la visibilité du bouton
  if (scrollTop >= triggerPoint) {
    btn.classList.add('is-visible');
  } else {
    btn.classList.remove('is-visible');
  }

  // 2️⃣ Gestion du stickiness quand le footer apparaît
  const footerRect = footer.getBoundingClientRect();
  const windowHeight = window.innerHeight;

  if (footerRect.top < windowHeight) {
    // Le footer est visible dans la fenêtre
    btn.classList.add('is-sticky');
  } else {
    btn.classList.remove('is-sticky');
  }
}


function videos(){
  console.log("video");
  let section = document.getElementById("section__video");
  console.log(section);

  let videoslinks = document.querySelectorAll(".videos__li");
  videoslinks.forEach(function (video, index) {

    video.addEventListener("click", (event) => { 
      let data = video.getAttribute('data-video');

      var div = document.createElement('section');
      div.id = "video__fullscreen";
      div.innerHTML = '<button id="video__close">✕</button>\
          <iframe\
          src="' + data + '"\
          style="aspect-ratio: 9/16; width: 100%; border: 0"\
          allow="autoplay; fullscreen; picture-in-picture"\
          allowfullscreen ></iframe>';
      document.body.appendChild(div);
      document.body.classList.add("is-fullscreen");

      let close = document.querySelector("#video__close");
      close.addEventListener("click", (event) => { 
        div.remove();
        document.body.classList.remove("is-fullscreen");
      });
    });
   
  });
  
}