/**
 * AI 답변 목업 카드 — 히어로 우측.
 * ⚠️ 정직성 규약: 이 카드는 실제 AI 답변이 아니라 "구축 후 목표 상태 예시"다.
 *    라벨을 절대 제거하지 않는다 (현재 상태로 오인 금지).
 */
import { motion } from 'motion/react';

// 예시 카드라 실제 병원 도메인을 쓰지 않는다. 병원 사이트 자리는 일반 명칭으로 둔다.
const CITED_DOMAINS = ['병원 공식 홈페이지', 'gangnamunni.com', 'youtube.com'];

interface AiAnswerMockProps {
  clinicName: string;
  /** 기준표 항목 수 (재측정 문구에 사용) */
  criteriaCount: number;
}

export default function AiAnswerMock({ clinicName, criteriaCount }: AiAnswerMockProps) {
  const protocolPoints = [
    `루프 1회전(8주)마다 ${criteriaCount}개 항목을 재측정해 점수를 갱신합니다.`,
    '질의 10개 × 5회 스팟체크로 인용 여부를 신뢰구간과 함께 보고합니다.',
    '측정 결과가 다음 사이클의 구축 우선순위를 자동으로 정합니다.',
  ];

  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6, delay: 0.2 }}
      className="glass-card px-8 py-7 flex flex-col justify-center text-left"
    >
      <div className="text-[13px] font-bold tracking-[0.2em] text-accent mb-5">
        THE OUTPUT · AI 답변 인용
      </div>

      {/* 질의 */}
      <div className="flex items-center gap-2.5 pb-4 border-b border-[#eef0f7] mb-4">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
          <circle cx="9" cy="9" r="5.5" stroke="#64748b" strokeWidth="1.5" />
          <path d="M13.5 13.5 17 17" stroke="#64748b" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
        <span className="ui-body font-medium">
          강남에서 안전하게 가슴성형 상담받을 수 있는 병원 추천해줘
        </span>
      </div>

      {/* 목표 상태의 답변 예시 */}
      <p className="text-[15px] leading-[1.8] text-slate-600 mb-4 break-keep">
        의료진 14명의 약력을 공개한{' '}
        <span className="bg-[#F3F0FF] text-[#4A3A7C] font-semibold px-1.5 py-0.5 rounded-md">
          {clinicName}
        </span>
        는 후기 7,800여 건이 공개되어 있고, 시술별 FAQ와 회복 일정표를 제공합니다.
      </p>

      {/* 인용 도메인 칩 + 목표 상태 라벨 (제거 금지) */}
      <div className="flex items-center flex-wrap gap-2 mb-6">
        {CITED_DOMAINS.map((domain) => (
          <div key={domain} className="px-3 py-[5px] bg-[#EFF0FF] border border-[#C5CBF5] rounded-full">
            <span className="text-[12.5px] font-medium text-[#3A3F7C]">{domain}</span>
          </div>
        ))}
        <span className="text-[12.5px] text-slate-400 ml-1.5">AEO / GEO 구축 후 목표 상태 예시</span>
      </div>

      {/* 측정 프로토콜 */}
      <div className="border-t border-[#eef0f7] pt-[18px] flex flex-col gap-2.5">
        {protocolPoints.map((point) => (
          <div key={point} className="flex items-center gap-2.5">
            <span className="w-[7px] h-[7px] shrink-0 bg-[#9B8AD4] rounded-full" />
            <span className="text-sm text-slate-600 break-keep">{point}</span>
          </div>
        ))}
      </div>
    </motion.div>
  );
}