import React from "react";
import HeroComposition from "./_components/HeroComposition";
import { DirectionsBlock } from "./_components/DirectionsBlock";
import { ProjectPageView } from "./_components/ProjectPageView";
import { publications, patents } from "../content/publications";

const PILLARS = [
  {
    no: "01",
    en: "Extensibility & Protocol",
    ko: "AI Agent 기능 확장 프로토콜",
    theme: "vermillion" as const,
    topics: [
      "Model Context Protocol (MCP) 서버/클라이언트 아키텍처",
      "SKILL 도구 캡슐화 및 재사용 패키징",
      "CLI 에이전트 인터페이스 제어 및 웹 가동 제어",
    ],
    desc: "에이전트가 외부 도구 및 시스템과 표준화된 방식으로 연동할 수 있도록 MCP와 SKILL 패키징 기술을 개발합니다.",
  },
  {
    no: "02",
    en: "Multi-Agent Systems",
    ko: "멀티 에이전트 협업 및 오케스트레이션",
    theme: "cobalt" as const,
    topics: [
      "HERDR 백그라운드 프로세스 컨테이너 격리 제어",
      "crewAI 기반 역할 분담 및 태스크 위임 체계",
      "LangGraph 순환 상태 그래프 기반 워크플로우 제어",
    ],
    desc: "다중 에이전트 환경에서 독립적인 역할 분담과 선순환 오케스트레이션을 보장하는 자율 협업 플랫폼을 연구합니다.",
  },
  {
    no: "03",
    en: "Interoperability Standards",
    ko: "에이전트 상호운용성 개방형 표준",
    theme: "vermillion" as const,
    topics: [
      "Agent-to-Agent (A2A) 프로토콜 규격 정의 및 검증",
      "Agent Communication Protocol (ACP) 메시지 교환 규격",
      "Agent Card (/.well-known/agent-card.json) 메타데이터 검증",
    ],
    desc: "서로 다른 프레임워크 기반의 에이전트 간의 상호운용성을 보장하는 국제 표준 개방형 통신 프로토콜을 구현합니다.",
  },
  {
    no: "04",
    en: "High-Performance Backbone",
    ko: "AIoT & 고성능 통신 백본",
    theme: "cobalt" as const,
    topics: [
      "gRPC / QUIC 양방향 스트리밍 에이전트 백본 통신",
      "Protocol Buffers (Protobuf) 직렬화 통신 최적화",
      "MQTT / CoAP 엣지 메시 통신망 통합",
    ],
    desc: "초저지연 양방향 스트리밍 통신 인프라를 바탕으로 고성능 에이전트 백본 네트워크를 설계하고 실증합니다.",
  },
];

export default function HomePage() {
  const pubCount = publications.length + patents.length;

  return (
    <div className="container-content space-y-32 md:space-y-48 py-16 md:py-28">
      {/* Hero Section */}
      <section className="relative">
        <div className="mb-4 -mt-6 md:-mt-12">
          <span className="font-mono text-xs tracking-widest uppercase text-vermillion font-bold">
            Kyungpook National University · AI Agent Networking Lab (ANL)
          </span>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:items-center">
          <div className="lg:col-span-7 space-y-6 lg:pt-4">
            <h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-normal text-ink leading-tight">
              멀티 에이전트 <br />
              <span className="italic font-serif text-vermillion">오케스트레이션</span>
            </h1>
            <p className="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl">
              AI 에이전트 네트워크 연구실(ANL)은 멀티 AI 에이전트 오케스트레이션을 위해 서로 소통하고 협력하는 에이전트 네트워킹 기술과 표준 프레임워크 기술을 연구합니다.
            </p>

            {/* Metrics Row (Derived from data array, AC-13) */}
            <div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
              <div>
                <div className="font-serif text-3xl text-vermillion font-normal">
                  {PILLARS.length}
                </div>
                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
                  Research Areas
                </div>
              </div>
              <div>
                <div className="font-serif text-3xl text-cobalt font-normal">
                  220+
                </div>
                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
                  Publications
                </div>
              </div>
              <div>
                <div className="font-serif text-3xl text-ink font-normal">
                  2026
                </div>
                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
                  Issue Static
                </div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
            <HeroComposition />
          </div>
        </div>
      </section>

      {/* Research Project PageView Component */}
      <ProjectPageView />

      {/* Core Research Areas Grid */}
      <section className="space-y-8 pt-20 md:pt-28 border-t border-line">
        <div className="flex justify-between items-end">
          <div>
            <div className="font-mono text-xs text-vermillion uppercase tracking-widest font-bold">
              Research Areas
            </div>
            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
              핵심 연구 분야
            </h2>
          </div>
          <div className="font-mono text-xs text-ink-mute">
            Magazine Layout 01–04
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
          {PILLARS.map((pillar) => {
            const isVermillion = pillar.theme === "vermillion";

            return (
              <div
                key={pillar.no}
                className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200"
              >
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span
                      className={`font-mono text-sm font-bold ${
                        isVermillion ? "text-vermillion" : "text-cobalt"
                      }`}
                    >
                      [{pillar.no}]
                    </span>
                    <span className="font-mono text-xs text-ink-mute uppercase">
                      {pillar.en}
                    </span>
                  </div>

                  <h3 className="font-serif text-xl font-normal text-ink">
                    {pillar.ko}
                  </h3>

                  <p className="text-xs text-ink-mute leading-relaxed">
                    {pillar.desc}
                  </p>

                  <ul className="space-y-2 pt-2">
                    {pillar.topics.map((topic, tIdx) => (
                      <li
                        key={tIdx}
                        className="text-xs text-ink flex items-start gap-2"
                      >
                        <span
                          className={`inline-block w-1.5 h-1.5 rounded-full mt-1 ${
                            isVermillion ? "bg-vermillion" : "bg-cobalt"
                          }`}
                        ></span>
                        <span>{topic}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div className="mt-6 pt-4 border-t border-line/60 flex justify-between items-center text-xs font-mono text-ink-mute">
                  <span>ANL Core Spec</span>
                  <span
                    className={
                      isVermillion ? "text-vermillion" : "text-cobalt"
                    }
                  >
                    Pillar #{pillar.no}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Directions Block */}
      <DirectionsBlock />
    </div>
  );
}