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:
    "메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 오케스트레이션을 연구하는 경북대학교 사물인터넷 표준 연구실 소개.",
};

// CUSTOMIZATION HOOK: the two research thrusts (cover spread comparison).
const thrusts = [
  {
    no: "Thrust 01",
    tag: "MCM",
    accent: "vermillion" as const,
    ko: "메타버스 상호운용성",
    en: "Metaverse Interoperability",
    desc: "이종(異種) 메타버스 플랫폼 간 객체·아바타·자산의 상호운용을 위한 공통 데이터 모델과 변환 계층을 설계합니다. oneM2M / W3C 표준을 기반으로 서로 다른 가상 환경이 동일한 의미(semantics)로 데이터를 교환합니다.",
    points: [
      "공통 정보 모델(Common Information Model) 정의",
      "의미 보존 변환(semantic-preserving mapping) 계층",
      "상호운용성 테스트베드 및 적합성 검증",
    ],
  },
  {
    no: "Thrust 02",
    tag: "QUIC",
    accent: "cobalt" as const,
    ko: "멀티에이전트 오케스트레이션",
    en: "Multi-Agent Orchestration",
    desc: "다수의 자율 에이전트가 저지연·다중스트림 환경에서 협력하도록 QUIC 전송 위에 오케스트레이션 아키텍처와 통신 인터페이스를 설계합니다. 연결 마이그레이션과 스트림 다중화로 메시지 라우팅을 최적화합니다.",
    points: [
      "QUIC 스트림 다중화 기반 에이전트 메시지 라우팅",
      "오케스트레이터–에이전트 제어 인터페이스 설계",
      "연결 마이그레이션 기반 모바일·엣지 지원",
    ],
  },
];

// CUSTOMIZATION HOOK: headline figures (animated counters).
// `value: 2026` is marked static so it renders as a fixed year, not a
// 0→2026 count-up. The year is also rendered at the smaller `display-sm`
// scale (the other two figures use the full `display` scale), so the
// 4-digit "2026" does not push the cell padding. See LAYOUT_AUDIT #11 + #13.
const figures = [
  { value: 2, label: "연구 축 · Research Thrusts", suffix: "", size: "display" as const, static: false },
  { value: 4, label: "표준화 기구 · Standards Bodies", 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 = [
  "INTEROPERABILITY",
  "oneM2M",
  "W3C WoT",
  "QUIC TRANSPORT",
  "MULTI-AGENT",
  "STREAM MULTIPLEXING",
  "CONNECTION MIGRATION",
  "METAVERSE",
  "SEMANTIC MAPPING",
  "CONFORMANCE",
];

const focusAreas = [
  { ko: "사물인터넷 표준화", en: "IoT Standardization" },
  { ko: "메타버스 상호운용성", en: "Metaverse Interoperability" },
  { ko: "전송 프로토콜(QUIC)", en: "Transport Protocols" },
  { ko: "멀티에이전트 시스템", en: "Multi-Agent Systems" },
];

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-center gap-10 lg:grid-cols-12">
            {/* Headline column */}
            <div className="lg:col-span-7">
              <Reveal delay={60}>
                <p className="kicker">경북대학교 컴퓨터학부 · IoT Standards Lab</p>
              </Reveal>
              <Reveal delay={120}>
                {/* Korean + English mixed, magazine-cover scale */}
                <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>
                  Standards
                  <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">
                  메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 오케스트레이션.
                  국제 표준을 토대로 분산되고 이종적인 시스템이 동일한 의미로
                  데이터를 교환하고 협력하도록 설계합니다.
                </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 — MCM 노드 메시 × QUIC 멀티스트림
              </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 */}
              † 본 연구실은 사물인터넷 국제 표준을 토대로, 분산·이종 시스템이
              동일한 의미로 데이터를 교환하고 협력할 수 있는 상호운용 기술을 연구합니다.
            </p>
          </Reveal>
        </div>
      </section>

      {/* ============ TWO THRUSTS — SIDE BY SIDE WITH CONNECTING LINE ============ */}
      <section className="border-b border-ink">
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={3} label="Two Research Thrusts" />
          </Reveal>

          <div className="relative mt-12 grid gap-px lg:grid-cols-2">
            {/* Connecting line + node between the two thrusts (desktop) */}
            <div
              aria-hidden
              className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:block"
            >
              <div className="flex items-center">
                <span className="h-2 w-2 rounded-full bg-vermillion" />
                <span className="h-px w-16 bg-ink" />
                <span className="flex h-9 w-9 items-center justify-center rounded-full border border-ink bg-ivory font-display text-xs">
                  ×
                </span>
                <span className="h-px w-16 bg-ink" />
                <span className="h-2 w-2 rounded-full bg-cobalt" />
              </div>
            </div>

            {thrusts.map((t, i) => {
              const isVerm = t.accent === "vermillion";
              return (
                <Reveal
                  key={t.tag}
                  variant={i === 0 ? "left" : "right"}
                  delay={i * 120}
                >
                  <article
                    className={`group h-full 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 className="flex items-baseline justify-between">
                      <span className="kicker group-hover:text-ivory/70">{t.no}</span>
                      <span
                        className={`font-display text-5xl ${
                          isVerm ? "text-vermillion" : "text-cobalt"
                        } group-hover:text-ivory`}
                      >
                        {t.tag}
                      </span>
                    </div>
                    <h3 className="headline-ko mt-6 text-3xl leading-tight">
                      {t.ko}
                    </h3>
                    <p className="font-display mt-1 text-lg italic opacity-70">
                      {t.en}
                    </p>
                    <p className="mt-5 text-sm leading-relaxed opacity-90">
                      {t.desc}
                    </p>
                    <ul className="mt-6 space-y-3 text-sm">
                      {t.points.map((p) => (
                        <li key={p} 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>{p}</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>
    </>
  );
}