'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const FAQ_DATA = [
  {
    question: "서비스 이용료가 있나요?",
    answer: "아니요, 별도의 비용 없이 누구나 무료로 이용 가능합니다. 본 서비스는 IT산업 종사자의 임금 경쟁력을 진단하는 무료 플랫폼으로 개인에게는 연봉 협상 및 커리어 설계를 돕고, 기업에게는 데이터 기반의 적정 임금 정책 수립을 지원합니다."
  },
  {
    question: "IT 직무 레벨 평가의 신뢰도는 어떻게 보장되나요?",
    answer: "국제 및 국내 표준 모델을 통합하여 신뢰도를 확보했습니다. 한국인공지능·소프트웨어산업협회의 IT분야 직무역량체계(ITSQF)를 필두로, 국제 표준인 SFIA와 CMMI 모델을 기반으로 설계되었습니다. 이를 통해 지식, 기술, 태도를 포괄하는 체계적인 역량 측정이 가능합니다."
  },
  {
    question: "IT 직무 레벨별 임금 통계 데이터는 어떤 자료를 근거로 하나요?",
    answer: "시앤피컨설팅이 2025년 국내 IT 기업 61개사로부터 수집한 실제 임금 데이터베이스를 기반으로 합니다. SW개발 직종 내 7개 핵심 직무를 대상으로 기업 규모(매출액, 근로자 수) 및 유형별로 세분화된 고정급과 지급총액 데이터를 제공하여 현실적인 시장 수준을 반영합니다."
  },
  {
    question: "진단 결과와 실제 연봉이 차이가 나는 이유는 무엇인가요?",
    answer: "진단 결과는 특정 시점의 표본 데이터를 기반으로 한 통계적 추정치이기 때문입니다. 특히 '지급총액'은 올해 연간 고정급, 작년 기준 성과급 등을 더한 금액으로 산출되므로 실제 수령액과 차이가 발생할 수 있습니다."
  },
  {
    question: "개인정보를 수집하나요?",
    answer: "아니요, 이름이나 연락처 같이 개인을 식별할 수 있는 정보는 절대 수집하지 않습니다. 또한 모든 데이터는 익명화되어 통계 분석 목적으로만 활용되므로 안심하고 이용하실 수 있습니다."
  },
];

export function FAQToggle() {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  return (
    <div className="w-full space-y-3 mt-12 mb-16">
      <h3 className="text-xl font-bold text-slate-800 mb-6 px-2">자주 묻는 질문 (FAQ)</h3>
      <div className="space-y-4">
        {FAQ_DATA.map((item, index) => (
          <div key={index} className="border border-slate-100 rounded-2xl overflow-hidden bg-white shadow-sm hover:shadow-md transition-shadow">
            <button
              onClick={() => setOpenIndex(openIndex === index ? null : index)}
              className="w-full px-6 py-5 flex items-center justify-between gap-4 text-left hover:bg-slate-50 transition-colors"
            >
              <div className="flex items-center gap-3">
                <span className="font-medium text-slate-900 text-base leading-snug">
                  <span className="font-bold text-slate-400 mr-2">Q.</span>
                  {item.question}
                </span>
              </div>
              <motion.span
                animate={{ rotate: openIndex === index ? 180 : 0 }}
                transition={{ duration: 0.2 }}
                className="text-slate-400 flex-shrink-0"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 9l-7 7-7-7" />
                </svg>
              </motion.span>
            </button>
            <AnimatePresence>
              {openIndex === index && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.3, ease: "easeInOut" }}
                >

                  <div className="px-6 pb-6 text-slate-600 leading-relaxed text-sm sm:text-[15px] border-t border-slate-50 pt-4">
                    {item.answer}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        ))}
      </div>
    </div>
  );
}