/**
 * FAQ — Pricing 페이지 하단 자주 묻는 질문.
 *
 * 계약 기반 영업 모델에 맞춰 카피 재작성 (plan 섹션 15-E 변형):
 *  - 온라인 결제 관련 질문 제거
 *  - 세금계산서 / 계약서 / 분원 4개↑ 커스텀 / 의료법 심의 / 강남언니 데이터 / 품질 보장 / Export 포함
 *
 * 인터랙션:
 *  - 단일 오픈(single-open) 아코디언 — `useState<string | null>` 로 현재 열린 질문 ID 추적
 *  - 같은 버튼 재클릭 시 닫힘 (`prev === id ? null : id`)
 *  - motion/react AnimatePresence로 높이 전환 애니메이션
 *
 * DS 준수:
 *  - 아이콘은 lucide Plus/Minus 대신 단순 회전 ChevronDown(기본 lucide는 동반 가능 — outlined 단색)
 *    ※ DS "Filled Icons Only"는 '아이콘 면적 채움' 규칙이며 UI utility(chevron·arrow)는 허용 범위.
 *      이미 CTA 버튼도 lucide ArrowRight를 사용 중이므로 일관.
 */
import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { ChevronDown } from 'lucide-react';
import { Button } from '@/shared/ui/button';

interface FaqItem {
  id: string;
  q: string;
  a: string;
}

/**
 * FAQ 항목 목록.
 *
 * ※ 해지·환불 관련 세부 정책(구 `refund`, `quality` 항목)은 추후 세부 정책 확정 후
 *   재도입 예정. 현재는 계약·결제·운영 프로세스 + 의료법/데이터 수집 범위만 노출.
 */
const items: FaqItem[] = [
  {
    id: 'contract',
    q: '계약은 어떻게 진행하나요?',
    a: '상담 문의 → 요건·범위 확정 → 계약서 및 세금계산서 발행 순서로 진행됩니다. 계약 기간은 월·분기·연 단위 중 선택 가능하며, 연 계약 시 월 환산 20% 할인이 적용됩니다.',
  },
  {
    id: 'payment',
    q: '결제 방식은 어떻게 되나요?',
    a: '온라인 카드 결제는 제공하지 않으며, 세금계산서 기반 계좌 입금으로 진행됩니다. 법인·개인사업자 모두 지원하며, 결제 조건(선불/후불)은 계약서에서 협의합니다.',
  },
  {
    id: 'multi-clinic',
    q: '분원이 4개 이상인데 어떻게 하나요?',
    a: 'INTELLIGENCE+는 최대 3개 분원까지 통합 대시보드를 제공합니다. 4개 이상이거나 그룹사 단위로 분석이 필요하신 경우 커스텀 플랜 상담을 통해 데이터 구조·리포팅 범위를 맞춤 설계해 드립니다.',
  },
  {
    id: 'medical-law',
    q: '의료법 광고 심의와 충돌하지 않나요?',
    a: 'INFINITH 리포트는 내부 마케팅 전략 문서이며 환자 대상 광고물이 아닙니다. 리포트 내용을 실제 광고·SNS 게시물로 활용하실 경우 의료광고심의위원회 심의가 별도로 필요하며, 이는 고객사(병원) 및 대행사 책임입니다.',
  },
  {
    id: 'gangnamunni',
    q: '강남언니 데이터는 어떻게 수집하나요?',
    a: '강남언니 앱 및 웹의 공개 병원 페이지에서 병원명·리뷰 수·평점·대표 시술 등 공개 정보만 수집합니다. 개인 식별 정보(PII)는 일절 수집하지 않으며, 수집 주기와 범위는 서비스 약관에 명시되어 있습니다.',
  },
  {
    id: 'data-export',
    q: '리포트 데이터를 내보낼 수 있나요?',
    a: '모든 플랜에서 PDF 내보내기를 지원합니다. INTELLIGENCE+는 병원 CI(로고·컬러) 반영 커스텀 템플릿을 제공합니다. JSON·CSV 다운로드는 상담 시 요청하실 수 있습니다.',
  },
];

export default function FAQ() {
  const [openId, setOpenId] = useState<string | null>(null);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-80px' }}
      transition={{ duration: 0.5 }}
      className="w-full"
    >
      {/* 헤드라인 */}
      <div className="text-center mb-10">
        <h2 className="text-3xl md:text-4xl font-serif font-bold text-primary-900 mb-3">
          자주 묻는 질문
        </h2>
        <p className="text-slate-600 break-keep">
          계약·결제·운영 관련해 자주 받는 질문을 모았습니다.
        </p>
      </div>

      {/* 아코디언 리스트 — 콘텐츠 가독성을 위해 inner max-w-3xl, outer w-full */}
      <div className="max-w-3xl mx-auto divide-y divide-slate-200 rounded-2xl bg-white border border-slate-200 shadow-sm overflow-hidden">
        {items.map((item) => {
          const isOpen = openId === item.id;
          return (
            <div key={item.id}>
              <Button
                variant="ghost"
                onClick={() => setOpenId((prev) => (prev === item.id ? null : item.id))}
                aria-expanded={isOpen}
                aria-controls={`faq-panel-${item.id}`}
                className="w-full h-auto justify-start items-start gap-4 px-6 py-5 text-left rounded-none hover:bg-slate-50/60 transition-colors"
              >
                <span className="flex-1 text-base font-semibold text-primary-900 break-keep leading-snug whitespace-normal">
                  {item.q}
                </span>
                <ChevronDown
                  className={`w-5 h-5 text-slate-400 shrink-0 mt-0.5 transition-transform duration-200 ${
                    isOpen ? 'rotate-180 text-accent' : ''
                  }`}
                />
              </Button>

              <AnimatePresence initial={false}>
                {isOpen && (
                  <motion.div
                    key="answer"
                    id={`faq-panel-${item.id}`}
                    role="region"
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: 'auto', opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.25, ease: 'easeInOut' }}
                    className="overflow-hidden"
                  >
                    <div className="px-6 pb-5 text-sm text-slate-600 leading-relaxed break-keep">
                      {item.a}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          );
        })}
      </div>
    </motion.div>
  );
}
