export function initSliderBeforeAfter(container = document){
  const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
  slidersBeforeAfter.forEach(function (sliderContainer, index) {
    const sliderInput = sliderContainer.querySelector('.slider');
    if (sliderInput) {
      sliderInput.addEventListener('input', (e) => {
        sliderContainer.style.setProperty('--position', `${e.target.value}%`);
      });
    }
  });
}


export function navInvestigation(){
  const nav = document.getElementById('nav-investigation');
  if (!nav) return;

  const items = nav.querySelectorAll('li');
  const headerOffset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h-header')) || 0;

  const sections = Array.from(items).map(li => {
    const href = li.querySelector('a')?.getAttribute('href');
    const target = href ? document.querySelector(href) : null;
    return { li, target };
  }).filter(s => s.target);

  const update = () => {
    const scrollY = window.scrollY + headerOffset;
    let current = sections[0];

    for (const section of sections) {
      if (section.target.offsetTop <= scrollY) {
        current = section;
      }
    }

    items.forEach(li => li.classList.remove('is-selected'));
    if (current) current.li.classList.add('is-selected');
  };

  window.addEventListener('scroll', update, { passive: true });
  update();
}




export function progressBar(){
  const bar = document.getElementById('progressBar');
  if (!bar) return;

  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const progress = docHeight > 0 ? (scrollTop / docHeight) * 160 : 0;
    bar.style.width = `${progress}%`;
  }, { passive: true });
}


export function scrollBack(){
  const bottomBar = document.getElementById('bottom-bar');
  const navInvestigation = document.getElementById('nav-investigation');
  const header = document.getElementById('site-header');

  let lastY = window.scrollY;
  let peakY = window.scrollY;
  let visible = false;

  const show = () => {
    visible = true;
    if (bottomBar) bottomBar.classList.add('is-visible');
    if (navInvestigation && header) header.classList.add('has-nav-investigation');
  };

  const hide = () => {
    visible = false;
    if (bottomBar) bottomBar.classList.remove('is-visible');
    if (navInvestigation && header) header.classList.remove('has-nav-investigation');
  };

  window.addEventListener('scroll', () => {
    const currentY = window.scrollY;

    // header : basé uniquement sur la position absolue
    if (navInvestigation && header) {
      header.classList.toggle('has-nav-investigation', currentY >= 160);
    }

    // bottom-bar : show au scroll bas > 280px, hide après 200px de scroll haut
    if (currentY > lastY) {
      peakY = currentY;
      if (!visible && currentY > 280) {
        visible = true;
        if (bottomBar) bottomBar.classList.add('is-visible');
      }
    } else {
      if (visible && peakY - currentY >= 200) {
        visible = false;
        if (bottomBar) bottomBar.classList.remove('is-visible');
      }
    }

    lastY = currentY;
  }, { passive: true });
}