import type { Metadata } from "next";
import Link from "next/link";
import { getAllPosts } from "@/lib/posts";

export const metadata: Metadata = {
  title: "Research and Blogs",
  description:
    "Field notes, engineering insights, and mission debriefs from the Oscar One team.",
};

function formatDate(iso: string): string {
  if (!iso) return "";
  const d = new Date(iso + "T00:00:00");
  return d.toLocaleDateString("en-MY", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

export default function ResearchAndBlogs() {
  const posts = getAllPosts();

  return (
    <section
      className="relative py-24 sm:py-28"
      style={{
        backgroundImage:
          "linear-gradient(to right, rgba(11, 31, 69, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(11, 31, 69, 0.15) 1px, transparent 1px)",
        backgroundSize: "40px 40px",
      }}
    >
      {/* Soft white glow so content stays readable over the grid */}
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse 60% 50% at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 55%, transparent 100%)",
        }}
      />
      <div className="container-x relative">
        {/* Header — matches section pattern */}
        <div className="max-w-2xl">
          <p className="eyebrow">Research &amp; Blogs</p>
          <h2 className="mt-4 text-3xl font-extrabold leading-tight sm:text-4xl">
            Notes from the field and the workshop.
          </h2>
          <div className="heading-rule" />
          <p className="mt-6 text-lg leading-relaxed text-navy-600">
            Field notes, engineering insights, and mission debriefs from the
            Oscar One team — survey, inspection, surveillance, and logistics.
          </p>
        </div>

        {/* Post grid — Portfolio-style cards */}
        {posts.length > 0 ? (
          <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {posts.map((post) => (
              <Link
                key={post.slug}
                href={`/researchandblogs/${post.slug}/`}
                className="group flex flex-col overflow-hidden rounded-xl border border-navy-100 bg-white shadow-card transition-all duration-300 hover:-translate-y-2 hover:border-gold hover:shadow-cardHover"
              >
                {/* Cover or gradient fallback */}
                <div className="relative aspect-[16/10] overflow-hidden bg-gradient-to-br from-navy-800 to-navy-950">
                  {post.cover ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={post.cover}
                      alt={post.title}
                      className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
                    />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center">
                      <span className="select-none text-5xl font-extrabold tracking-tightest text-gold/25">
                        O1
                      </span>
                    </div>
                  )}
                </div>

                {/* Body */}
                <div className="flex flex-1 flex-col p-6">
                  {/* Updated Pill Labels */}
                  <div className="flex flex-wrap items-center gap-2">
                    {post.tags.map((tag) => (
                      <span
                        key={tag}
                        className="inline-flex items-center rounded-full border border-navy-200 bg-white px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-widest text-navy-600 shadow-sm transition-colors group-hover:border-gold/40 group-hover:text-gold-700"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                  
                  <h3 className="mt-4 text-lg font-bold text-navy transition-colors group-hover:text-gold-600">
                    {post.title}
                  </h3>
                  <p className="mt-2 flex-1 text-sm leading-relaxed text-navy-500">
                    {post.excerpt}
                  </p>
                  <p className="mt-4 text-xs font-semibold uppercase tracking-wider text-navy-400">
                    {formatDate(post.date)} · {post.author}
                  </p>
                </div>
              </Link>
            ))}
          </div>
        ) : (
          <p className="mt-14 text-center text-navy-500">
            No posts yet — check back soon.
          </p>
        )}
      </div>
    </section>
  );
}