import { motion } from 'motion/react';
import { CheckCircle2 } from 'lucide-react';

export default function UseCases() {
  return (
    <section id="use-cases" className="py-24 bg-white px-6">
      <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 }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl md:text-5xl font-serif font-bold text-primary-900 mb-4">
            Use Cases
          </h2>
          {/* PART II 피봇: "만드는 실질적인 변화" (제품 중심) → 역할별 가치 (고객 중심)로 전환. */}
          <p className="text-lg text-slate-600 max-w-2xl mx-auto font-medium break-keep">
            프리미엄 병원과 전문 대행사가 INFINITH로 만드는 전략적 변화입니다.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-12">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="glass-card p-10 md:p-12 bg-gradient-to-br from-blue-50/50 to-white border border-blue-100/30"
          >
            <h3 className="text-2xl md:text-3xl font-serif font-bold text-primary-900 mb-8">Premium Medical Business</h3>
            {/* 체크리스트 재설계: 진단(Audit) · 전략(Planning) · 운영(Weekly KPI) 3축. */}
            <ul className="space-y-6">
              {[
                '10분 진단으로 채널별 강·약점 파악, 투자 우선순위 즉시 도출',
                '12개월 마케팅 로드맵과 콘텐츠 캘린더로 기획 리소스 70% 절감',
                '주간 KPI 달성도 → 전략 조정 루프로 환자 전환 흐름 자율 최적화',
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-4 text-slate-700 font-medium group">
                  <CheckCircle2 className="w-6 h-6 text-[#7A84D4] shrink-0 mt-1" />
                  <span className="leading-relaxed text-lg group-hover:text-primary-900 transition-colors">{item}</span>
                </li>
              ))}
            </ul>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="glass-card p-10 md:p-12 bg-gradient-to-br from-purple-50/50 to-white border border-purple-100/30"
          >
            <h3 className="text-2xl md:text-3xl font-serif font-bold text-primary-900 mb-8">Marketing Agency</h3>
            {/* 대행사 가치축: 수주(Pitch) · 전략 품질(Strategy) · 포트폴리오 확장(Portfolio). */}
            <ul className="space-y-6">
              {[
                '진단 리포트와 경쟁사 벤치마크로 제안서 품질 강화, 수주 경쟁력 상승',
                '병원별 12개월 로드맵으로 전략 자문 일관성과 리텐션 확보',
                '다수 병원 클라이언트 통합 대시보드로 운영 효율 극대화',
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-4 text-slate-700 font-medium group">
                  <CheckCircle2 className="w-6 h-6 text-purple-500 shrink-0 mt-1" />
                  <span className="leading-relaxed text-lg group-hover:text-primary-900 transition-colors">{item}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        </div>
      </div>
    </section>
  );
}