script.js

// ==================== INITIALIZE LUCIDE ICONS ====================
lucide.createIcons();

// ==================== PRELOADER ====================
window.addEventListener('load', () => {
  const preloader = document.getElementById('preloader');
  setTimeout(() => {
    preloader.style.opacity = '0';
    setTimeout(() => {
      preloader.style.display = 'none';
    }, 700);
  }, 1500);
});

// ==================== IMAGE LAZY LOADING ====================
document.querySelectorAll('img').forEach(img => {
  if (img.complete) {
    img.classList.add('loaded');
  } else {
    img.addEventListener('load', () => {
      img.classList.add('loaded');
    });
    img.addEventListener('error', () => {
      img.classList.add('loaded');
    });
  }
});

// ==================== NAVBAR SCROLL EFFECT ====================
const navbar = document.getElementById('navbar');
let lastScroll = 0;

window.addEventListener('scroll', () => {
  const currentScroll = window.pageYOffset;
  
  if (currentScroll > 80) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
  
  lastScroll = currentScroll;
});

// ==================== MOBILE MENU ====================
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');

mobileMenuBtn.addEventListener('click', () => {
  mobileMenu.classList.toggle('hidden');
});

// Close mobile menu when clicking a link
mobileMenu.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    mobileMenu.classList.add('hidden');
  });
});

// ==================== SCROLL ANIMATIONS ====================
const observerOptions = {
  threshold: 0.15,
  rootMargin: '0px 0px -50px 0px'
};

const scrollObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const delay = entry.target.getAttribute('data-delay') || 0;
      setTimeout(() => {
        entry.target.classList.add('animated');
      }, parseInt(delay));
      scrollObserver.unobserve(entry.target);
    }
  });
}, observerOptions);

document.querySelectorAll('.animate-on-scroll').forEach(el => {
  scrollObserver.observe(el);
});

// ==================== PARALLAX EFFECT ====================
const heroParallax = document.querySelector('.hero-parallax');

window.addEventListener('scroll', () => {
  if (heroParallax) {
    const scrolled = window.pageYOffset;
    if (scrolled < window.innerHeight) {
      heroParallax.style.transform = `translateY(${scrolled * 0.4}px)`;
    }
  }
});

// ==================== TESTIMONIALS SLIDER ====================
const testimonialTrack = document.getElementById('testimonialTrack');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const sliderDots = document.querySelectorAll('.slider-dot');
let currentSlide = 0;
let slidesToShow = 3;
let totalSlides = 5;
let autoSlideInterval;

function updateSlidesToShow() {
  if (window.innerWidth < 768) {
    slidesToShow = 1;
  } else if (window.innerWidth < 1024) {
    slidesToShow = 2;
  } else {
    slidesToShow = 3;
  }
}

function getMaxSlide() {
  return Math.max(0, totalSlides - slidesToShow);
}

function updateSlider() {
  const slideWidth = 100 / slidesToShow;
  testimonialTrack.style.transform = `translateX(-${currentSlide * slideWidth}%)`;
  
  // Update dots
  const maxSlide = getMaxSlide();
  const dotCount = sliderDots.length;
  sliderDots.forEach((dot, index) => {
    dot.classList.remove('active');
    dot.style.backgroundColor = '';
    dot.style.width = '';
  });
  
  const activeDotIndex = maxSlide > 0 ? Math.round((currentSlide / maxSlide) * (dotCount - 1)) : 0;
  sliderDots[activeDotIndex].classList.add('active');
}

function nextSlide() {
  const maxSlide = getMaxSlide();
  currentSlide = currentSlide >= maxSlide ? 0 : currentSlide + 1;
  updateSlider();
}

function prevSlide() {
  const maxSlide = getMaxSlide();
  currentSlide = currentSlide <= 0 ? maxSlide : currentSlide - 1;
  updateSlider();
}

function startAutoSlide() {
  autoSlideInterval = setInterval(nextSlide, 5000);
}

function stopAutoSlide() {
  clearInterval(autoSlideInterval);
}

nextBtn.addEventListener('click', () => {
  stopAutoSlide();
  nextSlide();
  startAutoSlide();
});

prevBtn.addEventListener('click', () => {
  stopAutoSlide();
  prevSlide();
  startAutoSlide();
});

// Initialize slider
updateSlidesToShow();
updateSlider();
startAutoSlide();

window.addEventListener('resize', () => {
  updateSlidesToShow();
  if (currentSlide > getMaxSlide()) {
    currentSlide = getMaxSlide();
  }
  updateSlider();
});

// ==================== GALLERY LIGHTBOX ====================
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightboxImg');
const closeLightbox = document.getElementById('closeLightbox');

document.querySelectorAll('.gallery-item').forEach(item => {
  item.addEventListener('click', () => {
    const img = item.querySelector('img');
    lightboxImg.src = img.src;
    lightboxImg.alt = img.alt;
    lightbox.classList.add('active');
    document.body.style.overflow = 'hidden';
  });
});

