// UI enhancement JavaScript for KLEINS REAL ESTATE

// DOM Ready
document.addEventListener('DOMContentLoaded', function() {
  // Initialize UI enhancements
  initUIEnhancements();
});

// Initialize UI enhancements
function initUIEnhancements() {
  // Mobile menu toggle
  setupMobileMenu();
  
  // FAQ accordion
  setupFAQAccordion();
  
  // Smooth scrolling for anchor links
  setupSmoothScrolling();
  
  // Image lazy loading
  setupImageLazyLoading();
}

// Setup mobile menu toggle
function setupMobileMenu() {
  const mobileMenuButton = document.querySelector('.mobile-menu-toggle');
  const mobileMenu = document.querySelector('.mobile-menu');
  
  if (mobileMenuButton && mobileMenu) {
    mobileMenuButton.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
      
      // Toggle hamburger icon
      const icon = mobileMenuButton.querySelector('i');
      if (icon) {
        if (mobileMenu.classList.contains('hidden')) {
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        } else {
          icon.classList.remove('fa-bars');
          icon.classList.add('fa-times');
        }
      }
    });
  }
}

// Setup FAQ accordion
function setupFAQAccordion() {
  const faqButtons = document.querySelectorAll('.bg-white button');
  
  faqButtons.forEach(button => {
    button.addEventListener('click', function() {
      const content = this.nextElementSibling;
      const icon = this.querySelector('i');
      
      if (content && content.classList.contains('hidden')) {
        // Expand this item
        content.classList.remove('hidden');
        if (icon) {
          icon.classList.remove('fa-chevron-down');
          icon.classList.add('fa-chevron-up');
        }
      } else if (content) {
        // Collapse this item
        content.classList.add('hidden');
        if (icon) {
          icon.classList.remove('fa-chevron-up');
          icon.classList.add('fa-chevron-down');
        }
      }
    });
  });
}

// Setup smooth scrolling for anchor links
function setupSmoothScrolling() {
  const anchorLinks = document.querySelectorAll('a[href^="#"]');
  
  anchorLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      const targetId = this.getAttribute('href');
      if (targetId === '#') return;
      
      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        e.preventDefault();
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      }
    });
  });
}

// Setup image lazy loading
function setupImageLazyLoading() {
  // Add loading="lazy" to all images
  const images = document.querySelectorAll('img');
  images.forEach(img => {
    if (!img.hasAttribute('loading')) {
      img.setAttribute('loading', 'lazy');
    }
  });
}

// Utility function to debounce function calls
function debounce(func, wait, immediate) {
  let timeout;
  return function() {
    const context = this, args = arguments;
    const later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

// Utility function to throttle function calls
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}