import { motion } from "motion/react"
import { Briefcase, Clock, Lock, Users, 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"

/** 가격 외 보조 이점 4종 스트립. */
export function CoreValues() {
  const fadeUp = useFadeUp()

  return (
    <Section id="core-values">
      <motion.div {...fadeUp} className="mb-24">
        <SectionHeading
          align="center"
          eyebrow="BEYOND EXPECTED VALUE"
          title="가격 그 이상의 이점"
          description="절감액은 시작일 뿐 — 관계, 투명성, 그리고 사람의 시간까지 지킵니다."
          descriptionClassName="mt-4 text-[17px]"
        />
      </motion.div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
        {VALUES.map((value, idx) => (
          <ValueStrip key={value.title} value={value} delay={0.1 * (idx + 1)} />
        ))}
      </div>
    </Section>
  )
}

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

function ValueStrip({ value, delay }: { value: Value; delay: number }) {
  const fadeUp = useFadeUp(delay)

  return (
    <motion.div {...fadeUp} className="bg-surface p-8 rounded-[32px] flex items-start gap-5 transition-all hover:translate-y-[-4px]">
      <div className="w-10 h-10 rounded-full bg-primary/5 flex items-center justify-center text-primary shrink-0 mt-1">
        <value.icon className="w-5 h-5" />
      </div>
      <div>
        <Typography variant="cardTitle" className="mb-2">
          {value.title}
        </Typography>
        <Typography variant="small">{value.description}</Typography>
      </div>
    </motion.div>
  )
}

const VALUES: Value[] = [
  {
    icon: Users,
    title: "파트너사 관계 수호",
    description:
      "단가를 깎는 악역과 감정 소모는 봇이 맡습니다. 담당자는 협력사와의 신뢰와 동반 성장, 큰 틀의 파트너십에만 집중하세요.",
  },
  {
    icon: Lock,
    title: "투명한 거버넌스",
    description:
      "모든 제안과 협상 로그, 조율 타임라인이 한 줄도 빠짐없이 기록됩니다. 감사 대응도, 의사결정 추적도 클릭 한 번이면 됩니다.",
  },
  {
    icon: Briefcase,
    title: "핵심 전략에만 집중",
    description:
      "이메일·메신저로 반복되던 흥정 수작업은 봇이 전담합니다. 인력은 공급망 위기 대처, 우량 공급처 발굴 같은 전략 업무와 대형 거래에 투입하세요.",
  },
  {
    icon: Clock,
    title: "협상 리드타임 단축",
    description:
      "수백 공급사와 동시에 협상하므로 사람 수에 얽매이지 않습니다. 수주씩 걸리던 가격 타결을 수일 안에 끝냅니다.",
  },
]