import { Compass, Hotel, MapPinned, PlaneTakeoff } from "lucide-react";
import { ArticleCard } from "@/components/article-card";
import { prisma } from "@/lib/prisma";
import { siteMetadata } from "@/lib/seo";
import { articleInclude } from "@/lib/data";
import type { LucideIcon } from "lucide-react";

export const dynamic = "force-dynamic";
export const metadata = siteMetadata({ title: "Travel Blogs, Tourism & Vlogs", path: "/travel" });

const travelFeatures: Array<[string, LucideIcon]> = [
  ["Visa information", PlaneTakeoff],
  ["Hotel recommendations", Hotel],
  ["Interactive maps", MapPinned],
  ["Destination galleries", Compass]
];

export default async function TravelPage() {
  const articles = await prisma.article.findMany({
    where: { status: "PUBLISHED", category: { slug: { in: ["travel", "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">
        <div className="glass overflow-hidden rounded-lg p-8 sm:p-10">
          <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-acid">Infomix Travel</p>
          <h1 className="mt-3 max-w-4xl font-display text-4xl font-black text-white sm:text-6xl">Country guides, visa notes, hotels, tips, and travel vlogs</h1>
          <div className="mt-8 grid gap-4 md:grid-cols-4">
            {travelFeatures.map(([label, Icon]) => (
              <div key={label} className="rounded-lg border border-white/10 bg-white/5 p-4 text-sm font-semibold text-white/80">
                <Icon className="mb-3 text-acid" size={22} /> {label}
              </div>
            ))}
          </div>
        </div>
        <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>
  );
}