import type { Metadata } from "next";
import MediaGrid, { type MediaCard } from "@/components/MediaGrid";
import { getAllMedia, formatMediaDate } from "@/lib/media";

export const dynamic = "force-dynamic";

export const metadata: Metadata = {
  title: "Media",
  description:
    "Meetings, events, and press coverage — photos and articles from Oscar One engagements across aviation and unmanned systems.",
};

export default async function MediaPage() {
  const all = await getAllMedia();

  // Featured story: the file flagged `featured: true`, else the newest.
  const featuredItem = all.find((m) => m.featured) ?? all[0] ?? null;
  const rest = all.filter((m) => m !== featuredItem);

  const toCard = (m: (typeof all)[number]): MediaCard => ({
    slug: m.slug,
    title: m.title,
    category: m.category,
    dateLabel: formatMediaDate(m.date),
    location: m.location,
    excerpt: m.excerpt,
    image: m.cover,
  });

  return (
    <section
      className="relative scroll-mt-24 py-24 sm:py-28"
      style={{
        backgroundImage:
          "radial-gradient(rgba(11, 31, 69, 0.40) 1.5px, transparent 1.5px)",
        backgroundSize: "28px 28px",
      }}
    >
      {/* Soft glow so content stays readable over the dot grid */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 z-0"
        style={{
          background:
            "radial-gradient(ellipse 70% 60% at center, rgba(238, 242, 248, 0.9) 0%, rgba(238, 242, 248, 0.55) 55%, transparent 100%)",
        }}
      />

      <div className="container-x relative">
        {/* Header */}
        <div className="max-w-2xl">
          <h1 className="mt-4 text-3xl font-extrabold leading-tight sm:text-4xl">
            Where we&apos;ve been, who we&apos;ve met.
          </h1>
          <div className="heading-rule" />
          <p className="mt-6 text-lg leading-relaxed text-navy-600">
            Photos and articles from meetings, demonstrations, and industry
            events where Oscar One teams presented, partnered, and flew.
          </p>
        </div>

        {/* Featured story, filters, article grid */}
        {all.length > 0 ? (
          <MediaGrid
            featured={featuredItem ? toCard(featuredItem) : null}
            items={rest.map(toCard)}
          />
        ) : (
          <p className="mt-14 text-center text-navy-500">
            No media stories yet — check back soon.
          </p>
        )}
      </div>
    </section>
  );
}