function Dashboard() {
  return (
    <div style={{ padding: '24px 28px', display: 'grid', gap: 20, maxWidth: 1280, margin: '0 auto' }}>
      {/* Greeting */}
      <div>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em' }}>안녕하세요, 지현님</div>
        <div style={{ fontSize: 13.5, color: 'var(--fg-2)', marginTop: 4 }}>
          이번 주 신규 지원 <b style={{color:'var(--fg-1)'}}>8건</b>, 검토 대기 <b style={{color:'var(--fg-1)'}}>4건</b>이 있어요. AI 매칭 상위 후보 3명이 준비되어 있습니다.
        </div>
      </div>

      {/* Metric cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <MetricCard label="총 지원자" value="1,247" delta="+12.4%" trend="up" icon="users"/>
        <MetricCard label="이번 주 신규" value="42" delta="+8" trend="up" icon="user-plus"/>
        <MetricCard label="평균 응답 시간" value="1.2일" delta="-0.3일" trend="up" icon="clock"/>
        <MetricCard label="합격률" value="18.5%" delta="+2.1%" trend="up" icon="check-circle-2"/>
      </div>

      {/* Main grid: pipeline stages + AI insights */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 20 }}>
        <Card style={{ padding: 0 }}>
          <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)', display:'flex', alignItems:'center', justifyContent:'space-between', gap: 12 }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap' }}>파이프라인 현황</div>
              <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 2, whiteSpace: 'nowrap' }}>단계별 지원자 분포 · 이번 달</div>
            </div>
            <Badge tone="brand">이번 달</Badge>
          </div>
          <PipelineFunnel />
        </Card>

        <Card ai style={{ padding: 0 }}>
          <div style={{ padding: '14px 18px', display:'flex', alignItems:'center', gap: 6, color: 'var(--violet-700)', fontWeight: 600, fontSize: 13 }}>
            <AISparkle size={15} />
            AI CAREER INTELLIGENCE
          </div>
          <div style={{ padding: '0 18px 18px', display:'grid', gap: 12 }}>
            <InsightItem
              title="상위 매칭 3명이 오늘 업데이트했어요"
              body="시니어 프론트엔드 포지션에 매칭 90+ 후보들이 이력서를 갱신했습니다."
              cta="후보 보기" />
            <InsightItem
              title="Data Analyst 공고의 응답률이 낮아요"
              body="게시 후 5일간 지원 3건. 채용공고 문구를 개선하거나 소싱을 시작해보세요."
              cta="공고 편집" tone="warn" />
            <InsightItem
              title="이번 주 면접 12건 · 리허설 자료 준비됨"
              body="AI가 각 지원자별로 예상 질문과 이력서 요약을 준비했어요."
              cta="일정 열기" />
          </div>
        </Card>
      </div>

      {/* Upcoming interviews */}
      <Card style={{ padding: 0 }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)', display:'flex', alignItems:'center', justifyContent:'space-between', gap: 12 }}>
          <div style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap' }}>다가오는 면접</div>
          <button style={{ border:'none', background:'transparent', color: 'var(--brand-600)', fontSize: 12.5, fontWeight: 500, cursor:'pointer', whiteSpace: 'nowrap', flexShrink: 0 }}>전체 일정 →</button>
        </div>
        <UpcomingInterviews />
      </Card>
    </div>
  );
}

function MetricCard({ label, value, delta, trend, icon }) {
  const up = trend === 'up';
  return (
    <Card hoverable>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 500 }}>{label}</div>
        <span style={{ color: 'var(--fg-3)' }}><Icon name={icon} size={16} /></span>
      </div>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginTop: 10, gap: 8 }}>
        <div style={{ fontFamily: 'var(--font-latin)', fontVariantNumeric: 'tabular-nums', fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>{value}</div>
        <div style={{ fontSize: 12, fontWeight: 600, color: up ? 'var(--success-600)' : 'var(--danger-600)', display:'inline-flex', alignItems:'center', gap: 2, whiteSpace: 'nowrap', flexShrink: 0 }}>
          <Icon name={up ? 'trending-up' : 'trending-down'} size={13} />
          {delta}
        </div>
      </div>
    </Card>
  );
}

