import { motion } from 'motion/react';
import { PageContainer } from '@/shared/ui/page-container';

export default function TargetAudience() {
  return (
    <section id="audience" className="py-24 bg-white px-6">
      <PageContainer className="px-0">
        <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">
            Who is Infinite Marketing for
          </h2>
          {/* PART II 피봇: 프리미엄 병원 메인, 대행사 보조. "전략 파트너·전략 자문" 포지셔닝 반영. */}
          <p className="text-lg text-slate-600 max-w-2xl mx-auto break-keep leading-relaxed">
            프리미엄 병원의 <strong className="text-primary-900">전략 기획</strong>과 대행사 <strong className="text-primary-900">전략 자문</strong>을 위한 AI 플래너입니다.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-8">
          <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-slate-50 to-white border border-slate-100 rounded-3xl"
          >
            <h3 className="text-4xl md:text-5xl font-serif font-bold text-primary-900 mb-6 leading-tight">Premium Medical Business</h3>
            <p className="text-slate-600 mb-10 leading-relaxed text-lg break-keep">
              고객 LTV가 높은 <strong className="text-primary-900">프리미엄 성형외과의 전략 파트너</strong>. 유튜브·인스타·네이버·강남언니를 10분 만에 진단해 12개월 로드맵을 설계합니다.
            </p>
            <div className="flex flex-wrap gap-3">
              {['피부과', '성형외과', '치과', '안과', '헬스케어 클리닉', '피트니스'].map((item, i) => (
                <div key={i} className="bg-white px-5 py-3 rounded-2xl shadow-sm border border-slate-100 text-slate-700 font-medium hover:shadow-md transition-shadow">
                  {item}
                </div>
              ))}
            </div>
          </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 to-white border border-purple-100/50 rounded-3xl"
          >
            <div className="flex items-center gap-3 mb-6 flex-wrap">
              <h3 className="text-4xl md:text-5xl font-serif font-bold text-primary-900 leading-tight">Medical Marketing Agency</h3>
              {/* Partner Program 배지 — "준비중" 결핍 메시지 → "신청하세요" waitlist 희소성 프레임으로 전환.
                  대행사를 2차 페르소나가 아닌 early-access 대상으로 포지셔닝. */}
              <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-semibold border border-purple-200">
                Partner Program · 신청하세요
              </span>
            </div>
            <p className="text-slate-600 mb-10 leading-relaxed text-lg break-keep">
              병원 마케팅 대행사의 <strong className="text-primary-900">전략 자문</strong>. 진단 리포트와 경쟁사 벤치마크로 제안 품질을 높이고 수주 경쟁력을 강화합니다.
            </p>
            <div className="flex flex-wrap gap-3">
              {['병원 마케팅 대행사', '콘텐츠 마케팅 Agency', '영상 마케팅 Agency', '광고 운영 대행사'].map((item, i) => (
                <div key={i} className="bg-white px-5 py-3 rounded-2xl shadow-sm border border-purple-50 text-slate-700 font-medium hover:shadow-md transition-shadow">
                  {item}
                </div>
              ))}
            </div>
          </motion.div>
        </div>
      </PageContainer>
    </section>
  );
}
