avbeat-com/src/app/search/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AppImage from "@/components/ui/AppImage";
import { searchLegacyArticles } from "@/lib/articles/legacy-source";

export const revalidate = 60;

export const metadata: Metadata = {
  title: "Search — BroadcastBeat",
  description:
    "Search BroadcastBeat for broadcast engineering news, gear reviews, show coverage, and technology insights.",
  alternates: { canonical: "/search" },
};

interface SearchPageProps {
  searchParams: Promise<{ q?: string }>;
}

export default async function SearchPage({ searchParams }: SearchPageProps) {
  const { q } = await searchParams;
  const query = (q ?? "").trim();
  const results = query ? await searchLegacyArticles(query, 100) : [];

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="bg-[#111] border-b border-[#222] py-8">
        <div className="max-w-container mx-auto px-4">
          <div className="flex items-center gap-3 mb-2">
            <span className="section-label">Search</span>
            <div className="flex-1 h-px bg-[#2a2a2a]" />
          </div>
          <h1 className="font-heading text-white text-3xl font-bold">
            {query ? `Results for "${query}"` : "Search BroadcastBeat"}
          </h1>
          <p className="text-[#777] font-body text-sm mt-2">
            {query
              ? `${results.length} article${results.length === 1 ? "" : "s"} found across news, gear, technology, and show coverage.`
              : "Type in the header search box to find articles."}
          </p>
        </div>
      </div>

      <main className="max-w-container mx-auto px-4 py-8">
        {query && results.length === 0 && (
          <div className="py-16 text-center">
            <p className="text-[#555] font-body text-sm mb-3">No articles match your search.</p>
            <Link href="/news" className="text-[#5B7C8D] text-xs font-body hover:underline">
              Browse all news →
            </Link>
          </div>
        )}

        <div className="space-y-0">
          {results.map((article) => {
            if (!article?.slug) return null;
            return (
              <Link
                key={article.slug}
                href={`/news/${article.slug}`}
                className="flex gap-4 py-5 border-b border-[#222] group hover:bg-[#111] transition-colors px-2 -mx-2"
              >
                <div className="flex-shrink-0 w-[160px] h-[105px] relative overflow-hidden rounded-sm">
                  <AppImage
                    src={article.image || "/assets/images/article-placeholder.jpg"}
                    alt={article.alt || article.title || "BroadcastBeat article"}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-300"
                    sizes="160px"
                  />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 mb-1.5">
                    <span className="text-[#5B7C8D] font-body text-[10px] font-bold uppercase tracking-wider">
                      {article.category || "NEWS"}
                    </span>
                  </div>
                  <h2 className="font-heading text-[#e0e0e0] text-base font-bold leading-snug mb-2 group-hover:text-[#5B7C8D] transition-colors line-clamp-2">
                    {article.title || "Untitled"}
                  </h2>
                  <p className="text-[#777] font-body text-sm leading-relaxed line-clamp-2">
                    {article.excerpt || ""}
                  </p>
                  <div className="flex items-center gap-2 mt-2">
                    <span className="text-[#555] font-body text-xs">By {article.author || "Staff Reporter"}</span>
                    <span className="text-[#444] text-[10px]">·</span>
                    <span className="text-[#555] font-body text-xs">{article.readTime || ""}</span>
                  </div>
                </div>
              </Link>
            );
          })}
        </div>
      </main>
      <Footer />
    </div>
  );
}