import React from "react";
import { standardsBodies } from "../../content/standards";

export default function StandardizationPage() {
  const totalDocs = standardsBodies.reduce(
    (acc, body) =>
      acc + body.projects.reduce((pAcc, proj) => pAcc + proj.documents.length, 0),
    0
  );

  return (
    <div className="container-content space-y-32 md:space-y-48 py-16 md:py-28">
      {/* Header */}
      <section className="space-y-3">
        <div className="flex items-center gap-3">
          <span className="h-px w-8 bg-vermillion"></span>
          <span className="font-mono text-xs tracking-widest uppercase text-vermillion font-bold">
            Open Standards &amp; Contributions
          </span>
        </div>
        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink">
          표준화 연구 및 기여
        </h1>
        <p className="text-ink-mute text-base max-w-2xl">
          IEC TC100, ISO/IEC JTC1, ITU-T, TTA 등 국제/국내 표준화 기구를 통해 제정 및 진행 중인 {standardsBodies.length}개 기구 {totalDocs}건의 표준 규격 문서 계층 인벤토리입니다.
        </p>
      </section>

      {/* Standards Bodies Section */}
      <section className="space-y-12 pt-20 md:pt-28 border-t border-line">
        {standardsBodies.map((body, idx) => (
          <div key={idx} className="bg-paper p-8 rounded-lg border border-line space-y-6">
            <div className="flex flex-wrap justify-between items-start gap-4 border-b border-line pb-4">
              <div>
                <div className="flex items-center gap-2">
                  <span className="font-mono text-xs text-vermillion font-bold uppercase">
                    [{body.scope}]
                  </span>
                  {body.role && (
                    <span className="bg-vermillion text-ivory font-mono text-[0.65rem] px-2 py-0.5 rounded font-bold">
                      {body.role}
                    </span>
                  )}
                </div>
                <h2 className="font-serif text-2xl font-normal text-ink mt-1">
                  {body.org}
                </h2>
                <p className="text-xs text-ink-mute font-mono mt-0.5">
                  {body.full} ({body.period})
                </p>
              </div>

              <div className="font-mono text-xs text-ink-mute bg-ivory border border-line px-3 py-1.5 rounded">
                Projects: {body.projects.length}
              </div>
            </div>

            {/* 3-Tier Hierarchy: Projects & Documents */}
            <div className="space-y-6">
              {body.projects.map((proj, pIdx) => (
                <div key={pIdx} className="bg-ivory p-6 rounded border border-line space-y-3">
                  <div className="font-serif text-lg font-normal text-ink border-b border-line/60 pb-2 flex justify-between items-center">
                    <div>
                      <span className="font-mono text-xs text-cobalt font-bold mr-2">
                        {proj.wg}
                      </span>
                      <span>{proj.name}</span>
                    </div>
                    <span className="font-mono text-xs text-ink-mute">
                      {proj.documents.length} Docs
                    </span>
                  </div>

                  {proj.documents.length > 0 ? (
                    <div className="space-y-3 pt-1">
                      {proj.documents.map((doc, dIdx) => (
                        <div
                          key={dIdx}
                          className="bg-paper p-4 rounded border border-line/60 space-y-1.5"
                        >
                          <div className="flex justify-between items-start gap-4">
                            <h3 className="font-serif text-base font-normal text-ink leading-snug">
                              &ldquo;{doc.title}&rdquo;
                            </h3>
                            <span
                              className={`font-mono text-[0.65rem] px-2 py-0.5 rounded font-bold shrink-0 ${
                                doc.status === "InProgress"
                                  ? "bg-vermillion text-ivory"
                                  : "bg-cobalt text-ivory"
                              }`}
                            >
                              {doc.status}
                            </span>
                          </div>
                          <div className="font-mono text-xs text-ink-mute flex justify-between">
                            <span>{doc.ref}</span>
                            {doc.publishedAt && (
                              <span className="text-ink">{doc.publishedAt}</span>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-xs text-ink-mute font-mono italic">
                      진행 중인 주 프로젝트 규격서
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}
      </section>
    </div>
  );
}