---
import Base from '../layouts/Base.astro';
---
<Base title="CTAO Science Portal — Search" description="Search CTAO news and announcements">
  <section class="hero-band">
    <div class="band-bg" aria-hidden="true"></div>
    <div class="container hero">
      <div class="eyebrow">Science Portal</div>
      <h1>Search</h1>
      <p>Find news and announcements</p>
    </div>
  </section>

  <section class="band--moon">
    <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>

<script is:inline src="/search-client.js"></script>
<script is:inline>
  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>