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

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

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

  return (
    <div className="space-y-16 py-6">
      {/* Hero Section */}
      <section className="relative">
        <div className="flex items-center gap-3 mb-4">
          <span className="h-px w-8 bg-vermillion"></span>
          <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 items-start">
          <div className="lg:col-span-7 space-y-6">
            <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)은 에이전트 엔지니어링, MCP/SKILL 아키텍처, 
              멀티 에이전트 오케스트레이션, A2A/ACP 개방형 표준, gRPC/QUIC 고성능 통신 백본의 
              5대 연구 기둥을 중심으로 지능형 자율 에이전트 네트워크를 연구합니다.
            </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">
                  Core Pillars
                </div>
              </div>
              <div>
                <div className="font-serif text-3xl text-cobalt font-normal">
                  {pubCount}
                </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>

      {/* 5 Pillars Magazine Spread Grid */}
      <section className="space-y-8 pt-8 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 Pillars
            </div>
            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
              5대 핵심 연구 기둥
            </h2>
          </div>
          <div className="font-mono text-xs text-ink-mute">
            Magazine Layout 01–05
          </div>
        </div>

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

            return (
              <div
                key={pillar.no}
                className={`${colSpan} 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>
  );
}