/**
 * CTA — 랜딩 페이지 하단 최종 전환 섹션.
 *
 * PART III 피봇:
 *  - Hero와 동일한 입력 로직(url state/navigate)을 중복 구현하던 문제 해소.
 *    이제 `<MultiChannelInput variant="cta" />` 한 줄로 통일.
 *  - "무료 진단" 언급 삭제 — 계약 기반 모델 반영.
 *  - 헤드라인은 전략 소유권 메시지로 피봇 ("Own Your Marketing Strategy.").
 *  - 보조 CTA "가격 플랜 보기" 추가 (/pricing?from=cta).
 */
import { useNavigate, Link } from 'react-router';
import { motion } from 'motion/react';
import MultiChannelInput, { type AnalyzePayload } from '@/features/channels/components/MultiChannelInput';

export default function CTA() {
  const navigate = useNavigate();

  const handleAnalyze = (payload: AnalyzePayload) => {
    navigate('/report/loading', {
      state: {
        url: payload.primaryUrl,
        manualChannels: payload.manualChannels,
      },
    });
  };

  return (
    <section className="py-20 md:py-24 bg-primary-900 text-white px-6 relative overflow-hidden">
      <div className="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-indigo-900 via-primary-900 to-primary-900 opacity-80"></div>
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-purple-500/20 rounded-full blur-[100px] pointer-events-none"></div>

      <div className="max-w-4xl mx-auto text-center relative z-10">
        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-4xl md:text-5xl font-serif font-bold mb-4 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff]"
        >
          Own Your Marketing Strategy.
        </motion.h2>

        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className="text-lg md:text-xl text-purple-200 mb-10 max-w-2xl mx-auto font-light"
        >
          URL 하나로 시작하는 AI 마케팅 전략 플래너.
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.2 }}
          className="w-full"
        >
          <MultiChannelInput variant="cta" onAnalyze={handleAnalyze} />

          {/* 보조 CTA — 가격 플랜 */}
          <div className="mt-6 flex justify-center">
            <Link
              to="/pricing?from=cta"
              className="inline-flex items-center gap-2 text-sm font-semibold text-purple-200 hover:text-white transition-colors underline-offset-4 hover:underline"
            >
              가격 플랜 보기 →
            </Link>
          </div>
        </motion.div>
      </div>
    </section>
  );
}