function PipelineFunnel() {
  const stages = [
    { label: '서류 검토', count: 128, color: '#6B7383' },
    { label: '1차 인터뷰', count: 46, color: '#0E86C8' },
    { label: '2차 인터뷰', count: 22, color: '#7C55F2' },
    { label: '제안 검토', count: 9, color: '#E39514' },
    { label: '합격', count: 5, color: '#17A34A' },
  ];
  const max = 128;
  return (
    <div style={{ padding: 18, display: 'grid', gap: 10 }}>
      {stages.map(s => (
        <div key={s.label} style={{ display:'grid', gridTemplateColumns:'110px 1fr 42px', gap: 12, alignItems: 'center' }}>
          <div style={{ fontSize: 12.5, color: 'var(--fg-2)' }}>{s.label}</div>
          <div style={{ height: 22, background: 'var(--neutral-100)', borderRadius: 5, overflow:'hidden', position:'relative' }}>
            <div style={{ width: `${(s.count/max)*100}%`, height: '100%', background: s.color, borderRadius: 5, transition:'width 300ms var(--ease-out)' }} />
          </div>
          <div style={{ fontFamily: 'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 13, fontWeight: 600, textAlign: 'right' }}>{s.count}</div>
        </div>
      ))}
    </div>
  );
}

function InsightItem({ title, body, cta, tone = 'violet' }) {
  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: 4, lineHeight: 1.5 }}>{body}</div>
      <button style={{
        marginTop: 10, border:'none', cursor:'pointer',
        background: 'transparent', color: tone === 'warn' ? 'var(--warning-700)' : 'var(--violet-700)',
        fontWeight: 600, fontSize: 12, padding: 0,
      }}>{cta} →</button>
    </div>
  );
}

function UpcomingInterviews() {
  const rows = [
    { name: '한지현', role: 'Sr. Frontend Engineer', when: '오늘 14:00', interviewer: '박준영', stage: '2차 인터뷰', score: 92, tone: 'violet' },
    { name: '문서연', role: 'Product Designer', when: '오늘 16:30', interviewer: '김민수', stage: '1차 인터뷰', score: 87, tone: 'info' },
    { name: '도경훈', role: 'Data Analyst', when: '내일 10:00', interviewer: '정예린', stage: '2차 인터뷰', score: 95, tone: 'violet' },
    { name: '오세진', role: 'Backend Engineer', when: '내일 14:00', interviewer: '박준영', stage: '1차 인터뷰', score: 84, tone: 'info' },
  ];
  return (
    <div>
      {rows.map((r,i) => (
        <div key={i} style={{
          display:'grid', gridTemplateColumns:'40px 1.4fr 1fr 1fr 90px 90px',
          alignItems:'center', gap: 12, padding: '10px 18px',
          borderBottom: i < rows.length - 1 ? '1px solid var(--border-subtle)' : 'none',
        }}>
          <Avatar name={r.name} tone={i} size={32} />
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{r.name}</div>
            <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>{r.role}</div>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--fg-2)' }}>{r.when}</div>
          <div style={{ fontSize: 12.5, color: 'var(--fg-2)' }}>면접관 · {r.interviewer}</div>
          <Badge tone={r.tone} dot>{r.stage}</Badge>
          <div style={{ display:'flex', alignItems:'center', gap: 4, color: 'var(--violet-700)', fontWeight: 600, fontSize: 12.5, justifyContent:'flex-end' }}>
            <AISparkle size={12} />
            <span style={{ fontFamily: 'var(--font-latin)', fontVariantNumeric:'tabular-nums' }}>{r.score}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

window.Dashboard = Dashboard;