import type { Metadata } from "next";
import Link from "next/link";
import Reveal from "@/components/Reveal";
import Marquee from "@/components/Marquee";
import Counter from "@/components/Counter";
import SectionLabel from "@/components/SectionLabel";
import HeroComposition from "./_components/HeroComposition";

export const metadata: Metadata = {
  title: "연구실 소개 (Intro)",
  description:
    "QUIC, gRPC, A2A 기반 에이전트 통신 및 멀티에이전트 오케스트레이션을 연구하는 경북대학교 AI 에이전트 네트워크 연구실 (ANL) 소개.",
};

// CUSTOMIZATION HOOK: the five research pillars (5 Pillars, Option A).
const pillars = [
  {
    no: "Pillar 01",
    tag: "Agent Eng",
    accent: "vermillion" as const,
    ko: "AI 에이전트 3대 핵심 엔지니어링",
    en: "Agent Core Engineering",
    desc: "프롬프트, 컨텍스트, 하네스 엔지니어링을 결합하여 대화 상태 보존, 외부 기억 바인딩, 도구 연동 인터페이스를 설계하고 자율 추론 경로를 최적화합니다.",
    points: [
      "역할 페르소나 및 Few-shot 최적화",
      "동적 컨텍스트 윈도우 & Memory 바인딩",
      "물리적 도구(Tool Use) 하네스 연결",
    ],
  },
  {
    no: "Pillar 02",
    tag: "MCP & SKILL",
    accent: "cobalt" as const,
    ko: "AI Agent 기능 확장 프로토콜",
    en: "Extensibility & Protocol",
    desc: "Anthropic MCP 통일 호환 규격 및 코드+스키마+Few-shot이 패키징된 SKILL 모듈을 통해 에이전트의 로컬/원격 역량을 자율적으로 동적 확장합니다.",
    points: [
      "MCP (Model Context Protocol) 통일 규격",
      "자율 확장 SKILL 모듈 패키징",
      "CLI 기반 자율 코딩 에이전트 제어",
    ],
  },
  {
    no: "Pillar 03",
    tag: "Orchestration",
    accent: "vermillion" as const,
    ko: "멀티 에이전트 협업 및 오케스트레이션",
    en: "Multi-Agent Systems",
    desc: "단일 에이전트의 환각과 컨텍스트 인지 한계를 극복하기 위해 역할 세분화(Role Specialization) 및 이종 모델 교차 검증과 오케스트레이션 인프라를 구축합니다.",
    points: [
      "HERDR 백그라운드 프로세스 컨테이너 격리",
      "crewAI 역할/목표 기반 크루 프로세스",
      "LangGraph 상태 보존형 순환 그래프 제어",
    ],
  },
  {
    no: "Pillar 04",
    tag: "A2A & ACP",
    accent: "cobalt" as const,
    ko: "에이전트 상호운용성 개방형 표준",
    en: "Interoperability Standards",
    desc: "Linux Foundation A2A 및 IBM ACP 오픈 표준 기반으로 이종 에이전트 간 서비스 발견, 태스크 위임, Agent Card 프로필 명세를 구현합니다.",
    points: [
      "A2A (Agent-to-Agent) 통신 오픈 표준",
      "ACP 서비스 발견 & 태스크 위임",
      "Agent Card (/.well-known/agent-card.json)",
    ],
  },
  {
    no: "Pillar 05",
    tag: "AIoT & gRPC",
    accent: "vermillion" as const,
    ko: "AIoT & 고성능 통신 백본",
    en: "High-Performance Backbone",
    desc: "스마트 팩토리/팜 엣지 자원 제약 환경에서 경량 프로토콜(MQTT/CoAP)과 HTTP/2·HTTP/3 gRPC/QUIC 양방향 스트리밍을 결합한 하이브리드 백본을 설계합니다.",
    points: [
      "gRPC & QUIC 양방향 스트리밍 메시징",
      "Protobuf 바이너리 직렬화 최적화",
      "MQTT-gRPC 하이브리드 엣지 메쉬",
    ],
  },
];

