/**
 * 최종 CTA (다크). 연락처는 o2oteam@o2o.kr 단일 채널 (허위 연락처 금지).
 */
import { motion } from 'motion/react';
import { buildDiscoveryMailto, DISCOVERY_CONTACT_EMAIL } from './discoveryContact';

interface DiscoveryCtaProps {
  criteriaCount: number;
  /** CTA 클릭 → URL 입력 신청 모달 열기 */
  onStart: () => void;
}

export default function DiscoveryCta({ criteriaCount, onStart }: DiscoveryCtaProps) {
  return (
    <section className="bg-[#0A1128] px-6 py-24">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.6 }}
        className="max-w-7xl mx-auto flex flex-col items-center text-center"
      >
        <h2 className="font-serif text-3xl md:text-[44px] font-bold leading-tight text-white mb-[18px] break-keep">
          AI가 당신의 병원을 인용하게 하세요.
        </h2>
        <p className="text-lg leading-[1.7] text-slate-400 mb-10 break-keep">
          진단은 무료입니다. {criteriaCount}개 항목 실측 리포트를 받아보고 결정하세요.
        </p>
        <div className="flex flex-col sm:flex-row items-center gap-3.5">
          <button
            type="button"
            onClick={onStart}
            className="inline-flex items-center h-[52px] px-[30px] bg-white rounded-full text-base font-bold text-primary-900 hover:bg-slate-100 transition-colors"
          >
            URL 입력으로 시작하기
          </button>
          <a
            href={buildDiscoveryMailto('무료 진단 신청')}
            className="text-[15px] text-slate-500 hover:text-slate-300 transition-colors"
          >
            {DISCOVERY_CONTACT_EMAIL}
          </a>
        </div>
      </motion.div>
    </section>
  );
}