o2o-negosium-original/landing/app/components/sections/comparison.tsx

import { useEffect, useRef, useState } from "react"
import { AnimatePresence, motion } from "motion/react"
import { Clock, Database, Handshake, Scale, TrendingUp, UserRound, type LucideIcon } from "lucide-react"

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

/** 기존 방식 ↔ 도입 후 토글 비교 — 화면 진입 시 자동으로 오가고, 누르면 잠시 수동(8초 후 자동 재개). */
export function Comparison() {
  const fadeUp = useFadeUp()
  const toggleFadeUp = useFadeUp(0.1)
  const [mode, setMode] = useState<Mode>("before")
  // 사용자가 토글을 누르면 잠시 자동 전환 중단, 8초 무조작 시 재개
  const [locked, setLocked] = useState(false)
  const [inView, setInView] = useState(false)
  const sectionRef = useRef<HTMLDivElement>(null)
  const lockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)

  const selectMode = (key: Mode) => {
    setMode(key)
    setLocked(true)
    if (lockTimerRef.current) clearTimeout(lockTimerRef.current)
    lockTimerRef.current = setTimeout(() => setLocked(false), 8000)
  }

  useEffect(() => {
    const el = sectionRef.current
    if (!el) return
    const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting), { threshold: 0.35 })
    observer.observe(el)
    return () => {
      observer.disconnect()
      if (lockTimerRef.current) clearTimeout(lockTimerRef.current)
    }
  }, [])

  useEffect(() => {
    if (!inView || locked) return
    const timer = setInterval(() => setMode((m) => (m === "before" ? "after" : "before")), 3000)
    return () => clearInterval(timer)
  }, [inView, locked])

  return (
    <Section id="comparison">
      <motion.div {...fadeUp}>
        <SectionHeading
          align="center"
          eyebrow="Before & After"
          title="협상 방식을 바꾸면, 무엇이 달라질까요"
          description="기존 가격 협상의 문제는 사람이 아니라 구조입니다."
          descriptionClassName="max-w-2xl"
        />
      </motion.div>

      {/* 모드 토글 — 이용 가이드 탭과 같은 세그먼트 문법.
          아래 간격(CONTROL_GAP)은 머리 간격보다 좁다. 토글은 자기가 조종하는
          카드들과 한 덩어리로 읽혀야지, 제목에 붙으면 무엇을 바꾸는 스위치인지 흐려진다. */}
      <motion.div {...toggleFadeUp} className={`flex justify-center ${CONTROL_GAP}`}>
        {/* 액티브를 bg-white 로 두면 트랙(bg-fill #F0F2F8) 과 거의 같은 밝기라
            멀리서 어느 쪽이 켜졌는지 안 보인다. 채움색으로 확실히 갈라준다. */}
        <div className="p-1.5 bg-fill rounded-full inline-flex gap-1.5">
          {MODES.map((m) => (
            <button
              key={m.key}
              onClick={() => selectMode(m.key)}
              className={`px-7 py-3 rounded-full text-[15px] font-semibold transition-colors cursor-pointer ${
                mode === m.key ? "bg-primary text-white" : "text-ink-muted hover:text-ink"
              }`}
            >
              <span>{m.label}</span>
            </button>
          ))}
        </div>
      </motion.div>

      <div ref={sectionRef} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {ITEMS.map((item, idx) => (
          <CompareCard key={item.label} item={item} mode={mode} index={idx} />
        ))}
      </div>
    </Section>
  )
}

type Mode = "before" | "after"

const MODES: { key: Mode; label: string }[] = [
  { key: "before", label: "기존 방식" },
  { key: "after", label: "네고시움 도입 후" },
]

type CompareItem = { label: string; icon: LucideIcon; before: string; after: string }

function CompareCard({ item, mode, index }: { item: CompareItem; mode: Mode; index: number }) {
  const fadeUp = useFadeUp(0.06 * (index + 1))
  const active = mode === "after"

  return (
    <motion.div
      {...fadeUp}
      className={`p-7 rounded-card flex flex-col gap-5 transition-colors duration-500 ${
        active ? "bg-primary-soft/60" : "bg-surface"
      }`}
    >
      <div className="flex items-center justify-between">
        <div
          className={`w-11 h-11 rounded-card flex items-center justify-center transition-colors duration-500 ${
            active ? "bg-primary/10 text-primary" : "bg-ink-muted/10 text-ink-muted"
          }`}
        >
          <item.icon className="w-5 h-5" />
        </div>
        <Typography variant="micro" className={active ? "text-primary" : ""}>
          {item.label}
        </Typography>
      </div>

      {/* 전환 시 레이아웃 점프 방지용 최소 높이 */}
      <div className="min-h-[72px]">
        <AnimatePresence mode="wait">
          <motion.div
            key={mode}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.28, delay: 0.05 * index }}
          >
            <Typography variant="small" className={active ? "text-ink font-semibold" : "text-ink-muted"}>
              {active ? item.after : item.before}
            </Typography>
          </motion.div>
        </AnimatePresence>
      </div>
    </motion.div>
  )
}

const ITEMS: CompareItem[] = [
  {
    label: "거래 시간",
    icon: Clock,
    before: "일일 거래의 한계 — 사람의 인력과 시간만큼만 협상합니다.",
    after: "24시간 연중무휴, 전 품목·전 공급사와 동시에 협상합니다.",
  },
  {
    label: "협상 성과",
    icon: TrendingUp,
    before: "담당자의 역량·감정·컨디션에 따라 성과가 흔들립니다.",
    after: "전략 강화 학습으로 기준선이 상승하고, 점진적으로 개선됩니다.",
  },
  {
    label: "노하우",
    icon: Database,
    before: "잘 깎는 노하우가 개인의 머릿속에만 남습니다.",
    after: "모든 협상이 데이터로 축적되어 다음 전략에 재활용됩니다.",
  },
  {
    label: "사람",
    icon: UserRound,
    before: "반복 협상에 시간을 뺏겨 전략 업무가 계속 밀립니다.",
    after: "반복 협상은 에이전트가 맡고, 담당자는 전략 구매와 대형 건에 집중합니다.",
  },
  {
    label: "파트너 관계",
    icon: Handshake,
    before: "담당자마다 기준이 달라 협력사가 조건을 예측하기 어렵습니다.",
    after: "에이전트가 같은 기준으로 상시 응대해 조건이 일관됩니다.",
  },
  {
    label: "의사 결정",
    icon: Scale,
    before: "개인 편향과 컴플라이언스 리스크에 노출됩니다.",
    after: "객관적·데이터 기반의 투명한 프로세스로 기록됩니다.",
  },
]