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>
          <p className="text-lg text-slate-600 max-w-2xl mx-auto font-medium">
            Infinite Marketing이 만드는 실질적인 변화를 확인해보세요!
          </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>
            <ul className="space-y-6">
              {[
                'SEO 콘텐츠 자동 생산으로 검색 상위 노출 달성',
                '비용 부담 없이 고품질 영상 콘텐츠 대량 확대',
                '자연 검색 유입 증가로 인한 환자 전환율 상승'
              ].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>
            <ul className="space-y-6">
              {[
                'AI 기반 콘텐츠 제작 자동화로 생산성 극대화',
                '블로그 텍스트 기반 영상 제작 자동화로 리소스 절감',
                '다수 클라이언트 계정의 통합 운영 및 효율화'
              ].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>
  );
}
