import { motion } from 'motion/react';
import { useNavigate, useParams } from 'react-router';
import { RocketFilled, DownloadFilled } from '../icons/FilledIcons';
import { useExportPDF } from '../../hooks/useExportPDF';

export default function PlanCTA() {
  const { exportPDF, isExporting } = useExportPDF();
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();

  return (
    <motion.section
      className="py-16 md:py-20 px-6"
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.6, ease: 'easeOut' }}
    >
      <div className="max-w-7xl mx-auto">
        <div
          data-cta-card
          className="rounded-2xl bg-gradient-to-r from-[#fff3eb] via-[#e4cfff] to-[#f5f9ff] p-10 md:p-14 text-center"
        >
          <div className="flex justify-center mb-6">
            <div className="w-14 h-14 rounded-full bg-white/80 backdrop-blur-sm border border-white/40 flex items-center justify-center">
              <RocketFilled size={28} className="text-[#4F1DA1]" />
            </div>
          </div>

          <h3 className="font-serif text-2xl md:text-3xl font-bold text-[#021341] mb-3">
            콘텐츠 제작을 시작하세요
          </h3>

          <p className="text-[#021341]/60 mb-8 max-w-lg mx-auto">
            INFINITH가 브랜딩부터 콘텐츠 제작, 채널 배포까지 자동화합니다.
          </p>

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <button
              type="button"
              onClick={() => navigate(`/studio/${id || 'live'}`)}
              className="inline-flex items-center justify-center gap-2 rounded-full bg-gradient-to-r from-[#4F1DA1] to-[#021341] px-6 py-3 text-sm font-medium text-white shadow-md hover:shadow-lg transition-shadow"
            >
              콘텐츠 제작 시작
            </button>

            <button
              type="button"
              onClick={() => exportPDF('INFINITH_Marketing_Plan')}
              disabled={isExporting}
              className="inline-flex items-center justify-center gap-2 rounded-full bg-white border border-slate-200 px-6 py-3 text-sm font-medium text-[#021341] shadow-sm hover:shadow-md transition-shadow disabled:opacity-60"
            >
              {isExporting ? (
                <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
                </svg>
              ) : (
                <DownloadFilled size={16} />
              )}
              플랜 다운로드
            </button>
          </div>
        </div>
      </div>
    </motion.section>
  );
}