function AIMatching() {
  const [selectedJob, setSelectedJob] = useState('sr-frontend');

  return (
    <div style={{ padding: '20px 24px', display: 'grid', gap: 18, maxWidth: 1400, margin: '0 auto' }}>

      {/* Header */}
      <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ display:'inline-flex', alignItems:'center', gap: 6, padding:'4px 10px', background: 'var(--violet-50)', color: 'var(--violet-700)', borderRadius: 999, fontSize: 11, fontWeight: 600, letterSpacing:'0.02em' }}>
            <AISparkle size={11}/>
            CAREER INTELLIGENCE
          </div>
          <h1 style={{ fontSize: 22, fontWeight: 700, letterSpacing:'-0.02em', margin: '8px 0 2px', whiteSpace:'nowrap' }}>AI 매칭 엔진</h1>
          <div style={{ fontSize: 12.5, color: 'var(--fg-3)', whiteSpace:'nowrap' }}>공고와 지원자 풀을 스킬·경력·문화 fit 3축으로 매칭</div>
        </div>
        <div style={{ flex: 1 }}/>
        <Button variant="secondary" size="sm" icon="sliders-horizontal">매칭 가중치 조정</Button>
        <Button variant="ai" size="sm" icon="refresh-cw">매칭 재실행</Button>
      </div>

      {/* Job selector + summary */}
      <Card style={{ padding: 0 }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap: 12 }}>
          <span style={{ fontSize: 11, color:'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500, whiteSpace:'nowrap' }}>매칭 대상 공고</span>
          <select value={selectedJob} onChange={e=>setSelectedJob(e.target.value)} style={{
            padding:'6px 30px 6px 12px', border:'1px solid var(--border-strong)', borderRadius: 8,
            fontFamily:'var(--font-sans)', fontSize: 13, background:'var(--neutral-0)', outline:'none',
            appearance:'none', backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%236B7383\' stroke-width=\'2\'><path d=\'M6 9l6 6 6-6\'/></svg>")',
            backgroundRepeat:'no-repeat', backgroundPosition:'right 8px center',
          }}>
            <option value="sr-frontend">Sr. Frontend Engineer · Engineering</option>
            <option value="designer">Product Designer · Design</option>
            <option value="analyst">Data Analyst · Data</option>
          </select>
          <div style={{ flex: 1 }}/>
          <div style={{ display:'flex', gap: 16 }}>
            <MiniStat label="풀 크기" value="1,247"/>
            <MiniStat label="매칭 완료" value="1,247"/>
            <MiniStat label="상위 매칭" value="26" accent/>
          </div>
        </div>

        {/* Weight visualization */}
        <div style={{ padding: '14px 18px', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 20 }}>
          <WeightBar label="스킬 매칭" weight={40} color="var(--brand-500)"/>
          <WeightBar label="경력 적합" weight={25} color="var(--info-500)"/>
          <WeightBar label="문화 fit" weight={20} color="var(--violet-500)"/>
          <WeightBar label="리텐션 예측" weight={15} color="var(--success-500)"/>
        </div>
      </Card>

      {/* Ranking table */}
      <Card style={{ padding: 0 }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap: 12 }}>
          <div style={{ fontSize: 14, fontWeight: 600, whiteSpace:'nowrap' }}>매칭 상위 후보</div>
          <span style={{ fontSize: 11.5, color:'var(--fg-3)', whiteSpace:'nowrap' }}>· 총 1,247명 중 상위 5명</span>
          <div style={{ flex: 1 }}/>
          <div style={{ display: 'flex', gap: 2, background: 'var(--neutral-100)', borderRadius: 8, padding: 3 }}>
            {['전체','미검토','북마크'].map((t,i)=>(
              <div key={t} style={{
                padding:'4px 10px', fontSize:11.5, fontWeight:500, whiteSpace:'nowrap',
                color: i === 0 ? 'var(--fg-1)' : 'var(--fg-2)',
                borderRadius: 6, cursor:'pointer',
                background: i === 0 ? 'var(--neutral-0)' : 'transparent',
                boxShadow: i === 0 ? 'var(--shadow-xs)' : 'none',
              }}>{t}</div>
            ))}
          </div>
        </div>

        {[
          { rank: 1, name: '한지현', role: 'Sr. Frontend @ Toss', years: 5, score: 92, skill: 88, career: 95, culture: 90, retention: 87, tags: ['React 5년+','Web Perf 리드','Design System'], reason: '요구 스킬 8개 중 7개 일치, Web Performance 리드 경험이 팀 요구사항과 정확히 매치됩니다.' },
          { rank: 2, name: '오세진', role: 'Frontend @ Kakao', years: 6, score: 89, skill: 90, career: 91, culture: 82, retention: 85, tags: ['React','TypeScript','SSR'], reason: 'Next.js 프로덕션 3년, 렌더링 최적화 사례 3건이 JD의 핵심 요구사항과 일치합니다.' },
          { rank: 3, name: '유하람', role: 'Frontend @ 당근', years: 4, score: 85, skill: 82, career: 78, culture: 92, retention: 88, tags: ['React','Accessibility','iOS bridge'], reason: '접근성 경험이 강점. 문화 fit 92점으로 팀 스타일과 잘 맞습니다.' },
          { rank: 4, name: '이서연', role: 'Frontend @ Naver', years: 3, score: 82, skill: 79, career: 72, culture: 88, retention: 86, tags: ['React','Storybook','TDD'], reason: '경력이 다소 부족하지만 Design System 경험과 학습 속도가 우수합니다.' },
          { rank: 5, name: '박수민', role: 'Sr. Frontend @ Line', years: 6, score: 78, skill: 84, career: 90, culture: 68, retention: 72, tags: ['Vue','TypeScript'], reason: 'Vue 중심 경력이라 React 전환 필요. 문화 fit이 상대적으로 낮음.' },
        ].map(c => <MatchRow key={c.rank} candidate={c}/>)}
      </Card>

      {/* Why-this-match reasoning */}
      <Card ai style={{ padding: 0 }}>
        <div style={{ padding: '14px 18px', display:'flex', alignItems:'center', gap: 6, color: 'var(--violet-700)', fontWeight: 600, fontSize: 12.5, letterSpacing:'0.02em' }}>
          <AISparkle size={15}/>
          매칭 로직 설명 · Why this ranking?
        </div>
        <div style={{ padding: '0 18px 18px', display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 14 }}>
          <ReasoningCard
            title="상위 후보 공통 강점"
            body="상위 5명 모두 React·TypeScript 5년+ 경력. Web Performance 실무 사례를 이력서에 명시. Design System 경험 3명 이상."
          />
          <ReasoningCard
            title="놓치기 쉬운 후보"
            body="6-10위 후보 중 김도현(iOS Engineer, 92점)는 Frontend 이력을 갖고 있어 재확인이 필요합니다."
            cta="10-20위 확인"
          />
        </div>
      </Card>
    </div>
  );
}

