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

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

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

  return (
    <Section id="reinforcement" bg="stage" width="lg">
      {/* 순환 링은 원래 히어로에 있었는데, 루프가 의미상 속하는 자리는 여기다 —
          "협상할수록 좋아진다"를 말하는 섹션이고, 히어로는 이미 세로 예산이 포화였다. */}
      {/* 머리가 그리드 셀 안에 들어가 있어서 여기만 gap="none" 이다. 그리드 아이템은
          독립 서식 문맥이라 마진이 상쇄되지 않고, 머리에 mb 를 걸면 items-center 의
          세로 정렬을 밀어버린다. 섹션 간격은 그리드 래퍼가 대신 진다. */}
      <motion.div {...fadeUp} className={`grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center ${HEADING_GAP}`}>
        <div className="lg:col-span-7">
          <SectionHeading
            className="text-center lg:text-left"
            gap="none"
            tone="stage"
            eyebrow="Reinforcement Learning"
            /* 쉼표에서 줄을 명시적으로 끊는다. break-keep + text-balance 에 맡기면
               두 줄 길이를 맞추려고 "협상할수록, 더 / 좋은 조건으로" 처럼 쉼표를
               넘어가서 끊어진다 — 조건절과 결과절이 한 줄에 섞여 의미가 흐려진다. */
            title={
              <>
                협상할수록,
                <br />더 좋은 조건으로
              </>
            }
            description={
              <>
                잘 깎는 요령은 담당자 머릿속에만 남고, 결과는 그날 컨디션에 흔들립니다. 네고시움은 지난 거래 기록과
                협력사가 거절한 지점을 <span className="font-semibold text-on-stage">강화학습</span>에 넣습니다. 어디까지가
                받아들여지는 선인지를 데이터로 익혀서, 결렬 없이 도달 가능한 최선을 찾아갑니다.
              </>
            }
          />
        </div>
        <div className="lg:col-span-5 flex justify-center">
          <OrbitRing className="w-[280px] md:w-[340px] h-auto" />
        </div>
      </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-stage-raised border border-stage-line p-8 rounded-card flex flex-col justify-between h-[240px]">
      <div className="w-11 h-11 rounded-control bg-primary/15 text-on-stage flex items-center justify-center">
        <pillar.icon className="w-5 h-5" />
      </div>
      <div>
        <Typography variant="cardTitle" className="mb-2 text-on-stage">
          {pillar.title}
        </Typography>
        <Typography variant="caption" className="text-on-stage-soft">
          {pillar.description}
        </Typography>
      </div>
    </motion.div>
  )
}

const PILLARS: Pillar[] = [
  {
    icon: Scale,
    title: "협상 기준의 일관성",
    description: "개인 감정이나 친분에 휘둘리지 않고, 사내 기준과 가이드라인대로만 협상합니다.",
  },
  {
    icon: RefreshCw,
    title: "쓸수록 올라가는 기준선",
    description: "협상이 쌓일수록 기준선이 올라갑니다. 운영 기간이 그대로 협상력이 됩니다.",
  },
  {
    icon: GitMerge,
    title: "결렬 없는 합의",
    description: "성사되지 않을 선까지 밀지 않습니다. 합의 가능한 범위 안에서 최선을 찾습니다.",
  },
]