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

import { Button } from "@/components/ui/button"
import { NegotiationReplay } from "@/components/ui/negotiation-replay"
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()
  const mediaFadeUp = useFadeUp(0.12)

  return (
    /* 영상이 붙으면서 width 를 md(max-w-4xl) → lg(max-w-5xl) 로 넓혔다.
       세로 목업과 카피를 4xl 안에 2단으로 밀어넣으면 양쪽 다 좁아진다. */
    <Section bg="stage" width="lg">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
        <motion.div {...fadeUp} className="lg:col-span-7 text-center lg:text-left">
          <SectionHeading
            align="left"
            className="text-center lg:text-left"
            tone="stage"
            size="display"
            gap="none"
            eyebrow="Start Today"
            /* 닫는 CTA 라 히어로(74px)보다는 낮추고 섹션 제목(64px)보다는 세운다.
               2단이 되면서 한 줄이 짧아져 lg 부터 한 단계 더 줄인다. */
            titleClassName="text-[32px] sm:text-[44px] md:text-[56px] lg:text-[48px]"
            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 mx-auto lg:mx-0"
          />

          <div className={`${CTA_GAP} flex justify-center lg:justify-start`}>
            <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>

        {/* 결과 화면. 예전엔 negotiation_annotated_3d.mp4 였는데 컴포넌트로 바꿨다 —
            영상은 화자("아이마켓 구매 MD")와 색이 픽셀에 구워져 있어 둘 다 못 고쳤다.
            다크 무대에 네이티브로 그리니 밝은 영상이 구멍처럼 뜨던 문제도 같이 사라져서,
            카드로 감싸고 그림자로 띄우던 처리가 더는 필요 없다. */}
        <motion.div {...mediaFadeUp} className="lg:col-span-5">
          <NegotiationReplay className="mx-auto max-w-[360px] lg:max-w-none" />
        </motion.div>
      </div>
    </Section>
  )
}