function useSearchHandlers() {
  const isMobile = () => window.matchMedia('(max-width: 767px)').matches;

  React.useEffect(() => {
    const openBtn = document.querySelector('.search-open-btn');
    const desktopForm = document.querySelector('.search-form-desktop');
    const mobilePopup = document.querySelector('.search-popup');
    const closeBtn = document.querySelector('.search-close-btn');
    const popupCloseBtn = document.querySelector('.search-popup-close');

    function getMobileInput() {
      return document.querySelector('.search-form-mobile .search-input');
    }
    function getDesktopInput() {
      return document.querySelector('.search-form-desktop .search-input');
    }

    function openSearch(e) {
      if (e) e.preventDefault();
      if (isMobile()) {
        if (mobilePopup) {
          mobilePopup.style.display = 'flex';
          setTimeout(() => {
            const mobileInput = getMobileInput();
            if (mobileInput) mobileInput.focus();
          }, 100);
          document.body.style.overflow = 'hidden';
        }
      } else {
        if (desktopForm) {
          desktopForm.style.display = 'flex';
          setTimeout(() => {
            const desktopInput = getDesktopInput();
            if (desktopInput) desktopInput.focus();
          }, 100);
        }
      }
    }

    function closeSearch() {
      if (desktopForm) {
        desktopForm.style.display = 'none';
        const desktopInput = getDesktopInput();
        if (desktopInput) desktopInput.value = '';
      }
    }

    function closePopup() {
      if (mobilePopup) {
        mobilePopup.style.display = 'none';
        const mobileInput = getMobileInput();
        if (mobileInput) mobileInput.value = '';
        document.body.style.overflow = '';
      }
    }

    if (openBtn) openBtn.addEventListener('click', openSearch);
    if (closeBtn) closeBtn.addEventListener('click', closeSearch);
    if (popupCloseBtn) popupCloseBtn.addEventListener('click', closePopup);

    function mobilePopupClick(e) {
      if (e.target.classList.contains('search-popup-close')) {
        closePopup();
      }
      if (e.target === mobilePopup) {
        closePopup();
      }
    }
    if (mobilePopup) {
      mobilePopup.addEventListener('click', mobilePopupClick);
    }

    function escHandler(e) {
      if (e.key === 'Escape') {
        closeSearch();
        closePopup();
      }
    }
    document.addEventListener('keydown', escHandler);

    return () => {
      if (openBtn) openBtn.removeEventListener('click', openSearch);
      if (closeBtn) closeBtn.removeEventListener('click', closeSearch);
      if (popupCloseBtn) popupCloseBtn.removeEventListener('click', closePopup);
      if (mobilePopup) mobilePopup.removeEventListener('click', mobilePopupClick);
      document.removeEventListener('keydown', escHandler);
    };
  }, []);
}

function SearchScriptInjector() {
  useSearchHandlers();
  return null;
}

if (window.ReactDOM && document.getElementById('search-script-mount')) {
  window.ReactDOM.render(React.createElement(SearchScriptInjector), document.getElementById('search-script-mount'));
}