src/components/features/Intro.tsx

'use client';

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

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

export function IntroView({ onStart }: { onStart: () => void }) {
  return (
    <div className="max-w-5xl 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: "ITSQF, SFIA, CMMI 등 국내외 표준 모델을 적용한 공신력 있는 직무 역량 평가" },
          { icon: BarChart3, title: "기업의 실제 임금 데이터", desc: "2025년 국내 61개 IT 기업의 실제 임금 DB를 바탕으로 매출액·규모별 보상 경쟁력 비교" },
          { icon: ShieldCheck, title: "로그인 없는 익명 진단", desc: "개인 식별 정보 수집 없이 오직 데이터 분석만 수행하여 철저한 개인정보 보호" }
        ].map((item, i) => (
          <div key={i} className="p-6 sm:p-8 bg-white border border-slate-100 rounded-3xl shadow-sm">
            <div className="flex flex-row sm:flex-col items-center sm:items-start gap-4 sm:gap-0 mb-4 sm:mb-6">
              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-slate-50 rounded-xl sm:rounded-2xl flex items-center justify-center shrink-0">
                <item.icon className="w-5 h-5 sm:w-6 sm:h-6 text-slate-400" />
              </div>
              <h3 className="text-base sm:text-lg font-bold text-slate-900 sm:mt-6">{item.title}</h3>
            </div>
            <p className="text-sm sm:text-[15px] text-slate-600 leading-relaxed">{item.desc}</p>
          </div>
        ))}
      </div>

      <FAQToggle />
    </div>
  );
}