// CUSTOMIZATION HOOK: headline figures (animated counters).
// `value: 2026` is marked static so it renders as a fixed year, not a
// 0→2026 count-up, at the smaller `display-sm` scale so the 4-digit year
// does not push the cell padding. See LAYOUT_AUDIT #11 + #13.
const figures = [
  { value: pillars.length, label: "연구 기둥 · Research Pillars", suffix: "", size: "display" as const, static: false },
  { value: pillars.reduce((n, p) => n + p.points.length, 0), label: "세부 연구 주제 · Research Topics", suffix: "", size: "display" as const, static: false },
  { value: 2026, label: "Issue · 발행", suffix: "", size: "display-sm" as const, static: true },
];

// CUSTOMIZATION HOOK: research keyword ticker.
const keywords = [
  "A2A PROTOCOL",
  "MCP & SKILL",
  "HERDR PROCESS CONTAINER",
  "LANGGRAPH CYCLIC GRAPH",
  "QUIC & GRPC STREAMING",
  "MULTI-AGENT ORCHESTRATION",
  "AIOT EDGE CONTROL",
  "AGENT CARD SPEC",
];

const focusAreas = [
  { ko: "에이전트 통신 프로토콜 (A2A)", en: "A2A & ACP Protocols" },
  { ko: "멀티에이전트 오케스트레이션", en: "Multi-Agent Orchestration" },
  { ko: "MCP & SKILL 기능 확장", en: "MCP & SKILL Engineering" },
  { ko: "AIoT & gRPC/QUIC 백본", en: "AIoT & gRPC/QUIC Backbone" },
];

