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

export const metadata: Metadata = {
  title: "표준화 활동 (Standardization)",
  description:
    "oneM2M, W3C WoT, IETF QUIC, OMA LwM2M 등 국제 표준화 기구에서의 연구실 기여 활동 (placeholder).",
};

// CUSTOMIZATION HOOK: replace placeholder standardization activities below.
const bodies = [
  {
    org: "oneM2M",
    full: "oneM2M Partnership Project",
    area: "IoT 서비스 계층 표준",
    accent: "vermillion" as const,
    contributions: [
      "메타버스 상호운용을 위한 공통 정보 모델(CIM) 기고 (placeholder)",
      "디바이스 상호운용성 적합성 테스트 케이스 제안",
    ],
  },
  {
    org: "W3C WoT",
    full: "W3C Web of Things",
    area: "Thing Description / 시맨틱",
    accent: "cobalt" as const,
    contributions: [
      "메타버스 자산의 Thing Description 매핑 프로파일 제안 (placeholder)",
      "의미 보존 변환 가이드라인 논의 참여",
    ],
  },
  {
    org: "IETF QUIC",
    full: "IETF QUIC Working Group",
    area: "전송 프로토콜",
    accent: "vermillion" as const,
    contributions: [
      "멀티에이전트 환경을 위한 스트림 우선순위 확장 검토 (placeholder)",
      "연결 마이그레이션 활용 사례 기여",
    ],
  },
  {
    org: "OMA LwM2M",
    full: "OMA SpecWorks Lightweight M2M",
    area: "경량 디바이스 관리",
    accent: "cobalt" as const,
    contributions: [
      "엣지 에이전트 디바이스 관리 객체 정의 제안 (placeholder)",
      "리소스 모델 상호운용성 검토",
    ],
  },
];

// CUSTOMIZATION HOOK: standards-body ticker.
const orgTicker = [
  "oneM2M",
  "W3C WoT",
  "IETF QUIC",
  "OMA LwM2M",
  "CONFORMANCE",
  "INTEROPERABILITY",
  "SEMANTIC MAPPING",
];

const totalContributions = bodies.reduce(
  (n, b) => n + b.contributions.length,
  0
);
const figures = [
  { value: bodies.length, label: "표준화 기구 · Standards Bodies" },
  { value: totalContributions, label: "기여 항목 · Contributions" },
  { value: 4, label: "기술 영역 · Technical Areas" },
];

const accentText: Record<string, string> = {
  vermillion: "text-vermillion",
  cobalt: "text-cobalt",
};
const accentDot: Record<string, string> = {
  vermillion: "bg-vermillion",
  cobalt: "bg-cobalt",
};

export default function StandardizationPage() {
  return (
    <>
      <PageHeader
        ko="표준화 활동"
        en="Standardization"
        index={5}
        description="국제 표준화 기구와 협력하여 연구 결과를 표준에 반영합니다. 아래 기여 내역은 예시(placeholder)이며 실제 활동으로 교체할 수 있습니다."
      />

      {/* Standards-body marquee band */}
      <Reveal>
        <Marquee
          items={orgTicker}
          className="border-b border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
        />
      </Reveal>

      {/* ============ FIGURES ============ */}
      <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} className="display block text-ink" />
                <p className="kicker mt-3">{f.label}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ CONTRIBUTIONS BY BODY ============ */}
      <section>
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={1} label="Contributions" />
          </Reveal>

          <div className="mt-12 grid gap-px bg-line sm:grid-cols-2">
            {bodies.map((b, i) => (
              <Reveal
                key={b.org}
                variant={i % 2 === 0 ? "left" : "right"}
                delay={(i % 2) * 100}
                className="bg-ivory"
              >
                <article className="group flex h-full flex-col border border-ink p-8 transition-colors duration-500 hover:bg-ink hover:text-ivory sm:p-10">
                  <div className="flex items-baseline justify-between gap-3">
                    <h3 className="headline-ko text-3xl">{b.org}</h3>
                    <span className="font-display text-4xl text-ink-mute group-hover:text-ivory/40">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                  </div>
                  <p className="font-display mt-1 text-sm italic opacity-70">{b.full}</p>

                  <p
                    className={`mt-4 inline-flex w-fit border px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] ${
                      b.accent === "vermillion"
                        ? "border-vermillion/40"
                        : "border-cobalt/40"
                    } ${accentText[b.accent]} group-hover:border-ivory/40 group-hover:text-ivory`}
                  >
                    {b.area}
                  </p>

                  <ul className="mt-6 space-y-4 border-t border-ink/20 pt-6 text-sm group-hover:border-ivory/20">
                    {b.contributions.map((c) => (
                      <li key={c} className="flex gap-3">
                        <span
                          aria-hidden
                          className={`mt-1.5 h-1.5 w-1.5 flex-none rounded-full ${accentDot[b.accent]} group-hover:bg-ivory`}
                        />
                        <span className="leading-relaxed opacity-90">{c}</span>
                      </li>
                    ))}
                  </ul>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}