search: real autocomplete previews + clearer placeholder

PLACEHOLDER: "Search broadcast news…" → "Search articles, gear,
vendors". Drops the weird ellipsis and the "we're a broadcast site
so 'broadcast news' is redundant" feel.

API (/api/search/suggest):
- Match expanded from {title, author_name} to
  {title, excerpt, content, author_name} — surfaces hits when the
  phrase lives deep in the article body.
- Returns a snippet object {text, matchStart, matchEnd} sliced
  from the first hit (HTML-stripped), with ~80 chars of context on
  either side and "…" markers when truncated.
- Returns matched_in: 'title' | 'excerpt' | 'content' | 'author' so
  the UI can show "match in article body" / "match in byline".
- Returns date + author_name on each result.

UI dropdown (Header.tsx):
- Each suggestion now renders three rows:
  1) Title (bold) + category chip
  2) Snippet with the matched substring wrapped in <mark>
  3) Author byline + date + (if match wasn't in title) a tag
     showing where the match occurred
- Vertical stacking with a colored left-border on hover so the
  active suggestion is visible.

CSS:
- Stack item layout, snippet with -webkit-line-clamp:2 so long
  matches don't overflow.
- <mark> background uses the accent blue at 28% so the highlight
  reads against the dark card.

src/app/api/search/suggest/route.ts

@@ -15,6 +15,37 @@ function client() {
   });
 }
 
+// Extract a short snippet around the first match of `needle` inside the
+// (HTML-stripped) `haystack`. Returns the substring + the absolute offset
+// of the match within the snippet, so the caller can highlight it.
+function buildSnippet(
+  haystack: string,
+  needle: string,
+  radius = 80,
+): { text: string; matchStart: number; matchEnd: number } | null {
+  if (!haystack || !needle) return null;
+  const stripped = haystack
+    .replace(/<[^>]+>/g, " ")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&#39;/g, "'")
+    .replace(/&quot;/g, '"')
+    .replace(/\s+/g, " ")
+    .trim();
+  const idx = stripped.toLowerCase().indexOf(needle.toLowerCase());
+  if (idx === -1) return null;
+  const start = Math.max(0, idx - radius);
+  const end = Math.min(stripped.length, idx + needle.length + radius);
+  const prefix = start > 0 ? "… " : "";
+  const suffix = end < stripped.length ? " …" : "";
+  const text = prefix + stripped.slice(start, end) + suffix;
+  return {
+    text,
+    matchStart: prefix.length + (idx - start),
+    matchEnd: prefix.length + (idx - start) + needle.length,
+  };
+}
+
 export async function GET(req: Request) {
   const { searchParams } = new URL(req.url);
   const q = (searchParams.get("q") || "").trim();
@@ -25,11 +56,21 @@ export async function GET(req: Request) {
   const like = `%${q.replace(/[%_]/g, " ")}%`;
 
   const sb = client();
+  // Match against title, excerpt, content, AND author name (was just
+  // title+author). Content match is what surfaces hits when the phrase
+  // lives deep in the article body.
   const { data, error } = await sb
     .from("wp_imported_posts")
-    .select("wp_slug, title, category")
+    .select("wp_slug, title, excerpt, content, category, wp_published_at, author_name")
     .eq("status", "published")
-    .or(`title.ilike.${like},author_name.ilike.${like}`)
+    .or(
+      [
+        `title.ilike.${like}`,
+        `excerpt.ilike.${like}`,
+        `content.ilike.${like}`,
+        `author_name.ilike.${like}`,
+      ].join(","),
+    )
     .order("wp_published_at", { ascending: false, nullsFirst: false })
     .limit(limit);
 
@@ -37,12 +78,53 @@ export async function GET(req: Request) {
     return NextResponse.json({ items: [], error: error.message }, { status: 500 });
   }
 
-  const items = (data || []).map((r: any) => ({
-    slug: r.wp_slug,
-    title: r.title,
-    category: r.category,
-    href: `/news/${r.wp_slug}`,
-  }));
+  // Build each item with title, category, date, and a snippet that
+  // shows WHERE the match happened. Snippet source priority:
+  // title → excerpt → content → author_name.
+  const items = (data || []).map((r: any) => {
+    let snippet: { text: string; matchStart: number; matchEnd: number } | null = null;
+    let matchedIn: "title" | "excerpt" | "content" | "author" | null = null;
+
+    const titleHit = buildSnippet(r.title || "", q, 30);
+    if (titleHit) {
+      snippet = titleHit;
+      matchedIn = "title";
+    } else {
+      const exHit = buildSnippet(r.excerpt || "", q, 70);
+      if (exHit) {
+        snippet = exHit;
+        matchedIn = "excerpt";
+      } else {
+        const ctHit = buildSnippet(r.content || "", q, 80);
+        if (ctHit) {
+          snippet = ctHit;
+          matchedIn = "content";
+        } else if ((r.author_name || "").toLowerCase().includes(q.toLowerCase())) {
+          const a = r.author_name || "";
+          const i = a.toLowerCase().indexOf(q.toLowerCase());
+          snippet = { text: a, matchStart: i, matchEnd: i + q.length };
+          matchedIn = "author";
+        }
+      }
+    }
+
+    return {
+      slug: r.wp_slug,
+      title: r.title,
+      category: r.category,
+      date: r.wp_published_at
+        ? new Date(r.wp_published_at).toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+          })
+        : null,
+      author_name: r.author_name || null,
+      snippet,
+      matched_in: matchedIn,
+      href: `/news/${r.wp_slug}`,
+    };
+  });
 
   return NextResponse.json(
     { items, query: q },