export default function IntroPage() {
  return (
    <>
      {/* ============ COVER SPREAD ============ */}
      <section className="relative overflow-hidden border-b border-ink">
        <div className="container-content pb-10 pt-12 sm:pt-16">
          <Reveal>
            <SectionLabel index={1} label="The Cover" />
          </Reveal>

          <div className="mt-8 grid items-start gap-10 lg:grid-cols-12">
            {/* Title & Masthead column */}
            <div className="lg:col-span-7">
              <Reveal delay={100}>
                <p className="kicker">경북대학교 컴퓨터학부 · AI Agent Networking Lab (ANL)</p>
                <h1 className="headline-ko mt-4 text-[clamp(2.5rem,8vw,5.5rem)] leading-[0.98] text-ink">
                  에이전트 네트워크의
                  <br />
                  <span className="text-vermillion">미래</span>를 짓다
                </h1>
                <p className="display mt-3 leading-[0.9]" aria-hidden>
                  Agents
                  <span className="block italic text-cobalt">in&nbsp;Motion</span>
                </p>
              </Reveal>
              <Reveal delay={200}>
                <p className="mt-8 max-w-prose text-base leading-relaxed text-ink-soft">
                  A2A·ACP 기반 에이전트 통신 프로토콜과 HERDR·LangGraph 멀티에이전트
                  오케스트레이션. 개방형 표준을 토대로 분산되고 이종적인 에이전트가
                  자율적으로 협력하고 고속으로 메시지를 교환하도록 설계합니다.
                </p>
              </Reveal>
              <Reveal delay={260}>
                <div className="mt-8 flex flex-wrap gap-3">
                  <Link
                    href="/publications"
                    className="bg-ink px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-ivory transition hover:bg-vermillion"
                  >
                    논문 보기 →
                  </Link>
                  <Link
                    href="/members"
                    className="border border-ink px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-ink transition hover:bg-ink hover:text-ivory"
                  >
                    구성원
                  </Link>
                </div>
              </Reveal>
            </div>

            {/* Abstract illustration column */}
            <Reveal variant="scale" delay={200} className="lg:col-span-5">
              <HeroComposition className="w-full" />
              <p className="mt-3 text-right text-xs italic text-ink-mute">
                Fig. 01 — A2A 에이전트 메시 × QUIC/gRPC 멀티스트림
              </p>
            </Reveal>
          </div>
        </div>

        {/* Keyword marquee band */}
        <Reveal>
          <Marquee
            items={keywords}
            className="border-y border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
          />
        </Reveal>
      </section>

      {/* ============ FIGURES / COUNTERS ============ */}
      <section className="border-b border-ink">
        <div className="container-content grid gap-px bg-line sm:grid-cols-3">
          {figures.map((f, i) => (
            <Reveal key={f.label} delay={i * 100} className="bg-ivory">
              <div className="px-6 py-10">
                <Counter
                  value={f.value}
                  suffix={f.suffix}
                  static={f.static}
                  className={`${f.size} block text-ink`}
                />
                <p className="kicker mt-3">{f.label}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ MISSION / PULL QUOTE ============ */}
      <section className="border-b border-ink">
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={2} label="Mission" />
          </Reveal>
          <Reveal delay={100}>
            <blockquote className="pull-quote mt-10 max-w-4xl text-ink">
              “표준 적합성과 실증을 함께 추구하여, 연구가{" "}
              <span className="text-vermillion">실제 표준 문서</span>와{" "}
              <span className="text-cobalt">오픈소스 구현</span>으로 이어지게 한다.”
            </blockquote>
          </Reveal>
          <Reveal delay={160}>
            <p className="mt-6 max-w-prose text-sm leading-relaxed text-ink-mute">
              {/* CUSTOMIZATION HOOK: marginalia / footnote */}
              † 본 연구실은 차세대 에이전트 통신 프로토콜(A2A/ACP)과 멀티에이전트 오케스트레이션(HERDR/LangGraph) 기술을 토대로, 분산·이종 에이전트가
              자율적으로 협력하고 고속으로 메시지를 교환할 수 있는 네트워크 인프라를 연구합니다.
            </p>
          </Reveal>
        </div>
      </section>

      {/* ============ FIVE RESEARCH PILLARS ============ */}
      <section className="border-b border-ink">
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={3} label="Five Research Pillars" />
          </Reveal>

          <div className="mt-12 grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-6">
            {pillars.map((p, i) => {
              const isVerm = p.accent === "vermillion";
              const span = `${i < 3 ? "lg:col-span-2" : "lg:col-span-3"}${i === 4 ? " sm:col-span-2" : ""}`;
              return (
                <Reveal
                  key={p.tag}
                  variant={i % 2 === 0 ? "left" : "right"}
                  delay={i * 80}
                  className={`bg-ivory ${span}`}
                >
                  <article
                    className={`group flex h-full flex-col justify-between border border-ink p-8 transition-colors duration-500 sm:p-10 ${
                      isVerm
                        ? "hover:bg-vermillion hover:text-ivory"
                        : "hover:bg-cobalt hover:text-ivory"
                    }`}
                  >
                    <div>
                      <div className="flex items-baseline justify-between">
                        <span className="kicker group-hover:text-ivory/70">{p.no}</span>
                        <span
                          className={`font-display text-2xl ${
                            isVerm ? "text-vermillion" : "text-cobalt"
                          } group-hover:text-ivory`}
                        >
                          {p.tag}
                        </span>
                      </div>
                      <h3 className="headline-ko mt-6 text-2xl leading-tight">
                        {p.ko}
                      </h3>
                      <p className="font-display mt-1 text-base italic opacity-70">
                        {p.en}
                      </p>
                      <p className="mt-5 text-sm leading-relaxed opacity-90">
                        {p.desc}
                      </p>
                    </div>
                    <ul className="mt-6 space-y-3 text-sm">
                      {p.points.map((pt) => (
                        <li key={pt} className="flex gap-3 border-t border-ink/20 pt-3 group-hover:border-ivory/20">
                          <span className="font-display text-xs opacity-60">→</span>
                          <span>{pt}</span>
                        </li>
                      ))}
                    </ul>
                  </article>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      {/* ============ FOCUS AREAS ============ */}
      <section>
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={4} label="Focus Areas" />
          </Reveal>
          <div className="mt-10 grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-4">
            {focusAreas.map((f, i) => (
              <Reveal key={f.en} delay={i * 80} className="bg-ivory">
                <div className="group flex h-full flex-col justify-between gap-8 p-7 transition-colors duration-500 hover:bg-ink hover:text-ivory">
                  <span className="font-display text-2xl text-ink-mute group-hover:text-vermillion">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <p className="headline-ko text-lg">{f.ko}</p>
                    <p className="mt-1 text-xs uppercase tracking-[0.16em] text-ink-mute group-hover:text-ivory/60">
                      {f.en}
                    </p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}