import { motion } from "motion/react"
import { ArrowRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Typography } from "@/components/ui/typography"
import { useFadeUp } from "@/lib/motion"

/**
 * 최종 CTA — 히어로와 같은 다크 무대로 페이지를 닫는다.
 *
 * 이 섹션은 원래 디자인 시스템을 우회하고 있었다: bg-ink(무대 색이 아님), font-extrabold,
 * 알약 배지, blur(120px) 글로우 블롭, 다크 배경 위 라이트 토큰(text-ink-muted).
 * 전부 토큰으로 돌렸다. 글로우 블롭은 AI 가 만든 히어로의 대표 장식이라 걷어냈다.
 */
export function FinalCTA() {
  const fadeUp = useFadeUp()

  return (
    <section className="stage-bg text-on-stage py-24 md:py-32">
      {/* max-w-3xl 이면 "조용히 새고 있을지 / 모릅니다" 로 끊겨 마지막 줄이 고아가 된다. */}
      <div className="max-w-4xl mx-auto px-6 text-center">
        <motion.div {...fadeUp}>
          <Typography variant="eyebrow" className="block mb-5 text-primary-on-stage">
            Start Today
          </Typography>

          <Typography variant="stageDisplay" as="h2" className="text-[32px] sm:text-[44px] md:text-[56px]">
            <span className="text-white">지금도 구매 예산은</span>
            <br />
            <span className="text-on-stage-soft/60">조용히 새고 있을지 모릅니다</span>
          </Typography>

          <p className="mt-8 text-[16px] sm:text-[17px] text-on-stage-soft/75 max-w-xl mx-auto leading-[1.6] break-keep">
            협상 테이블에 오르지 못하고 그냥 넘어가던 건들이 있습니다. negotium 에이전트가 정해진 기준 안에서 그 건들을 대신
            조율합니다.
          </p>

          <div className="mt-12">
            <Button href="#contact-section" variant="stage" size="xl" className="group">
              <span>도입 상담 신청</span>
              <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
            </Button>
          </div>
        </motion.div>
      </div>
    </section>
  )
}