---
import Base from '../layouts/Base.astro';
---
<Base title="CTAO Science Portal - Search" description="Search CTAO news and announcements">
  {/* Utility archetype: ONE surface per page — Moon canvas from the landing
      head down (borderless cards/panels pop against it); editorial pages stay
      all-white. No mid-page surface seams (DESIGN.md). */}
  <section class="band--moon">
    <header class="container page-head">
      <h1>Search</h1>
      <p class="standfirst">Find news and announcements.</p>
    </header>
    <div class="container page">
    <form class="search-form" role="search" action="/search" method="get">
      <label class="sr-only" for="q">Search news</label>
      <svg class="ico search-ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4.3-4.3" /></svg>
      <input id="q" name="q" type="search" placeholder="e.g. LST camera, Council, data…" autocomplete="off" />
      <button class="btn" type="submit">Search</button>
    </form>
    <p class="notice" id="search-status" role="status" aria-live="polite">Type to search the news archive.</p>
    <ol class="search-results" id="search-results"></ol>
    <noscript><p class="notice">Search requires JavaScript. Browse all news on the <a href="/news">news page</a>.</p></noscript>
    </div>
  </section>
</Base>

{/* search-client.js is loaded once (deferred) by the Base layout; this inline
    module runs after it in the shared after-parse queue — order guaranteed. */}
<script is:inline type="module">
  const run = newsSearch({ input: 'q', list: 'search-results', status: 'search-status', limit: 20, hint: 'Type at least 2 characters.' });
  // Support /search?q=… deep links (hero search form, footer, bookmarks)
  const q0 = new URLSearchParams(location.search).get('q');
  const q = document.getElementById('q');
  if (q0) { q.value = q0; run(); }
  q.focus();
</script>