function ApplicantProfile() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', height: '100%', minHeight: 0 }}>
      {/* Main column */}
      <div style={{ overflow: 'auto', padding: '20px 28px' }}>
        {/* Breadcrumb */}
        <div style={{ display:'flex', alignItems:'center', gap: 6, fontSize: 12, color: 'var(--fg-3)', marginBottom: 16 }}>
          <span style={{cursor:'pointer'}}>지원자</span>
          <Icon name="chevron-right" size={12}/>
          <span style={{cursor:'pointer'}}>Sr. Frontend Engineer</span>
          <Icon name="chevron-right" size={12}/>
          <span style={{color:'var(--fg-1)'}}>한지현</span>
        </div>

        {/* Header */}
        <div style={{ display:'flex', gap: 20, alignItems:'flex-start' }}>
          <Avatar name="한지현" tone={0} size={72} />
          <div style={{ flex: 1 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <h1 style={{ fontSize: 24, fontWeight: 700, letterSpacing:'-0.02em', margin: 0 }}>한지현</h1>
              <span style={{ fontFamily: 'var(--font-latin)', color: 'var(--fg-3)', fontSize: 15 }}>Ji-hyun Han</span>
              <Badge tone="info" dot>1차 인터뷰</Badge>
            </div>
            <div style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 6 }}>
              Sr. Frontend Engineer · 5년차 · Seoul · 서초구
            </div>
            <div style={{ display:'flex', gap: 14, fontSize: 12.5, color: 'var(--fg-3)', marginTop: 8 }}>
              <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="mail" size={13}/>jihyun.han@example.com</span>
              <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="phone" size={13}/>010-1234-5678</span>
              <span style={{display:'inline-flex',alignItems:'center',gap:4}}><Icon name="linkedin" size={13}/>/in/jihyun-han</span>
            </div>
          </div>
          <div style={{ display:'flex', gap: 6 }}>
            <Button variant="secondary" size="sm" icon="message-circle">메시지</Button>
            <Button variant="secondary" size="sm" icon="calendar">면접 예약</Button>
            <Button variant="primary" size="sm">다음 단계로</Button>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ marginTop: 24, display:'flex', gap: 4, borderBottom: '1px solid var(--border-default)' }}>
          {['프로필','스크리닝','인터뷰','메모','이력'].map((t,i) => (
            <div key={t} style={{
              padding: '10px 14px', fontSize: 13,
              fontWeight: i === 0 ? 600 : 500,
              color: i === 0 ? 'var(--fg-1)' : 'var(--fg-3)',
              borderBottom: `2px solid ${i === 0 ? 'var(--brand-500)' : 'transparent'}`,
              cursor: 'pointer', marginBottom: -1,
            }}>{t}</div>
          ))}
        </div>

        {/* AI Screening banner */}
        <div style={{
          marginTop: 20,
          background: 'linear-gradient(180deg,#F8F5FF 0%,#FFFFFF 60%)',
          border: '1px solid #E4DAFF', borderRadius: 14, padding: 18,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position:'absolute', top:-40, right:-40, width:180, height:180, background:'radial-gradient(circle,#B49AFF33,transparent 70%)', borderRadius:999 }}/>
          <div style={{ display:'flex', alignItems:'center', gap: 8, color: 'var(--violet-700)', fontWeight: 600, fontSize: 12.5, letterSpacing:'0.02em' }}>
            <AISparkle size={15} />
            AI CAREER INTELLIGENCE
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'auto 1fr', gap: 20, alignItems:'center', marginTop: 10 }}>
            <ScoreRing score={92} />
            <div>
              <div style={{ fontSize: 17, fontWeight: 700, letterSpacing:'-0.01em' }}>Sr. Frontend Engineer 포지션과 92% 매칭</div>
              <div style={{ fontSize: 13.5, color: 'var(--fg-2)', marginTop: 4, lineHeight: 1.55 }}>
                요구 스킬 8개 중 <b style={{color:'var(--fg-1)'}}>7개 일치</b>. React/TypeScript 5년+, 팀 리드 경험 2년, 최근 Web Performance 프로젝트 3건이 팀 요구사항과 겹칩니다.
              </div>
              <div style={{ display:'flex', gap: 6, marginTop: 12, flexWrap:'wrap' }}>
                <ScoreChip label="스킬" value="7/8" />
                <ScoreChip label="경력" value="+2년" />
                <ScoreChip label="문화 fit" value="상" />
                <ScoreChip label="리텐션 예측" value="87%" />
              </div>
            </div>
          </div>
        </div>

        {/* Skills matrix */}
        <div style={{ marginTop: 24 }}>
          <SectionTitle title="스킬 매트릭스" en="Skills Match" />
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12, marginTop: 12 }}>
            {[
              { skill:'React', level:5, need:5, match:true },
              { skill:'TypeScript', level:5, need:5, match:true },
              { skill:'Next.js', level:4, need:4, match:true },
              { skill:'Testing (Jest, Playwright)', level:4, need:3, match:true },
              { skill:'Web Performance', level:5, need:4, match:true },
              { skill:'GraphQL', level:3, need:4, match:false },
              { skill:'Design System', level:5, need:3, match:true },
              { skill:'CI/CD', level:4, need:3, match:true },
            ].map(s => <SkillRow key={s.skill} {...s} />)}
          </div>
        </div>

        {/* Experience */}
        <div style={{ marginTop: 24 }}>
          <SectionTitle title="경력" en="Experience" />
          <div style={{ marginTop: 12, display:'grid', gap: 10 }}>
            <ExpRow logo="T" company="Toss" role="Sr. Frontend Engineer" period="2023.03 – 현재" desc="결제 UI 코어 팀 · Web Performance 리드 · Design System 오너"/>
            <ExpRow logo="K" company="Kakao Enterprise" role="Frontend Engineer" period="2020.05 – 2023.02" desc="B2B SaaS 대시보드 · 6개 프로덕트 컴포넌트 공유"/>
            <ExpRow logo="L" company="LINE" role="Frontend Engineer" period="2019.01 – 2020.04" desc="LINE 공식 계정 콘솔 · React SPA 마이그레이션"/>
          </div>
        </div>
      </div>

      {/* Right rail */}
      <aside style={{ borderLeft: '1px solid var(--border-default)', padding: 20, overflow: 'auto', background: 'var(--neutral-25)' }}>
        <div style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500 }}>다음 액션</div>
        <div style={{ display:'grid', gap: 8, marginTop: 10 }}>
          <NextAction icon="calendar" title="2차 인터뷰 예약" body="박준영 · 이번 주" />
          <NextAction icon="send" title="과제 발송" body="Frontend Take-home" />
          <NextAction icon="star" title="레퍼런스 체크 요청" body="이전 매니저 · 2명" />
        </div>

        <div style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500, marginTop: 24 }}>담당팀</div>
        <div style={{ marginTop: 10, display:'flex', flexDirection:'column', gap: 8 }}>
          {[['한지현','Recruiter Lead',0],['박준영','Hiring Manager',1],['정예린','Interviewer',2]].map(([n,r,t]) => (
            <div key={n} style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <Avatar name={n} tone={t} size={30} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{n}</div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{r}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500, marginTop: 24 }}>지원 정보</div>
        <div style={{ marginTop: 10, display:'grid', gap: 8, fontSize: 12.5 }}>
          <InfoRow label="지원일" value="2026.08.06" />
          <InfoRow label="소스" value="LinkedIn Referral" />
          <InfoRow label="희망 연봉" value="₩85,000,000+" />
          <InfoRow label="가능 시작일" value="2026.10.01" />
          <InfoRow label="지원자 ID" value="cand_9f2a1e" mono />
        </div>
      </aside>
    </div>
  );
}

