'use client';

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { motion } from 'framer-motion';
import { ChevronRight, Target, BarChart3, ShieldCheck } from 'lucide-react';

export function IntroView({ onStart }: { onStart: () => void }) {
  return (
    <div className="max-w-4xl mx-auto py-8 sm:py-12 px-4 sm:px-6">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center mb-12 sm:mb-16"
      >
        <span className="inline-block px-4 py-1.5 bg-cyan-50 text-cyan-600 rounded-full border border-cyan-100 text-sm sm:text-base font-medium mb-6">
          IT산업 종사자 보상경쟁력 자가진단 서비스
        </span>
        <h2 className="text-3xl sm:text-4xl md:text-[52px] font-bold text-slate-900 leading-tight mb-6 sm:mb-8">
          나의 직무 역량과<br />
          <span className="text-cyan-500 underline decoration-cyan-200 underline-offset-8">임금 수준</span>을 진단하세요
        </h2>
        <p className="text-sm sm:text-lg leading-6 sm:leading-normal text-slate-600 max-w-2xl mx-auto mb-10 sm:mb-12 break-keep">
          10가지 핵심 역량 지표를 통해 당신의 전문성을 분석하고,<br />
          동일 직무/레벨 대비 시장 가치를 확인합니다.
        </p>
        <button
          onClick={onStart}
          className="group relative w-full sm:w-auto px-8 sm:px-10 py-4 text-base sm:text-lg md:px-8 md:py-3 md:text-base bg-slate-900 text-white rounded-2xl font-bold shadow-2xl shadow-slate-200 hover:bg-cyan-600 transition-all active:scale-95"
        >
          진단 시작하기
          <ChevronRight className="inline-block ml-2 group-hover:translate-x-1 transition-transform" />
        </button>
      </motion.div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-8">
        {[
          { icon: Target, title: "정밀 역량 진단", desc: "10개 지표 기반 수직 계층형 분석" },
          { icon: BarChart3, title: "시장 데이터 비교", desc: "업종/매출 규모별 보상 경쟁력 확인" },
          { icon: ShieldCheck, title: "신뢰할 수 있는 지표", desc: "IT 산업 표준 직무 체계 적용" }
        ].map((item, i) => (
          <div key={i} className="p-6 sm:p-8 bg-white border border-slate-100 rounded-3xl shadow-sm">
            <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center mb-6">
              <item.icon className="w-6 h-6 text-slate-400" />
            </div>
            <h3 className="text-lg font-bold text-slate-900 mb-2">{item.title}</h3>
            <p className="text-sm text-slate-600 leading-relaxed">{item.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );
}