import { ArticleCard } from "@/components/article-card";
import { articleInclude } from "@/lib/data";
import { prisma } from "@/lib/prisma";
import { siteMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";
export const metadata = siteMetadata({ title: "Country Updates & Guides", path: "/country-updates" });

export default async function CountryUpdatesPage() {
  const articles = await prisma.article.findMany({
    where: { status: "PUBLISHED", category: { slug: "country-guides" } },
    include: articleInclude,
    orderBy: { publishedAt: "desc" },
    take: 18
  });

  return (
    <section className="px-4 py-12 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx">Country intelligence</p>
        <h1 className="mt-3 font-display text-4xl font-black text-white">Country Updates</h1>
        <p className="mt-4 max-w-2xl text-white/62">Visa information, cost of living, tourism signals, local policy updates, and practical travel context.</p>
        <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {articles.map((article) => <ArticleCard key={article.id} article={article} />)}
        </div>
      </div>
    </section>
  );
}