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

import { Button } from "@/components/ui/button"
import { Section } from "@/components/ui/section"
import { CTA_GAP, SectionHeading } from "@/components/ui/section-heading"
import { useFadeUp } from "@/lib/motion"

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

  return (
    /* width="md"(max-w-4xl) — sm(max-w-3xl)이면 "조용히 새고 있을지 / 모릅니다" 로 끊겨
       마지막 줄이 고아가 된다. */
    <Section bg="stage" width="md" containerClassName="text-center">
      <motion.div {...fadeUp}>
        <SectionHeading
          align="center"
          tone="stage"
          size="display"
          gap="none"
          eyebrow="Start Today"
          /* 닫는 CTA 라 히어로(74px)보다는 낮추고 섹션 제목(64px)보다는 세운다. */
          titleClassName="text-[32px] sm:text-[44px] md:text-[56px]"
          title={
            <>
              <span className="text-white">지금도 구매 예산은</span>
              <br />
              <span className="text-on-stage-soft/60">조용히 새고 있을지 모릅니다</span>
            </>
          }
          description="협상 테이블에 오르지 못하고 그냥 넘어가던 건들이 있습니다. 네고시움 에이전트가 정해진 기준 안에서 그 건들을 대신 조율합니다."
          descriptionClassName="max-w-xl text-on-stage-soft/75"
        />

        <div className={CTA_GAP}>
          <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>
    </Section>
  )
}