function closeLightboxFn() {
  lightbox.classList.remove('active');
  document.body.style.overflow = '';
}

closeLightbox.addEventListener('click', closeLightboxFn);

lightbox.addEventListener('click', (e) => {
  if (e.target === lightbox) {
    closeLightboxFn();
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && lightbox.classList.contains('active')) {
    closeLightboxFn();
  }
});

// ==================== ADD TO CART TOAST ====================
const cartToast = document.getElementById('cartToast');

document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    
    // Show toast
    cartToast.classList.add('cart-toast-show');
    
    // Update cart count
    const cartCount = document.querySelector('.bg-terracotta-500');
    if (cartCount) {
      const currentCount = parseInt(cartCount.textContent);
      cartCount.textContent = currentCount + 1;
      
      // Animate cart count
      cartCount.style.transform = 'scale(1.3)';
      setTimeout(() => {
        cartCount.style.transform = 'scale(1)';
      }, 200);
    }
    
    // Button feedback
    const originalText = btn.textContent;
    btn.textContent = '✓ Added';
    btn.style.backgroundColor = '#E8B94E';
    btn.style.color = '#2A1F14';
    
    setTimeout(() => {
      btn.textContent = originalText;
      btn.style.backgroundColor = '';
      btn.style.color = '';
    }, 2000);
    
    setTimeout(() => {
      cartToast.classList.remove('cart-toast-show');
    }, 2500);
  });
});

// ==================== NEWSLETTER FORM ====================
const newsletterForm = document.getElementById('newsletterForm');
const emailInput = document.getElementById('emailInput');
const formMessage = document.getElementById('formMessage');

newsletterForm.addEventListener('submit', (e) => {
  e.preventDefault();
  
  const email = emailInput.value.trim();
  
  if (!email) {
    formMessage.textContent = 'Please enter your email address.';
    formMessage.className = 'mt-4 text-sm text-terracotta-400';
    formMessage.classList.remove('hidden');
    return;
  }
  
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    formMessage.textContent = 'Please enter a valid email address.';
    formMessage.className = 'mt-4 text-sm text-terracotta-400';
    formMessage.classList.remove('hidden');
    return;
  }
  
  // Success
  formMessage.textContent = '✨ Welcome to the Multani Heritage family! Check your inbox for a special surprise.';
  formMessage.className = 'mt-4 text-sm text-gold-400';
  formMessage.classList.remove('hidden');
  emailInput.value = '';
  
  // Hide after 5 seconds
  setTimeout(() => {
    formMessage.classList.add('hidden');
  }, 5000);
});

// ==================== BACK TO TOP BUTTON ====================
const backToTop = document.getElementById('backToTop');

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 600) {
    backToTop.style.opacity = '1';
    backToTop.style.transform = 'translateY(0)';
  } else {
    backToTop.style.opacity = '0';
    backToTop.style.transform = 'translateY(16px)';
  }
});

backToTop.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

// ==================== SMOOTH SCROLL FOR ANCHOR LINKS ====================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

// ==================== COUNTER ANIMATION ====================
function animateCounters() {
  const counters = document.querySelectorAll('[data-count]');
  counters.forEach(counter => {
    const target = parseInt(counter.getAttribute('data-count'));
    const duration = 2000;
    const step = target / (duration / 16);
    let current = 0;
    
    const timer = setInterval(() => {
      current += step;
      if (current >= target) {
        counter.textContent = target;
        clearInterval(timer);
      } else {
        counter.textContent = Math.floor(current);
      }
    }, 16);
  });
}

// ==================== WISHLIST HEART TOGGLE ====================
document.querySelectorAll('.product-card button').forEach(btn => {
  if (btn.querySelector('[data-lucide="heart"]')) {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      const icon = btn.querySelector('svg');
      if (icon) {
        const isFilled = icon.getAttribute('fill') !== 'none' && icon.getAttribute('fill') !== '';
        if (isFilled) {
          icon.setAttribute('fill', 'none');
          btn.classList.remove('bg-terracotta-500');
        } else {
          icon.setAttribute('fill', 'currentColor');
          btn.classList.add('bg-terracotta-500');
        }
      }
    });
  }
});

// ==================== TOUCH SWIPE FOR TESTIMONIALS ====================
let touchStartX = 0;
let touchEndX = 0;

const sliderEl = document.getElementById('testimonialSlider');

sliderEl.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
  stopAutoSlide();
}, { passive: true });

sliderEl.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  const diff = touchStartX - touchEndX;
  
  if (Math.abs(diff) > 50) {
    if (diff > 0) {
      nextSlide();
    } else {
      prevSlide();
    }
  }
  startAutoSlide();
}, { passive: true });

// ==================== RE-INIT LUCIDE ON DYNAMIC CHANGES ====================
setTimeout(() => {
  lucide.createIcons();
}, 100);