import { motion } from "motion/react"
import { GitMerge, RefreshCw, Scale, type LucideIcon } from "lucide-react"

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

/** 강화학습 섹션 — 협상할수록 좋아진다는 3개 필러 카드. */
export function Reinforcement() {
  const fadeUp = useFadeUp()

  return (
    <Section id="reinforcement" bg="surface" bordered className="border-b border-line">
      <motion.div {...fadeUp} className="mb-20">
        <SectionHeading
          eyebrow="REINFORCEMENT LEARNING"
          title="협상할수록, 더 좋은 조건으로"
          description={
            <>
              negotium은 진행된 모든 거래 데이터와 파트너 거절 피드백을{" "}
              <span className="font-bold text-primary">강화학습 기술</span>에 투입합니다. 무턱대고 가격을 후려쳐 상대방의
              반발만 사고 결렬로 치닫는 경직된 협상이 아니라, 파트너사가 충분히 받아들일 수 있는 범위 내에서 최선의 마진율을
              뽑아내도록 조율 페이스를 학습합니다.
            </>
          }
          descriptionClassName="mt-8 max-w-3xl"
        />
      </motion.div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {PILLARS.map((pillar, idx) => (
          <PillarCard key={pillar.title} pillar={pillar} delay={0.1 * (idx + 1)} />
        ))}
      </div>
    </Section>
  )
}

type Pillar = { icon: LucideIcon; title: string; description: string }

function PillarCard({ pillar, delay }: { pillar: Pillar; delay: number }) {
  const fadeUp = useFadeUp(delay)

  return (
    <motion.div {...fadeUp} className="bg-white p-8 rounded-[28px] flex flex-col justify-between h-[240px]">
      <div className="w-12 h-12 rounded-2xl bg-primary/5 text-primary flex items-center justify-center">
        <pillar.icon className="w-6 h-6" />
      </div>
      <div>
        <Typography variant="cardTitle" className="mb-2">
          {pillar.title}
        </Typography>
        <Typography variant="caption" className="text-ink-soft">
          {pillar.description}
        </Typography>
      </div>
    </motion.div>
  )
}

const PILLARS: Pillar[] = [
  {
    icon: Scale,
    title: "흥정의 일관성 보존",
    description: "개인 감정이나 친분에 휘둘리지 않고 사내 재무 원칙과 가이드라인을 완벽히 관철시킵니다.",
  },
  {
    icon: RefreshCw,
    title: "지속적인 전략 최적화",
    description: "매 조율 피드백을 축적하여 상대방의 마진 수용성 확률 지도를 고도화해 나갑니다.",
  },
  {
    icon: GitMerge,
    title: "낙찰 성사율 극대화",
    description: "단순한 협상 결렬(No-deal) 리스크를 상시 추산해 안전하면서도 최고 이익률의 균형점을 확보합니다.",
  },
]