/**
 * Why Now 다크 밴드.
 * ⚠️ 3개 수치(12종 크롤러 / 네이버 기여 0건 / Direct 유실 35~70%)는 근거 있는 실측·문헌 값.
 *    새 시장 통계를 임의로 추가하지 않는다 (근거 확인 후에만).
 */
import { motion } from 'motion/react';

const STATS = [
  {
    figure: '12종',
    title: 'AI 크롤러가 이미 읽는 중',
    detail:
      'GPTBot·OAI-SearchBot·PerplexityBot 등이 오늘도 병원 사이트를 수집합니다. 문제는 접근이 아니라 인용할 내용입니다.',
  },
  {
    figure: '0건',
    title: '네이버 자산의 AI 기여',
    detail:
      '네이버 블로그·플레이스는 robots.txt로 AI 크롤러를 전면 차단합니다(2026-08 실측). 지금까지의 네이버 마케팅은 AI 답변에 닿지 않습니다.',
  },
  {
    figure: '35~70%',
    title: 'Direct로 숨는 AI 유입',
    detail:
      'AI가 보낸 방문의 상당수는 유입 경로 없이 도착합니다. 측정 인프라 없이는 이미 오는 환자도 세지 못합니다.',
  },
];

export default function WhyNow() {
  return (
    <section id="why-now" className="bg-[#0A1128] px-6 py-22">
      <div className="max-w-7xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <div className="text-sm font-bold tracking-[0.24em] text-[#AF90FF] mb-4">WHY NOW</div>
          <h2 className="font-serif text-3xl md:text-[40px] font-bold leading-tight text-white mb-3 break-keep">
            검색은 끝났고, 답변이 시작됐습니다.
          </h2>
          <p className="text-[17px] leading-[1.7] text-slate-400 mb-14 break-keep">
            답변엔진은 광고 입찰이 아니라 크롤링 가능한 오픈웹 근거로 병원을 고릅니다. 인용되지
            못하면 비교 대상에도 오르지 못합니다.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-8">
          {STATS.map((stat, index) => (
            <motion.div
              key={stat.figure}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              className="flex flex-col gap-2.5 p-7 bg-[#0F1B45] border border-[#2A3A6B] rounded-2xl"
            >
              <div className="font-serif text-[46px] font-bold text-[#AF90FF] leading-tight">
                {stat.figure}
              </div>
              <div className="text-base font-semibold text-white break-keep">{stat.title}</div>
              <p className="text-[14.5px] leading-[1.7] text-slate-400 break-keep">{stat.detail}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}