// SERVICE ACCORDION
const cards = document.querySelectorAll('.service-card');

cards.forEach(card => {
  card.addEventListener('click', () => {
    cards.forEach(c => {
      if (c !== card) c.classList.remove('active');
    });

    card.classList.toggle('active');

    if (window.innerWidth < 900 && card.classList.contains('active')) {
      card.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  });
});

// GALLERY MODAL
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modal-img');

document.querySelectorAll('.gallery-img').forEach(img => {
  img.addEventListener('click', () => {
    modalImg.src = img.src;
    modal.classList.add('open');
  });
});

modal.addEventListener('click', () => {
  modal.classList.remove('open');
});

// INSTAGRAM TILE
const instaTile = document.querySelector('.gallery-instagram');

if (instaTile) {
  instaTile.addEventListener('click', () => {
    window.open('https://www.instagram.com/glossyglimpse_autodetailing', '_blank');
  });
}

// FADE-IN ON SCROLL
const fadeSections = document.querySelectorAll('.fade-section');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });

fadeSections.forEach(sec => observer.observe(sec));

// HERO PARALLAX
const heroBg = document.getElementById('hero-bg');

window.addEventListener('scroll', () => {
  const offset = window.scrollY * 0.15;
  heroBg.style.transform = `translate3d(0, ${offset}px, 0)`;
});

// RIPPLE EFFECT
function addRipple(e) {
  const rect = e.currentTarget.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  const ripple = e.currentTarget;
  ripple.style.setProperty('--ripple-x', `${x}px`);
  ripple.style.setProperty('--ripple-y', `${y}px`);
}

document.querySelectorAll('.mini-book, .book-btn').forEach(btn => {
  btn.addEventListener('mousedown', addRipple);
});