PLOT. 둥근 잉크색 판과 대형 워드마크 푸터

/** PLOT. 워드마크(흰색, 마침표는 블루) */
function Wordmark({ className = "" }: { className?: string }) {
  return (
    <svg viewBox="159 428 718 164" className={className} role="img" aria-label="PLOT.">
      <path
        fill="#FFFFFF"
        fillRule="evenodd"
        d="M178.5 430.5H263A46.5 46.5 0 0 1 263 523.5H197A7 7 0 0 0 190 530.5V578.5A11.5 11.5 0 0 1 167 578.5V531A30.5 30.5 0 0 1 197.5 500.5H263A23.5 23.5 0 0 0 263 453.5H178.5A11.5 11.5 0 0 1 178.5 430.5ZM354.5 442A11.5 11.5 0 0 1 377.5 442V548.5A18 18 0 0 0 395.5 566.5H469.5A11.5 11.5 0 0 1 469.5 589.5H395.5A41 41 0 0 1 354.5 548.5ZM505 509.5a81.5 81.5 0 1 0 163 0a81.5 81.5 0 1 0 -163 0ZM528 509.5a58.5 58.5 0 1 0 117 0a58.5 58.5 0 1 0 -117 0ZM712.5 430.5H843.5A11.5 11.5 0 0 1 843.5 453.5H789.5V578A11.5 11.5 0 0 1 766.5 578V453.5H712.5A11.5 11.5 0 0 1 712.5 430.5Z"
      />
      <circle cx="851.5" cy="572.5" r="16.5" fill="#0055FF" />
    </svg>
  );
}

const COLUMNS = [
  { title: "제작 상품", links: [["명함", "#showcase"], ["홈페이지", "#showcase"], ["사업소개서", "#showcase"], ["사원증", "#showcase"]] },
  { title: "서비스", links: [["브랜드 키트", "#core"], ["인쇄 · 제작", "#core"], ["호스팅", "#core"]] },
  { title: "요금", links: [["패키지 요금", "#pricing"]] },
  { title: "고객지원", links: [["자주 묻는 질문", "#faq"], ["워크스페이스", "#"]] },
] as const;

/** PLOT. 푸터: 둥근 잉크색 판 안에 로고 · 문구 · 버튼, 링크 4열, 저작권, 맨 아래에 판 폭을 채우는 큰 워드마크(아래가 살짝 잘림) */
export default function Footer() {
  return (
    <footer className="w-full bg-white px-3 pb-3">
      <div className="mx-auto max-w-[1400px] overflow-hidden rounded-[32px] bg-[#020A22] px-6 pt-14 text-white md:px-16">
        <div className="mx-auto max-w-5xl">
          <div className="flex flex-col justify-between gap-8 md:flex-row md:items-end">
            <div>
              <a href="#" aria-label="PLOT 홈" className="block w-[112px]">
                <Wordmark className="h-auto w-full" />
              </a>
              <p className="mt-5 text-[26px] leading-snug font-bold tracking-[-0.03em] md:text-[30px]">
                지금 바로 만들어 보세요
                <br />
                브랜드 하나로, 필요한 것 전부
              </p>
            </div>
            <a href="#" className="rounded-2xl bg-white px-16 py-4 text-center font-bold text-[#020A22] transition-colors hover:bg-white/90">
              무료로 시작하기
            </a>
          </div>

          <div className="mt-14 grid grid-cols-2 gap-8 md:grid-cols-4">
            {COLUMNS.map((col) => (
              <div key={col.title}>
                <div className="text-xs font-semibold text-white/45">{col.title}</div>
                <ul className="mt-3 space-y-2.5 text-[14px] font-semibold">
                  {col.links.map(([label, href]) => (
                    <li key={label}>
                      <a href={href} className="transition-colors hover:text-white/70">
                        {label}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <p className="mt-14 text-xs text-white/45">&copy; 2026 PLOT. All rights reserved.</p>
        </div>

        <div aria-hidden className="mx-auto mt-10 -mb-[1.5%] w-full max-w-[1100px] select-none">
          <Wordmark className="h-auto w-full" />
        </div>
      </div>
    </footer>
  );
}