function initAlgolia() {
  if (typeof algoliasearch === 'undefined' || typeof instantsearch === 'undefined') {
    console.error('Algolia search not loaded. Retrying in 100ms.');
    setTimeout(initAlgolia, 100);
    return;
  }

  if (!window.ALGOLIA_CONFIG) {
    console.error('Algolia configuration not found.');
    return;
  }

  const { applicationID, searchOnlyApiKey, indexName } = window.ALGOLIA_CONFIG;

  const searchClient = algoliasearch(applicationID, searchOnlyApiKey);
  const search = instantsearch({
    indexName: indexName,
    searchClient,
  });

  search.addWidgets([
    instantsearch.widgets.searchBox({
      container: '#search-input',
      placeholder: 'Search...',
    }),
    instantsearch.widgets.hits({
      container: '#search-hits',
      templates: {
        item: `
          <div class="box">
            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong><a href="{{ '{{' }}url}}">{{{ _highlightResult.title.value }}}</a></strong>
                    <br>
                    {{{ _snippetResult.content.value }}}
                  </p>
                </div>
              </div>
            </article>
          </div>
        `,
      },
    })
  ]);

  search.start();

  const searchButton = document.getElementById('search-button');
  if (searchButton) {
    searchButton.addEventListener('click', function(e) {
      e.preventDefault();
      const searchInput = document.getElementById('search-input');
      if (searchInput) {
        search.helper.setQuery(searchInput.value).search();
      }
    });
  }
}

// Use DOMContentLoaded or defer attribute on script tag
document.addEventListener('DOMContentLoaded', initAlgolia);