function MiniStat({ label, value, accent }) {
  return (
    <div>
      <div style={{ fontSize: 10, color:'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500 }}>{label}</div>
      <div style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 18, fontWeight: 700, letterSpacing:'-0.02em', color: accent ? 'var(--violet-600)' : 'var(--fg-1)' }}>{value}</div>
    </div>
  );
}

function WeightBar({ label, weight, color }) {
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 6 }}>
        <span style={{ color:'var(--fg-2)', whiteSpace:'nowrap' }}>{label}</span>
        <span style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontWeight: 700 }}>{weight}%</span>
      </div>
      <div style={{ position:'relative', height: 6, background:'var(--neutral-100)', borderRadius: 999 }}>
        <div style={{ width: `${weight*2.5}%`, height:'100%', background: color, borderRadius: 999 }}/>
      </div>
    </div>
  );
}

function MatchRow({ candidate: c }) {
  return (
    <div style={{
      padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)',
      display: 'grid', gridTemplateColumns: '30px 40px 1.4fr 1.6fr 100px auto', gap: 14, alignItems: 'center',
    }}>
      <div style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 20, fontWeight: 800, color: c.rank <= 3 ? 'var(--violet-600)' : 'var(--fg-3)', letterSpacing:'-0.02em' }}>{c.rank}</div>
      <Avatar name={c.name} tone={c.rank - 1} size={36}/>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.name}</div>
        <div style={{ fontSize: 12, color: 'var(--fg-3)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.role} · {c.years}년차</div>
        <div style={{ display:'flex', gap: 4, marginTop: 6, flexWrap: 'wrap' }}>
          {c.tags.map(t => <span key={t} style={{ fontSize: 10.5, padding:'2px 6px', background:'var(--neutral-100)', color:'var(--fg-2)', borderRadius: 4, whiteSpace:'nowrap' }}>{t}</span>)}
        </div>
      </div>
      <div style={{ fontSize: 12.5, color:'var(--fg-2)', lineHeight: 1.5, wordBreak:'keep-all' }}>{c.reason}</div>
      <ScoreBreakdown skill={c.skill} career={c.career} culture={c.culture} retention={c.retention}/>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 4 }}>
        <div style={{
          width: 52, height: 52, borderRadius: 999,
          background: `conic-gradient(var(--violet-500) ${c.score*3.6}deg, var(--violet-100) 0deg)`,
          display:'inline-flex', alignItems:'center', justifyContent:'center',
        }}>
          <div style={{ width: 42, height: 42, borderRadius: 999, background:'#fff', display:'inline-flex', alignItems:'center', justifyContent:'center', flexDirection:'column' }}>
            <span style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 15, fontWeight: 700, color:'var(--violet-700)', letterSpacing:'-0.02em', lineHeight: 1 }}>{c.score}</span>
          </div>
        </div>
        <Button variant="secondary" size="sm">검토</Button>
      </div>
    </div>
  );
}

