// ===============================
// SERVICE ACCORDION (ONE OPEN AT A TIME)
// ===============================
const cards = document.querySelectorAll('.service-card');

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

    // Toggle selected card
    card.classList.toggle('active');

    // Auto-scroll on mobile for better UX
    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 EFFECT
// ===============================
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 FOR BUTTONS
// ===============================
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);
});

// ===============================
// EMAILJS BOOKING FORM SUBMISSION
// ===============================
const bookingBtn = document.querySelector('.book-btn');

bookingBtn.addEventListener('click', (e) => {
  e.preventDefault();

  const name = document.querySelector('#name').value.trim();
  const email = document.querySelector('#email').value.trim();
  const phone = document.querySelector('#phone').value.trim();
  const service = document.querySelector('#service-select').value;
  const date = document.querySelector('#date').value;

  if (!name || !email || !phone || !service || !date) {
    alert("Please fill out all fields before submitting.");
    return;
  }

  const templateParams = {
    customer_name: name,
    customer_email: email,
    customer_phone: phone,
    selected_service: service,
    preferred_date: date
  };

  emailjs.send("service_3zi02q2", "template_y0j8ek6", templateParams)
    .then(() => {
      alert("Your booking request has been sent! We'll get back to you shortly.");
    })
    .catch((error) => {
      console.error("EmailJS Error:", error);
      alert("There was an issue sending your booking. Please try again.");
    });
});
