import { useState } from "react"
import { AnimatePresence, motion } from "motion/react"
import { ChevronDown } from "lucide-react"

import { Section } from "@/components/ui/section"
import { SectionHeading } from "@/components/ui/section-heading"
import { Typography } from "@/components/ui/typography"
import { EASE_OUT_EXPO, useFadeUp } from "@/lib/motion"

/** 도입 검토 FAQ 아코디언 — 첫 항목 기본 열림, 한 번에 하나만 펼침. */
export function Faq() {
  const fadeUp = useFadeUp()
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  return (
    <Section id="faq" width="sm">
      <motion.div {...fadeUp} className="mb-24">
        <SectionHeading
          align="center"
          eyebrow="FAQ"
          title="자주 묻는 질문"
          description="도입 검토에서 가장 많이 받는 질문들입니다."
          descriptionClassName="mt-4 text-[17px]"
        />
      </motion.div>

      <div className="space-y-4">
        {FAQS.map((faq, idx) => (
          <FaqItem
            key={faq.question}
            faq={faq}
            open={openIndex === idx}
            onToggle={() => setOpenIndex(openIndex === idx ? null : idx)}
            delay={0.1 * (idx + 1)}
          />
        ))}
      </div>
    </Section>
  )
}

type FaqEntry = { question: string; answer: string }

function FaqItem({
  faq,
  open,
  onToggle,
  delay,
}: {
  faq: FaqEntry
  open: boolean
  onToggle: () => void
  delay: number
}) {
  const fadeUp = useFadeUp(delay)

  return (
    <motion.div {...fadeUp} className="bg-surface rounded-[28px] overflow-hidden">
      <button
        type="button"
        onClick={onToggle}
        aria-expanded={open}
        className="w-full flex items-center justify-between gap-6 text-left px-8 py-7 cursor-pointer"
      >
        <Typography variant="cardTitle" as="span">
          {faq.question}
        </Typography>
        <motion.span
          animate={{ rotate: open ? 180 : 0 }}
          transition={{ duration: 0.4, ease: EASE_OUT_EXPO }}
          className="text-ink-muted shrink-0"
          aria-hidden
        >
          <ChevronDown className="w-5 h-5" />
        </motion.span>
      </button>

      <AnimatePresence initial={false}>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.5, ease: EASE_OUT_EXPO }}
            className="overflow-hidden"
          >
            <Typography variant="small" className="px-8 pb-8">
              {faq.answer}
            </Typography>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}

const FAQS: FaqEntry[] = [
  {
    question: "공급사가 봇과의 협상을 싫어하지 않을까요?",
    answer:
      "오히려 반대입니다. 이 거래들 대부분은 지금껏 협상 테이블에 오르지도 못하던 건입니다. 봇은 24시간 원하는 시간에, 압박 없이, 늘 같은 기준으로 응대합니다. 글로벌 동종 서비스의 공급사 만족도는 82%에 이릅니다.",
  },
  {
    question: "봇이 우리 기준을 벗어나 합의해 버리면요?",
    answer:
      "그럴 수 없습니다. 봇은 견적을 만들 때 정한 목표가와 낙찰 기준 밖으로 나가지 않고, 최종 낙찰 규칙도 사용자가 정합니다.",
  },
  {
    question: "기존 시스템과 연동되나요?",
    answer:
      "별도 연동 없이 바로 시작할 수 있습니다. 상품·공급사 데이터는 엑셀 일괄 업로드로 쉽게 등록되고, ERP 연동은 도입 상담에서 사내 환경에 맞춰 협의합니다.",
  },
]