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
          className="text-center md:text-left"
          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: "무리하게 후려쳐 관계를 깨는 대신, 성사되는 선에서 최대한 끌어냅니다.",
  },
]