$('.owl-carousel').owlCarousel({
    dots:false,
    loop:true,
    margin:25,
    nav:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3.2
        }
    }
})



const elements = document.querySelectorAll('.fadeinleft');
const elements1 = document.querySelectorAll('.fade-in');
const elements2 = document.querySelectorAll('.fadeinright');
const elements3 = document.querySelectorAll('.fadeindown');



const options = {
    root:null,
    rootMargin: '0px',
    threshold: .4
}

const callbacks = (entries) => {
    entries.forEach(entry => {
        if(entry.isIntersecting){
            entry.target.classList.add('active-left');
        }
    });
}

const callbacks1 = (entries) => {
    entries.forEach(entry => {
        if(entry.isIntersecting){
            entry.target.classList.add('active');
        }
    });
}

const callbacks2 = (entries) => {
    entries.forEach(entry => {
        if(entry.isIntersecting){
            entry.target.classList.add('active-right');
        }
    });
}

const callbacks3 = (entries) => {
    entries.forEach(entry => {
        if(entry.isIntersecting){
            entry.target.classList.add('active-down');
        }
    });
}

let observer = new IntersectionObserver(callbacks, options);
let observer1 = new IntersectionObserver(callbacks1, options);

let observer2 = new IntersectionObserver(callbacks2, options);

let observer3 = new IntersectionObserver(callbacks3, options);


elements.forEach(elements =>{

    observer.observe(elements);
})

elements1.forEach(elements1 =>{

    observer1.observe(elements1);
})

elements2.forEach(elements2 =>{

    observer2.observe(elements2);
})

elements3.forEach(elements3 =>{

    observer3.observe(elements3);
})



const navbar = document.getElementById('mainNavbar');
const topBar = document.getElementById('topBar');

function handleScroll() {
  const isSmallScreen = window.innerWidth < 992; // Bootstrap lg breakpoint

  if (isSmallScreen) {
    // Small screen: gjithmonë i zi dhe top bar nuk shfaqet
    topBar.style.display = 'none';
    navbar.style.top = '0';
    navbar.style.backgroundColor = '#0A0A0A';
  } else {
    // Desktop: top bar mbi navbar
    topBar.style.display = 'block';
    if (window.scrollY > 50) {
      topBar.style.opacity = '0';
      topBar.style.pointerEvents = 'none';
      navbar.style.top = '0';
      navbar.style.backgroundColor = '#0A0A0A';
    } else {
      topBar.style.opacity = '1';
      topBar.style.pointerEvents = 'auto';
      navbar.style.top = '40px';
      navbar.style.backgroundColor = 'transparent';
    }
  }
}

// Scroll event
window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll); // për rast resize
handleScroll(); // ekzekuto menjëherë




document.addEventListener('DOMContentLoaded', () => {
  const btnPrev = document.getElementById('btnPrev');
  const btnNext = document.getElementById('btnNext');
  const carousel = document.getElementById('heroCarousel');
  const items = carousel.querySelectorAll('.carousel-item');

  function getCurrentIndex() {
    for (let i = 0; i < items.length; i++) {
      if (items[i].classList.contains('active')) return i;
    }
    return 0;
  }

  function getPrevIndex(current) {
    return (current - 1 + items.length) % items.length;
  }

  function getNextIndex(current) {
    return (current + 1) % items.length;
  }

  function setButtonBackground(button, imgUrl) {
    button.style.backgroundImage = `url(${imgUrl})`;
    button.style.backgroundSize = 'cover';
    button.style.backgroundPosition = 'center';
    button.style.borderRadius = '50%';
    button.style.boxShadow = '0 0 10px 4px rgba(0,0,0,0.7)';
    button.style.transition = 'background-image 0.3s ease';
  }

  function clearButtonBackground(button) {
    // Kthe sfondin nga transparent ne  te errt
    button.style.backgroundImage = '';
    button.style.backgroundColor = 'rgba(50, 50, 50, 0.5)';
    button.style.boxShadow = '';
    button.style.transition = 'background-color 0.3s ease';
  }

  function updateHoverEvents() {
    const current = getCurrentIndex();
    const prevIdx = getPrevIndex(current);
    const nextIdx = getNextIndex(current);

    const prevImg = items[prevIdx].getAttribute('data-img');
    const nextImg = items[nextIdx].getAttribute('data-img');

    //  Prev
    btnPrev.onmouseenter = () => setButtonBackground(btnPrev, prevImg);
    btnPrev.onmouseleave = () => clearButtonBackground(btnPrev);
    btnPrev.onmousedown = () => setButtonBackground(btnPrev, prevImg);
    btnPrev.onmouseup = () => clearButtonBackground(btnPrev);

    // Next
    btnNext.onmouseenter = () => setButtonBackground(btnNext, nextImg);
    btnNext.onmouseleave = () => clearButtonBackground(btnNext);
    btnNext.onmousedown = () => setButtonBackground(btnNext, nextImg);
    btnNext.onmouseup = () => clearButtonBackground(btnNext);

    clearButtonBackground(btnPrev);
    clearButtonBackground(btnNext);
  }

  updateHoverEvents();


  carousel.addEventListener('slid.bs.carousel', updateHoverEvents);
});







  //  Parallax 

  const mainImg = document.getElementById('mainImg');

  function parallaxImage() {
    const wrapper = mainImg.parentElement;
    const rect = wrapper.getBoundingClientRect();

    if (rect.top < window.innerHeight && rect.bottom > 0) {
      const speed = 0.3;
      const offset = (rect.top - window.innerHeight / 2) * speed;
      mainImg.style.transform = `translateY(${offset}px)`;
    }

    requestAnimationFrame(parallaxImage);
  }

  requestAnimationFrame(parallaxImage);



const cards = document.querySelectorAll('.card');
let activeIndex = 0;
const totalCards = cards.length;

function updateActive() {
  cards.forEach((card, i) => {
    if (i === activeIndex) {
      card.style.transform = 'translateY(-20px) scale(1.05)';
      card.style.transition = 'transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease';
      card.classList.add('border', 'border-primary');
      card.style.borderWidth = '3px';
      card.style.borderRadius = '15px';
      card.style.boxShadow = '0 10px 25px rgba(68, 68, 68, 0.6)';
      card.style.zIndex = '10';  
    } else {
      card.style.transform = 'translateY(0) scale(1)';
      card.style.transition = 'transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease';
      card.classList.remove('border', 'border-primary');
      card.style.borderWidth = '1px';
      card.style.borderRadius = '8px';
      card.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.1)';
      card.style.zIndex = '1';
    }
  });
}

updateActive();

setInterval(() => {
  activeIndex = (activeIndex + 1) % totalCards;
  updateActive();
}, 4000);
