PLOT. 한 곳에서 끝내는 세 가지 카드

import type { ReactNode } from "react";

function Card({ title, body, children }: { title: string; body: string; children: ReactNode }) {
  return (
    <div className="text-center">
      <div className="flex aspect-[11/10] items-center justify-center rounded-[28px] bg-[#F4F6FA] p-6">{children}</div>
      <h3 className="mt-6 text-[22px] font-bold tracking-[-0.03em]">{title}</h3>
      <p className="mt-1.5 text-[15px] break-keep text-[#020A22]/55">{body}</p>
    </div>
  );
}

/** 진단 입력 화면 그림: 흰 카드에 입력 칸 2줄과 버튼, 오른쪽 아래에 색 후보 카드가 겹친다 */
function DiagnosisArt() {
  return (
    <div aria-hidden className="relative w-full max-w-[260px]">
      <div className="rounded-2xl bg-white p-4 text-left shadow-[0_8px_24px_rgba(2,10,34,0.08)]">
        <div className="text-[11px] font-bold text-[#020A22]">지금 브랜드 알려 주기</div>
        <div className="mt-2 rounded-lg bg-[#F4F6FA] px-2.5 py-1.5 text-[10px] text-[#8B95A1]">로고, 홈페이지 주소</div>
        <div className="mt-1.5 rounded-lg bg-[#F4F6FA] px-2.5 py-1.5 text-[10px] text-[#8B95A1]">바꾸고 싶은 점</div>
        <div className="mt-2.5 inline-block rounded-full bg-[#020A22] px-3 py-1 text-[10px] font-bold text-white">CI 후보 만들기</div>
      </div>
      <div className="absolute -right-3 -bottom-5 rounded-xl bg-white p-2.5 shadow-[0_8px_24px_rgba(2,10,34,0.12)]">
        <div className="text-[9px] font-semibold text-[#4E5968]">후보 1</div>
        <div className="mt-1 flex gap-1">
          <span className="size-4 rounded bg-[#5B8CFF]" />
          <span className="size-4 rounded bg-[#0055FF]" />
          <span className="size-4 rounded bg-[#A9C2FF]" />
          <span className="size-4 rounded bg-[#020A22]" />
        </div>
      </div>
    </div>
  );
}

/** 운영 상태 그림: 사이트 주소와 상태 3줄(초록 점) */
function HostingArt() {
  const rows = ["SSL 인증서 정상", "매달 자동 결제", "배송 완료 알림"];
  return (
    <div aria-hidden className="w-full max-w-[240px] rounded-2xl bg-white p-4 text-left shadow-[0_8px_24px_rgba(2,10,34,0.08)]">
      <div className="flex items-center gap-1.5 text-[11px] font-bold text-[#020A22]">
        <span className="grid size-4 place-items-center rounded bg-[#0055FF] text-[8px] font-black text-white">P</span>
        plot.example
      </div>
      <ul className="mt-3 space-y-2">
        {rows.map((r) => (
          <li key={r} className="flex items-center justify-between rounded-lg bg-[#F4F6FA] px-2.5 py-1.5 text-[10px] text-[#4E5968]">
            {r}
            <span className="size-1.5 rounded-full bg-[#22C55E]" />
          </li>
        ))}
      </ul>
    </div>
  );
}

/** PLOT. 쉬운 세 가지: 가운데 2줄 제목 아래 연회색 그림 칸 + 제목 + 설명 카드 3개(모바일 1열, 데스크톱 3열) */
export default function EasySteps() {
  return (
    <section className="w-full bg-white px-5 pb-28 text-[#020A22]">
      <div className="mx-auto max-w-5xl">
        <h2 className="text-center text-[28px] leading-tight font-bold tracking-[-0.04em] break-keep md:text-[44px]">
          디자이너, 인쇄소 따로 찾지 않고
          <br />
          <span className="text-[#0055FF]">한 곳에서 끝낼 수 있어요</span>
        </h2>
        <div className="mt-14 grid gap-6 md:grid-cols-3">
          <Card title="지금 브랜드를 알려 주면" body="기존 로고, 홈페이지, 인쇄물을 보고 AI가 방향이 다른 새 CI 후보를 3개씩 제안해요">
            <DiagnosisArt />
          </Card>
          <Card title="0원으로 미리보기" body="CI 제안, 브랜드 팜플렛, 시안과 견적까지 무료로 확인하고 확정한 것만 결제해요">
            <div className="text-[120px] leading-none font-black tracking-[-0.06em]">
              0<span className="text-4xl tracking-normal">원</span>
            </div>
          </Card>
          <Card title="만들고 끝이 아니에요" body="인쇄물 배송부터 홈페이지 호스팅까지 이어서 관리해요">
            <HostingArt />
          </Card>
        </div>
      </div>
    </section>
  );
}