번호 배지와 픽토그램이 있는 4단계 이용 안내 카드

const STEPS = [
  { icon: "https://nnuer.site/media/AFUIASTFKf8Y", title: "전화로 예약해요", body: "편한 날짜와 시간을 말씀해 주시면 예약을 잡아 드려요." },
  { icon: "https://nnuer.site/media/ccIHrKo7S6oQ", title: "접수하고 기다려요", body: "신분증을 챙겨 오시면 접수가 더 빨라요." },
  { icon: "https://nnuer.site/media/6wKx6Y6ujbT7", title: "진찰과 검사를 받아요", body: "아픈 곳을 직접 살펴보고, 필요한 검사만 권해 드려요." },
  { icon: "https://nnuer.site/media/uRRfBu0cTPkj", title: "치료 방법을 함께 정해요", body: "검사 결과를 쉬운 말로 설명드리고, 맞는 치료를 함께 골라요." },
];

export default function VisitSteps() {
  return (
    <section className="w-full break-keep bg-[#f2f4f6] py-14 text-[#191f28] md:py-24">
      <div className="mx-auto w-full max-w-[1120px] px-5 md:px-10">
        <p className="mb-3 text-[15px] font-semibold text-[#1a77bf]">처음 오시는 분께</p>
        <h2 className="text-[28px] leading-[1.25] font-bold tracking-[-0.025em] md:text-[40px]">처음 오셔도 어렵지 않아요</h2>
        <p className="mt-4 text-[17px] leading-[1.7] text-[#191f28]/80 md:text-[19px]">이렇게 네 단계면 진료를 받으실 수 있어요.</p>
        <ol className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {STEPS.map((step, i) => (
            <li key={step.title} className="flex flex-col gap-4 rounded-[28px] bg-white p-7">
              <div className="flex items-center justify-between">
                <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-[#1a77bf] text-[15px] font-bold text-white">{i + 1}</span>
                <img src={step.icon} alt="" className="h-11 w-11" />
              </div>
              <h3 className="text-[19px] font-bold">{step.title}</h3>
              <p className="text-[15px] leading-[1.65] text-[#191f28]/75">{step.body}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}