1'use client';23import { useRouter } from 'next/navigation';4import { Search } from 'lucide-react';5import { useState } from 'react';67/** Compact header search; the full search experience lives at /search (owned by the search module). */8export function HeaderSearch() {9 const router = useRouter();10 const [q, setQ] = useState('');11 return (12 <form13 role="search"14 className="relative hidden items-center md:flex"15 onSubmit={(e) => {16 e.preventDefault();17 const query = q.trim();18 if (query) router.push(`/search?q=${encodeURIComponent(query)}`);19 }}20 >21 <Search className="pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-subtle" />22 <input23 type="search"24 value={q}25 onChange={(e) => setQ(e.target.value)}26 placeholder="Search cards, watches, games, sneakers, LEGO…"27 className="h-8 w-64 rounded-md border border-border bg-sunken pl-8 pr-2 text-[13px] text-fg placeholder:text-subtle focus:w-80 focus:border-border-strong focus:outline-none transition-[width] xl:w-80 xl:focus:w-96"28 aria-label="Search collectibles"29 />30 </form>31 );32}33