회색 알약형 카드로 펼치는 FAQ 목록

const FAQS = [
  { q: "예약 없이 가도 되나요?", a: "네, 예약 없이 오셔도 진료받으실 수 있어요. 전화로 예약하시면 기다리는 시간을 줄일 수 있어요." },
  { q: "주차할 수 있나요?", a: "건물 지하 주차장을 이용하실 수 있어요. 진료를 받으시면 주차 시간을 지원해 드려요." },
  { q: "점심시간에도 접수가 되나요?", a: "점심시간에는 접수가 잠시 멈춰요. 점심시간이 끝나면 바로 다시 접수해 드려요." },
  { q: "무릎 말고 다른 곳이 아파도 되나요?", a: "네. 어깨, 허리, 목, 손목처럼 다른 관절과 뼈 문제도 함께 진료해요." },
  { q: "꼭 수술해야 하나요?", a: "먼저 수술 없이 할 수 있는 치료부터 살펴봐요. 검사 결과를 보고 어떤 방법이 맞는지 쉽게 설명해 드릴게요." },
  { q: "가족이 함께 들어가도 되나요?", a: "네, 함께 오셔서 설명을 같이 들으셔도 좋아요." },
];

export default function ClinicFaq() {
  return (
    <section className="w-full break-keep bg-white 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>
        <div className="mt-10 flex flex-col gap-3">
          {FAQS.map((item) => (
            <details key={item.q} className="group rounded-[28px] bg-[#f2f4f6] px-6 py-5">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-[17px] font-semibold [&::-webkit-details-marker]:hidden">
                {item.q}
                <span aria-hidden className="text-[20px] leading-none opacity-50 transition-transform group-open:rotate-45">+</span>
              </summary>
              <p className="mt-3 text-[16px] leading-[1.7] text-[#191f28]/75">{item.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}