landing_page/refer_landing_page/app/standardization/page.tsx

"use client";

import React, { useEffect, useState } from "react";
import { getStandardsBodies } from "../../lib/api";
import type { StandardsBody } from "../../content/types";

export default function StandardizationPage() {
  const [standardsBodies, setStandardsBodies] = useState<StandardsBody[]>([]);

  useEffect(() => {
    getStandardsBodies().then((sb) => {
      if (sb) setStandardsBodies(sb);
    });
  }, []);
  return (
    <div className="container-content py-8 sm:py-12 space-y-10 sm:space-y-14">
      {/* Page Header */}
      <section>
        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink tracking-tight">
          International Standardization
        </h1>
      </section>

      {/* Standards Bodies Section */}
      <section className="space-y-8 sm:space-y-10 pt-6 md:pt-8 border-t border-line">
        {standardsBodies.map((body, idx) => (
          <div key={idx} className="bg-paper p-6 sm:p-8 rounded-lg border border-line space-y-6 shadow-sm">
            <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-cobalt-dark font-bold uppercase">
                    [{body.scope}]
                  </span>
                  {body.role && (
                    <span className="bg-vermillion-dark 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-dark 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-dark text-ivory"
                                  : "bg-cobalt-dark 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">
                      Project specification in progress
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}
      </section>
    </div>
  );
}