function ScoreRing({ score }) {
  const r = 42, c = 2 * Math.PI * r;
  const off = c - (score/100) * c;
  return (
    <div style={{ position: 'relative', width: 110, height: 110 }}>
      <svg width="110" height="110" viewBox="0 0 110 110">
        <circle cx="55" cy="55" r={r} fill="none" stroke="#E4DAFF" strokeWidth="8"/>
        <circle cx="55" cy="55" r={r} fill="none" stroke="#7C55F2" strokeWidth="8" strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={off} transform="rotate(-90 55 55)"/>
      </svg>
      <div style={{ position:'absolute', inset: 0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
        <div style={{ fontFamily: 'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 30, fontWeight: 700, color: 'var(--violet-700)', letterSpacing:'-0.02em' }}>{score}</div>
        <div style={{ fontSize: 10, color: 'var(--violet-700)', fontWeight: 600, letterSpacing:'0.06em', textTransform:'uppercase' }}>Match</div>
      </div>
    </div>
  );
}
function ScoreChip({ label, value }) {
  return (
    <span style={{
      background: 'rgba(255,255,255,0.7)', border: '1px solid #E4DAFF',
      padding: '4px 10px', borderRadius: 999, fontSize: 12,
      color: 'var(--violet-700)', display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 500,
    }}>
      {label} <b style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums' }}>{value}</b>
    </span>
  );
}
function SectionTitle({ title, en }) {
  return (
    <div style={{ display:'flex', alignItems:'baseline', gap: 8 }}>
      <h3 style={{ fontSize: 15, fontWeight: 600, margin: 0 }}>{title}</h3>
      <span style={{ fontSize: 11.5, color: 'var(--fg-3)', fontFamily: 'var(--font-latin)', letterSpacing:'0.04em', textTransform:'uppercase' }}>{en}</span>
    </div>
  );
}
function SkillRow({ skill, level, need, match }) {
  return (
    <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr auto', alignItems:'center', gap: 10, padding:'8px 12px', border:'1px solid var(--border-subtle)', borderRadius: 8, background: 'var(--neutral-0)' }}>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{skill}</div>
      <div style={{ display:'flex', gap: 3 }}>
        {[1,2,3,4,5].map(i => (
          <div key={i} style={{
            width: 12, height: 6, borderRadius: 2,
            background: i <= level ? 'var(--brand-500)' : 'var(--neutral-200)',
          }}/>
        ))}
      </div>
      <span style={{ fontSize: 11, color: match ? 'var(--success-600)' : 'var(--warning-600)', display:'inline-flex', alignItems:'center', gap: 3 }}>
        <Icon name={match ? 'check' : 'alert-circle'} size={12}/>
        {match ? '충족' : `요구 ${need}`}
      </span>
    </div>
  );
}
function ExpRow({ logo, company, role, period, desc }) {
  return (
    <div style={{ display:'grid', gridTemplateColumns:'40px 1fr auto', gap: 12, padding: 12, border:'1px solid var(--border-subtle)', borderRadius: 10, background: 'var(--neutral-0)' }}>
      <div style={{ width: 40, height: 40, borderRadius: 8, background: 'var(--neutral-100)', display:'inline-flex', alignItems:'center', justifyContent:'center', fontWeight: 700, color: 'var(--fg-2)' }}>{logo}</div>
      <div>
        <div style={{ display:'flex', gap: 8, alignItems:'baseline' }}>
          <span style={{ fontSize: 14, fontWeight: 600 }}>{company}</span>
          <span style={{ fontSize: 12.5, color: 'var(--fg-2)' }}>{role}</span>
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--fg-3)', marginTop: 4 }}>{desc}</div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--fg-3)', whiteSpace: 'nowrap' }}>{period}</div>
    </div>
  );
}
function NextAction({ icon, title, body }) {
  return (
    <div style={{ display:'flex', gap: 10, padding: 10, border:'1px solid var(--border-default)', borderRadius: 8, background: 'var(--neutral-0)', cursor: 'pointer' }}>
      <span style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--brand-50)', color: 'var(--brand-600)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
        <Icon name={icon} size={15} />
      </span>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5, fontWeight: 600 }}>{title}</div>
        <div style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{body}</div>
      </div>
    </div>
  );
}
function InfoRow({ label, value, mono }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between' }}>
      <span style={{ color: 'var(--fg-3)' }}>{label}</span>
      <span style={{ fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)', fontWeight: 500 }}>{value}</span>
    </div>
  );
}

window.ApplicantProfile = ApplicantProfile;