PLOT. 제작 상품 바로가기 칩 5개

/** 56x56 칸 안의 작은 그림: 제작물마다 연한 블루 바탕 위에 모양 하나 */
function Thumb({ kind }: { kind: "card" | "web" | "profile" | "id" | "package" }) {
  return (
    <span aria-hidden className="relative grid size-14 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#EBF2FF]">
      {kind === "card" && (
        <span className="relative h-6 w-10 -rotate-6 rounded-[3px] bg-white shadow-[0_3px_8px_rgba(2,10,34,0.15)]">
          <span className="absolute top-0 right-0 h-full w-2 rounded-r-[3px] bg-[#0055FF]" />
          <span className="absolute top-1.5 left-1.5 h-1 w-4 rounded-full bg-[#020A22]" />
          <span className="absolute bottom-1.5 left-1.5 h-0.5 w-3 rounded-full bg-[#8B95A1]" />
        </span>
      )}
      {kind === "web" && (
        <span className="h-8 w-10 overflow-hidden rounded-[4px] bg-white shadow-[0_3px_8px_rgba(2,10,34,0.15)]">
          <span className="flex gap-0.5 bg-[#E6E9EF] px-1 py-0.5">
            <span className="size-1 rounded-full bg-[#0055FF]" />
            <span className="size-1 rounded-full bg-[#8B95A1]" />
          </span>
          <span className="mx-1 mt-1 block h-1 w-5 rounded-full bg-[#020A22]" />
          <span className="mx-1 mt-1 block h-2 w-3 rounded-sm bg-[#0055FF]" />
        </span>
      )}
      {kind === "profile" && (
        <span className="relative h-10 w-8 rotate-6 rounded-[3px] bg-[#0055FF] shadow-[0_3px_8px_rgba(2,10,34,0.2)]">
          <span className="absolute top-1.5 left-1.5 size-2 rounded-[2px] bg-white" />
          <span className="absolute bottom-2 left-1.5 h-1 w-4 rounded-full bg-white/80" />
        </span>
      )}
      {kind === "id" && (
        <span className="relative h-10 w-7 overflow-hidden rounded-[4px] bg-white shadow-[0_3px_8px_rgba(2,10,34,0.15)]">
          <span className="block h-3 bg-[#0055FF]" />
          <span className="absolute top-1.5 left-1/2 size-3.5 -translate-x-1/2 rounded-full bg-[#EBF2FF] ring-2 ring-white" />
          <span className="mx-auto mt-3 block h-1 w-4 rounded-full bg-[#020A22]" />
        </span>
      )}
      {kind === "package" && <span className="text-[22px] font-black tracking-[-0.04em] text-[#0055FF]">%</span>}
    </span>
  );
}

const LINKS = [
  { label: "명함", href: "#showcase", kind: "card" },
  { label: "홈페이지", href: "#showcase", kind: "web" },
  { label: "사업소개서", href: "#showcase", kind: "profile" },
  { label: "사원증", href: "#showcase", kind: "id" },
  { label: "패키지 할인", href: "#pricing", kind: "package" },
] as const;

/** PLOT. 제작 상품 바로가기: 이름과 작은 그림이 든 둥근 칸 5개. 모바일 2열(마지막 칸은 한 줄 전체), 데스크톱 5열. */
export default function QuickLinks() {
  return (
    <section className="w-full bg-white px-5 py-6 text-[#020A22]">
      <div className="mx-auto grid max-w-6xl grid-cols-2 gap-3 md:grid-cols-5">
        {LINKS.map((q, i) => (
          <a
            key={q.label}
            href={q.href}
            className={`flex items-center justify-between gap-3 rounded-2xl px-6 py-4 text-[17px] font-semibold ring-1 ring-black/10 transition hover:ring-[#020A22] ${
              i === LINKS.length - 1 ? "col-span-2 md:col-span-1" : ""
            }`}
          >
            {q.label}
            <Thumb kind={q.kind} />
          </a>
        ))}
      </div>
    </section>
  );
}