function ScoreBreakdown({ skill, career, culture, retention }) {
  return (
    <div style={{ display:'grid', gap: 3 }}>
      <MiniBar label="S" value={skill} color="var(--brand-500)"/>
      <MiniBar label="C" value={career} color="var(--info-500)"/>
      <MiniBar label="F" value={culture} color="var(--violet-500)"/>
      <MiniBar label="R" value={retention} color="var(--success-500)"/>
    </div>
  );
}
function MiniBar({ label, value, color }) {
  return (
    <div style={{ display:'grid', gridTemplateColumns:'14px 1fr 22px', gap: 4, alignItems:'center' }}>
      <span style={{ fontSize: 9, fontFamily:'var(--font-mono)', color:'var(--fg-3)' }}>{label}</span>
      <div style={{ position:'relative', height: 3, background:'var(--neutral-100)', borderRadius: 999 }}>
        <div style={{ width: `${value}%`, height:'100%', background: color, borderRadius: 999 }}/>
      </div>
      <span style={{ fontSize: 9, fontFamily:'var(--font-mono)', color:'var(--fg-2)', fontVariantNumeric:'tabular-nums', textAlign:'right' }}>{value}</span>
    </div>
  );
}

function ReasoningCard({ title, body, cta }) {
  return (
    <div style={{ background: 'rgba(255,255,255,0.65)', border: '1px solid rgba(228,218,255,0.6)', borderRadius: 10, padding: '12px 14px' }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-1)' }}>{title}</div>
      <div style={{ fontSize: 12.5, color: 'var(--fg-2)', marginTop: 6, lineHeight: 1.5, wordBreak:'keep-all' }}>{body}</div>
      {cta && <button style={{ marginTop: 10, border:'none', background:'transparent', color:'var(--violet-700)', fontWeight: 600, fontSize: 12, padding: 0, cursor:'pointer' }}>{cta} →</button>}
    </div>
  );
}

window.AIMatching = AIMatching;