import type { Metadata } from "next";
import PageHeader from "@/components/PageHeader";
import Reveal from "@/components/Reveal";
import SectionLabel from "@/components/SectionLabel";

export const metadata: Metadata = {
  title: "강의 (Lectures)",
  description: "AI 에이전트 네트워크 연구실 (ANL) 지도교수가 담당하는 강의 목록 (placeholder).",
};

// CUSTOMIZATION HOOK: replace placeholder lectures below.
const lectures = [
  {
    code: "CSE3xx",
    ko: "사물인터넷 개론",
    en: "Introduction to IoT",
    level: "학부 · Undergraduate",
    accent: "vermillion" as const,
    desc: "IoT 아키텍처, 센서·액추에이터, 통신 프로토콜(MQTT/CoAP)과 oneM2M 표준의 기본 개념을 다룹니다. 간단한 디바이스–서버 연동 실습을 포함합니다.",
  },
  {
    code: "CSE4xx",
    ko: "네트워크 프로토콜과 전송 기술",
    en: "Network Protocols & Transport",
    level: "학부/대학원 · Undergraduate / Graduate",
    accent: "cobalt" as const,
    desc: "TCP/UDP에서 QUIC까지 전송 계층의 발전과 설계 원리를 학습합니다. 스트림 다중화, 연결 마이그레이션, 혼잡 제어를 실험을 통해 분석합니다.",
  },
  {
    code: "CSE6xx",
    ko: "메타버스 상호운용성과 표준",
    en: "Metaverse Interoperability & Standards",
    level: "대학원 · Graduate",
    accent: "ink" as const,
    desc: "이종 메타버스 플랫폼 간 데이터 모델, 의미 보존 변환, W3C/oneM2M 표준을 다루는 세미나형 대학원 강의입니다. 최신 논문 리뷰와 프로젝트를 병행합니다.",
  },
];

const accent: Record<string, { hover: string; text: string }> = {
  vermillion: { hover: "hover:bg-vermillion hover:text-ivory", text: "text-vermillion" },
  cobalt: { hover: "hover:bg-cobalt hover:text-ivory", text: "text-cobalt" },
  ink: { hover: "hover:bg-ink hover:text-ivory", text: "text-ink" },
};

export default function LecturesPage() {
  return (
    <>
      <PageHeader
        ko="강의"
        en="Lectures"
        index={4}
        description="연구실에서 담당하는 학부·대학원 강의입니다. 아래 강의 정보는 예시(placeholder)이며 실제 개설 과목으로 교체할 수 있습니다."
      />

      <section>
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={1} label="Courses" />
          </Reveal>

          <div className="mt-12 grid gap-px bg-line lg:grid-cols-3">
            {lectures.map((l, i) => {
              const a = accent[l.accent];
              return (
                <Reveal
                  key={l.code}
                  variant={i === 0 ? "left" : i === 2 ? "right" : "up"}
                  delay={i * 100}
                  className="bg-ivory"
                >
                  <article
                    className={`group flex h-full flex-col border border-ink p-8 transition-colors duration-500 sm:p-10 ${a.hover}`}
                  >
                    <div className="flex items-baseline justify-between">
                      <span className={`font-display text-xl ${a.text} group-hover:text-ivory`}>
                        {l.code}
                      </span>
                      <span className="font-display text-4xl text-ink-mute group-hover:text-ivory/70">
                        {String(i + 1).padStart(2, "0")}
                      </span>
                    </div>

                    <h3 className="headline-ko mt-6 text-2xl leading-tight">{l.ko}</h3>
                    <p className="font-display mt-1 text-lg italic opacity-70">{l.en}</p>

                    <p className={`mt-4 inline-flex w-fit border border-ink/30 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] group-hover:border-ivory/40`}>
                      {l.level}
                    </p>

                    <p className="mt-6 border-t border-ink/20 pt-6 text-sm leading-relaxed opacity-90 group-hover:border-ivory/20">
                      {l.desc}
                    </p>
                  </article>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}