<!-- 1. Load Algolia and InstantSearch.js -->
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>

<!-- 2. HTML structure -->
<div id="search-root">
  <div id="searchbox"></div>
  <div id="hits" style="display: none;"></div>
</div>

<!-- 3. Script logic -->
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const searchClient = algoliasearch('R75WHNM08J', '16efb9aa49c611e0f9020d2c6a6acd1d');

    const search = instantsearch({
      indexName: 'production_content',
      searchClient,
      searchFunction(helper) {
        if (helper.state.query) {
          helper.setQueryParameter('hitsPerPage', 5).search();
          document.querySelector('#hits').style.display = 'block';
        } else {
          document.querySelector('#hits').style.display = 'none';
        }
      },
    });

    search.addWidgets([
      instantsearch.widgets.searchBox({
        container: '#searchbox',
        placeholder: 'Search this site...',
      }),
      instantsearch.widgets.hits({
        container: '#hits',
        templates: {
          item(hit) {
            const title = hit.poc?.title || 'Untitled';
            const text = hit.text || '';
            const url = `/pocs/${hit.poc?.id || ''}`;
            return `
              <div style="margin-bottom: 16px; border-bottom: 1px solid #eee; padding-bottom: 8px;">
                <a href="${url}" style="font-weight: 600; color: #1a2944;">${title}</a>
                <p style="margin: 4px 0;">${text.slice(0, 140)}…</p>
              </div>
            `;
          }
        }
      }),
    ]);

    search.start();
  });
</script>