PLOT. 연회색 아코디언 자주 묻는 질문

const FAQ = [
  {
    q: "PLOT은 어떤 서비스인가요?",
    a: "직원이 있는 작은 회사의 리브랜딩 서비스예요. 지금 쓰는 로고, 홈페이지, 인쇄물을 진단해 AI가 새 CI 후보를 제안하고, 고른 CI를 브랜드 팜플렛으로 확인한 뒤 명함, 홈페이지, 사업소개서, 사원증을 같은 CI로 만들어 인쇄, 배송, 홈페이지 공개까지 이어서 해 드려요.",
  },
  {
    q: "어떤 순서로 진행되나요?",
    a: "진단 → CI 고르기 → 브랜드 팜플렛 승인 → 시안 확정 → 주문 · 결제 순서예요. 결제하면 제작물마다 제작 준비, 인쇄 · 게시, 완료로 진행되고 단계가 바뀔 때마다 알림과 이메일로 알려 드려요.",
  },
  {
    q: "필요한 제작물만 골라서 주문할 수 있나요?",
    a: "네. 하나만 주문해도 되고, 두 가지 이상을 함께 주문하면 패키지 할인이 적용됩니다. 2종은 5%, 3종은 10%, 4종 모두는 15%입니다.",
  },
  {
    q: "디자인을 직접 수정할 수 있나요?",
    a: "시안마다 편집기에서 글자, 색, 배치를 직접 고칠 수 있고, 고친 시안 그대로 인쇄용 PDF를 만들어요. 수정 요청을 남기면 담당자가 함께 다듬어 드려요.",
  },
  {
    q: "결제한 뒤 취소할 수 있나요?",
    a: "제작을 시작하기 전에는 주문 내역에서 직접 취소하고 전액 환불받을 수 있어요. 제작을 시작한 뒤에는 수정 요청이나 고객센터로 문의해 주세요.",
  },
  {
    q: "홈페이지는 어떻게 공개되나요?",
    a: "주소를 정하고 월 호스팅 카드를 등록하면 플랫폼이 관리하는 서버에 SSL과 함께 공개돼요. 호스팅 요금은 등록한 카드로 매달 자동 결제되고, 해지하면 결제한 기간이 끝날 때 닫혀요.",
  },
];

/** PLOT. 자주 묻는 질문: 가운데 제목, 연회색 둥근 아코디언 6개. 열면 질문이 블루로 바뀌고 + 가 - 로 바뀐다. */
export default function Faq() {
  return (
    <section id="faq" className="w-full scroll-mt-24 bg-white px-5 py-28 text-[#020A22]">
      <div className="mx-auto max-w-5xl">
        <h2 className="text-center text-[28px] font-bold tracking-[-0.04em] md:text-[40px]">자주 묻는 질문</h2>
        <div className="mt-12 space-y-3">
          {FAQ.map((f) => (
            <details key={f.q} className="group rounded-2xl bg-[#F4F6FA] px-6 py-5 md:px-7">
              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-[16px] font-bold group-open:text-[#0055FF] md:text-[17px] [&::-webkit-details-marker]:hidden">
                {f.q}
                <span aria-hidden className="relative size-4 shrink-0 text-[#020A22]/40">
                  <span className="absolute top-1/2 left-0 h-[2px] w-4 -translate-y-1/2 bg-current" />
                  <span className="absolute top-0 left-1/2 h-4 w-[2px] -translate-x-1/2 bg-current transition-transform group-open:scale-y-0" />
                </span>
              </summary>
              <p className="mt-4 text-[15px] leading-relaxed break-keep text-[#020A22]/65">{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}