landing_page/refer_landing_page/app/publications/page.tsx

import Link from "next/link";
import { CategoryNav } from "./_components/CategoryNav";
import { PUB_CATEGORIES } from "../../content/categories";
import { publications, patents } from "../../content/publications";

export const metadata = {
  title: "Publications Overview | ANL",
  description: "AI 에이전트 네트워크 연구실(ANL) 연구 실적 개요 및 카테고리별 집계",
};

export default function PublicationsIndexPage() {
  const totalPubCount = publications.length + patents.length;

  // Sort publication records by publishedAt descending to select top 10 highlights
  const top10Highlights = [...publications]
    .sort((a, b) => (b.publishedAt || "").localeCompare(a.publishedAt || ""))
    .slice(0, 10);

  const getCount = (slug: string) => {
    if (slug === "patent") return patents.length;
    return publications.filter((p) => p.category === slug).length;
  };

  return (
    <main className="container-content space-y-8 md:space-y-12 pt-10 md:pt-16 pb-16 md:pb-24">
      {/* Header section */}
      <section className="space-y-4">
        <div className="flex items-center gap-3">
          <span className="h-px w-8 bg-cobalt-dark dark:bg-cobalt" />
          <span className="font-mono text-xs font-bold uppercase tracking-widest text-cobalt-dark dark:text-cobalt">
            BIBLIOGRAPHY &amp; INTELLECTUAL PROPERTY
          </span>
        </div>
        <h1 className="headline-ko text-3xl sm:text-4xl text-ink font-bold">
          연구 실적 개요
        </h1>
        <p className="text-sm sm:text-base text-ink-mute max-w-3xl leading-relaxed">
          AI 에이전트 네트워크 연구실(ANL)의 학술 논문({publications.length}건)과 특허({patents.length}건)를 포함한 총 {totalPubCount}건의 연구 성과 집계 및 대표 실적 목록입니다.
        </p>
      </section>

      {/* Category Navigation */}
      <CategoryNav />

      {/* Category Summary Cards */}
      <section className="grid gap-6 md:grid-cols-3">
        {PUB_CATEGORIES.map((cat) => {
          const count = getCount(cat.slug);
          return (
            <div
              key={cat.slug}
              className="flex flex-col justify-between border border-line bg-paper p-6 rounded-lg transition-colors hover:border-cobalt-dark dark:hover:border-cobalt group"
            >
              <div className="space-y-3">
                <span className="font-mono text-xs text-ink-mute uppercase tracking-wider">
                  Category
                </span>
                <h2 className="headline-ko text-xl text-ink font-bold group-hover:text-cobalt-dark dark:group-hover:text-cobalt transition-colors">
                  {cat.label}
                </h2>
                <p className="text-xs text-ink-mute leading-relaxed">
                  {cat.desc}
                </p>
              </div>
              <div className="mt-6 pt-4 border-t border-line flex items-baseline justify-between">
                <span className="font-display text-3xl font-bold text-ink">
                  {count}
                  <span className="text-xs font-sans text-ink-mute ml-1 font-normal">건</span>
                </span>
                <Link
                  href={`/publications/${cat.slug}`}
                  className="inline-flex items-center text-xs font-bold text-vermillion hover:underline"
                >
                  전체 보기 &rarr;
                </Link>
              </div>
            </div>
          );
        })}
      </section>

      {/* Top 10 Highlights Section */}
      <section className="space-y-6 pt-6 border-t border-line">
        <div className="flex items-center justify-between">
          <h2 className="headline-ko text-2xl font-bold text-ink">
            최신 대표 실적 (Top 10 Highlights)
          </h2>
          <span className="font-mono text-xs text-ink-mute">
            RECENT HIGHLIGHTS
          </span>
        </div>

        <div className="divide-y divide-line border border-line bg-ivory rounded-lg overflow-hidden">
          {top10Highlights.map((pub, idx) => (
            <article key={`${pub.category}-${idx}`} className="p-5 hover:bg-paper/50 transition-colors space-y-2">
              <div className="flex flex-wrap items-center gap-2 text-xs font-mono text-ink-mute">
                <span className="px-2 py-0.5 rounded bg-paper border border-line text-ink font-bold">
                  {pub.publishedAt?.substring(0, 7) || "Recent"}
                </span>
                <span>·</span>
                <span className="capitalize">{pub.category.replace(/-/g, " ")}</span>
                {pub.doi && (
                  <>
                    <span>·</span>
                    <span className="text-vermillion">DOI: {pub.doi}</span>
                  </>
                )}
              </div>
              <h3 className="font-semibold text-base text-ink leading-snug">
                {pub.title}
              </h3>
              {pub.authors && (
                <p className="text-xs text-ink-mute">
                  {pub.authors}
                </p>
              )}
              {pub.venue && (
                <p className="text-xs italic text-ink-soft">
                  {pub.venue}
                </p>
              )}
            </article>
          ))}
        </div>
      </section>
    </main>
  );
}