// CloudMate Blogs Interactive Scripts
document.addEventListener('DOMContentLoaded', () => {
  // Prevent navigation on hash links
  document.querySelectorAll('a[href="#"]').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      if (link.classList.contains('page-btn') && !link.classList.contains('next')) {
        document.querySelectorAll('.page-btn').forEach(b => b.classList.remove('active'));
        link.classList.add('active');
        document.querySelector('.blog-grid-section')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });

  // Live Search Functionality
  const searchInput = document.getElementById('searchInput');
  const cards = document.querySelectorAll('.blog-card');

  if (searchInput) {
    searchInput.addEventListener('input', (e) => {
      const query = e.target.value.toLowerCase().trim();
      cards.forEach(card => {
        const title = card.querySelector('.card-title')?.innerText.toLowerCase() || '';
        const excerpt = card.querySelector('.card-excerpt')?.innerText.toLowerCase() || '';
        const category = card.getAttribute('data-category')?.toLowerCase() || '';
        
        if (title.includes(query) || excerpt.includes(query) || category.includes(query)) {
          card.style.display = 'flex';
        } else {
          card.style.display = 'none';
        }
      });
    });
  }

  // Category Filter Functionality
  const filterButtons = document.querySelectorAll('.filter-chip');

  filterButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      // Remove active class from all
      filterButtons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      const filterValue = btn.getAttribute('data-filter');
      if (searchInput) searchInput.value = ''; // Reset search input

      cards.forEach(card => {
        const cardCategory = card.getAttribute('data-category');
        if (filterValue === 'all' || cardCategory === filterValue) {
          card.style.display = 'flex';
          card.style.opacity = '1';
          card.style.transform = 'scale(1)';
        } else {
          card.style.display = 'none';
        }
      });
    });
  });
});
