document.addEventListener('DOMContentLoaded', function() {
  // Get references to DOM elements
  const searchToggle = document.getElementById('searchToggle');
  const mobileSearchToggle = document.getElementById('mobileSearchToggle');
  const searchContainer = document.getElementById('searchContainer');
  const searchInput = document.getElementById('searchInput');
  const searchOverlay = document.getElementById('searchOverlay');
  const closeSearchOverlay = document.getElementById('closeSearchOverlay');
  const overlaySearchInput = document.getElementById('overlaySearchInput');
  const mobileMenuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');
  const productsLink = document.getElementById('productsLink');
  const productCard = document.getElementById('productCard');
  const productsArrow = document.getElementById('productsArrow');
  const mobileProductsLink = document.getElementById('mobileProductsLink');
  const mobileProductCard = document.getElementById('mobileProductCard');
  const mobileProductsArrow = document.getElementById('mobileProductsArrow');
  const notificationBell = document.getElementById('notificationBell');
  const notificationDot = document.getElementById('notificationDot');
  const newUpdatesText = document.getElementById('newUpdatesText');
  const notificationPanel = document.getElementById('notificationPanel');
  const clearNotificationsButton = document.getElementById('clearNotifications');

  let isSearchExpanded = false;
  let isNotificationPanelOpen = false;

  // Search functionality
  function toggleSearch() {
    isSearchExpanded = !isSearchExpanded;
    searchContainer.classList.toggle('expanded', isSearchExpanded);
    searchInput.classList.toggle('hidden', !isSearchExpanded);
    if (isSearchExpanded) {
      searchInput.focus();
    }
  }

  function toggleSearchOverlay(show) {
    searchOverlay.classList.toggle('-translate-y-full', !show);
    if (show) {
      overlaySearchInput.focus();
    }
  }

  if (searchToggle) {
    searchToggle.addEventListener('click', (e) => {
      e.stopPropagation();
      toggleSearch();
    });
  }

  if (mobileSearchToggle) {
    mobileSearchToggle.addEventListener('click', (e) => {
      e.stopPropagation();
      toggleSearchOverlay(true);
    });
  }

  if (closeSearchOverlay) {
    closeSearchOverlay.addEventListener('click', () => toggleSearchOverlay(false));
  }

  if (searchInput) {
    searchInput.addEventListener('click', (e) => e.stopPropagation());
  }

  document.addEventListener('click', () => {
    if (isSearchExpanded) {
      toggleSearch();
    }
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      if (isSearchExpanded) {
        toggleSearch();
      }
      toggleSearchOverlay(false);
    }
  });

  if (overlaySearchInput) {
    overlaySearchInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        performSearch(overlaySearchInput.value);
      }
    });
  }

  function performSearch(query) {
    console.log(`Searching for: ${query}`);
    alert(`Search results for: ${query}`);
    toggleSearchOverlay(false);
  }

  // Mobile menu functionality
  if (mobileMenuButton && mobileMenu) {
    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      mobileMenuButton.setAttribute('aria-expanded', 
        mobileMenuButton.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'
      );
    });
  }

  // Products dropdown functionality
  let productCardTimeout;

  function showProductCard(card, arrow) {
    clearTimeout(productCardTimeout);
    card.classList.remove('hidden');
    card.classList.add('show');
    arrow.classList.add('rotate-180');
  }

  function hideProductCard(card, arrow) {
    productCardTimeout = setTimeout(() => {
      card.classList.remove('show');
      arrow.classList.remove('rotate-180');
      setTimeout(() => {
        if (!card.classList.contains('show')) {
          card.classList.add('hidden');
        }
      }, 200);
    }, 300);
  }

  if (productsLink && productCard && productsArrow) {
    productsLink.addEventListener('click', (e) => {
      e.preventDefault();
      productCard.classList.toggle('hidden');
      productCard.classList.toggle('show');
      productsArrow.classList.toggle('rotate-180');
    });

    productsLink.addEventListener('mouseenter', () => {
      showProductCard(productCard, productsArrow);
    });

    productsLink.addEventListener('mouseleave', () => {
      hideProductCard(productCard, productsArrow);
    });

    productCard.addEventListener('mouseenter', () => {
      showProductCard(productCard, productsArrow);
    });

    productCard.addEventListener('mouseleave', () => {
      hideProductCard(productCard, productsArrow);
    });
  }

  // Mobile products dropdown functionality
  if (mobileProductsLink && mobileProductCard && mobileProductsArrow) {
    mobileProductsLink.addEventListener('click', (e) => {
      e.preventDefault();
      mobileProductCard.classList.toggle('hidden');
      mobileProductsArrow.classList.toggle('rotate-180');
    });
  }

  // Notification functionality
  function toggleNotificationPanel() {
    isNotificationPanelOpen = !isNotificationPanelOpen;
    notificationPanel.classList.toggle('hidden', !isNotificationPanelOpen);
    notificationBell.setAttribute('aria-expanded', isNotificationPanelOpen);
  }

  if (notificationBell) {
    notificationBell.addEventListener('click', (e) => {
      e.stopPropagation();
      toggleNotificationPanel();
    });
  }

  if (clearNotificationsButton) {
    clearNotificationsButton.addEventListener('click', () => {
      notificationDot.classList.add('hidden');
      newUpdatesText.classList.add('hidden');
      notificationPanel.classList.add('hidden');
    });
  }

  document.addEventListener('click', (e) => {
    if (isNotificationPanelOpen && !notificationPanel.contains(e.target)) {
      toggleNotificationPanel();
    }
  });
});
