function Landing({ onNavigate }) {
  return (
    <div>
      {/* Hero */}
      <section style={{
        background: 'radial-gradient(120% 90% at 20% 0%, #1F5FFF 0%, #0A2E96 55%, #06133F 100%)',
        color: '#fff',
        padding: '80px 40px 100px',
        position: 'relative',
        overflow: 'hidden',
      }}>
        {/* Decorative glow */}
        <div style={{
          position: 'absolute', top: '-20%', right: '-10%',
          width: 520, height: 520,
          background: 'radial-gradient(circle, rgba(124,85,242,0.35), transparent 70%)',
          borderRadius: 999, pointerEvents: 'none',
        }}/>
        <div style={{ maxWidth: 1000, margin: '0 auto', position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '6px 12px', borderRadius: 999,
            background: 'rgba(255,255,255,0.10)',
            border: '1px solid rgba(180,154,255,0.28)',
            color: '#B49AFF', fontSize: 12, fontWeight: 600, letterSpacing: '0.02em',
            whiteSpace: 'nowrap', width: 'fit-content',
          }}>
            <Icon name="sparkles" size={12} stroke={2.4}/>
            AI 면접 실전 & 분석
          </div>
          <h1 style={{
            fontSize: 76, fontWeight: 800, letterSpacing: '-0.035em',
            lineHeight: 1.02, margin: '20px 0 0',
          }}>
            점프,<br/>
            <span style={{
              background: 'linear-gradient(90deg, #6EA0FF 0%, #B49AFF 100%)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>누리잡(JOB)!</span>
          </h1>
          <p style={{ fontSize: 18, color: '#D0E0FF', margin: '24px 0 0', maxWidth: 560, lineHeight: 1.55 }}>
            AI와 함께 실전 면접을 연습하고, 답변을 데이터로 분석하세요. 다음 면접은 준비된 상태로.
          </p>
          <div style={{ display:'flex', gap: 10, marginTop: 34 }}>
            <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNavigate('jobs')}>지금 모의 면접 시작</Button>
            <button style={{
              background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.22)',
              color: '#fff', fontSize: 15, fontWeight: 600, padding:'13px 22px', borderRadius: 8, cursor:'pointer',
              display:'inline-flex', alignItems:'center', gap: 6, whiteSpace: 'nowrap',
            }}>2분 소개 영상 <Icon name="play-circle" size={16}/></button>
          </div>
          <div style={{ display: 'flex', gap: 44, marginTop: 60, flexWrap: 'wrap' }}>
            <StatItem value="14만+" label="누적 모의 면접" />
            <StatItem value="87%" label="합격률 향상" />
            <StatItem value="4.8" label="사용자 평점" />
            <StatItem value="42" label="지원 가능 공고" />
          </div>
        </div>
      </section>

      {/* How it works — 3 steps */}
      <section style={{ padding: '80px 40px', maxWidth: 1080, margin: '0 auto' }}>
        <TagLine>HOW IT WORKS</TagLine>
        <h2 style={{ fontSize: 34, fontWeight: 700, letterSpacing:'-0.02em', margin: '10px 0 40px', maxWidth: 820, wordBreak: 'keep-all' }}>
          진짜 면접처럼, 진짜 데이터로 준비하세요
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          <ValueCard step="01" icon="video" title="AI 모의 면접" desc="실제 채용공고의 JD 기반으로 예상 질문을 생성. 카메라 켜고 실전처럼 답변하세요."/>
          <ValueCard step="02" icon="activity" title="답변 분석" desc="말하기 속도, 시선 처리, 답변 구조, 키워드 매칭까지. 사람이 놓치는 디테일을 AI가 잡아냅니다."/>
          <ValueCard step="03" icon="trending-up" title="개선 & 재도전" desc="약점을 짚어 다시 연습. 준비도 점수가 오르면 실제 지원 버튼이 열립니다."/>
        </div>
      </section>

      {/* Featured jobs */}
      <section style={{ padding: '20px 40px 80px', maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ display:'flex', alignItems:'end', justifyContent:'space-between', marginBottom: 24, gap: 20 }}>
          <div style={{ minWidth: 0 }}>
            <TagLine>OPEN POSITIONS</TagLine>
            <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing:'-0.02em', margin: '10px 0 0', wordBreak: 'keep-all' }}>지금 채용 중인 포지션</h2>
          </div>
          <button onClick={()=>onNavigate('jobs')} style={{ background:'none', border:'none', cursor:'pointer', color:'var(--brand-600)', fontWeight: 600, fontSize: 14, display:'inline-flex', alignItems:'center', gap:4, whiteSpace:'nowrap', flexShrink: 0 }}>
            전체 42개 보기 <Icon name="arrow-right" size={14}/>
          </button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
          {[
            { title:'Sr. Frontend Engineer', dept:'Engineering', loc:'Seoul · Remote OK', tag:'Sr' },
            { title:'Product Designer', dept:'Design', loc:'Seoul', tag:'Mid' },
            { title:'Data Analyst', dept:'Data', loc:'Seoul · Remote OK', tag:'Jr–Mid' },
            { title:'Sr. Backend Engineer', dept:'Engineering', loc:'Seoul', tag:'Sr' },
          ].map((j,i) => (
            <div key={i} onClick={()=>onNavigate('jobDetail')} style={{
              padding: 20, background: 'var(--neutral-0)', border: '1px solid var(--border-default)',
              borderRadius: 12, cursor:'pointer', transition:'all 120ms',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor='var(--brand-300)'; e.currentTarget.style.boxShadow='var(--shadow-md)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor='var(--border-default)'; e.currentTarget.style.boxShadow='none'; }}>
              <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                <span style={{ fontSize: 11.5, color: 'var(--brand-700)', background:'var(--brand-50)', padding:'2px 8px', borderRadius: 999, fontWeight: 600 }}>{j.dept}</span>
                <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{j.tag}</span>
              </div>
              <div style={{ fontSize: 17, fontWeight: 700, letterSpacing:'-0.01em', marginTop: 10 }}>{j.title}</div>
              <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 6, display:'inline-flex', alignItems:'center', gap: 4 }}>
                <Icon name="map-pin" size={12}/>{j.loc}
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

function StatItem({ value, label }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 36, fontWeight: 700, letterSpacing:'-0.02em', color:'#fff' }}>{value}</div>
      <div style={{ fontSize: 12.5, color: '#A3C4FF', letterSpacing:'0.04em', textTransform:'uppercase', marginTop: 4, whiteSpace: 'nowrap' }}>{label}</div>
    </div>
  );
}
function ValueCard({ step, icon, title, desc }) {
  return (
    <div style={{ padding: 24, background: 'var(--neutral-0)', border: '1px solid var(--border-default)', borderRadius: 14, position: 'relative' }}>
      {step && (
        <div style={{
          position: 'absolute', top: 20, right: 22,
          fontFamily: 'var(--font-latin)', fontVariantNumeric: 'tabular-nums',
          fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em',
          color: 'var(--brand-100)', lineHeight: 1,
        }}>{step}</div>
      )}
      <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--brand-50)', color:'var(--brand-600)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
        <Icon name={icon} size={22} stroke={2} />
      </div>
      <div style={{ fontSize: 18, fontWeight: 700, letterSpacing:'-0.01em', marginTop: 18, wordBreak: 'keep-all' }}>{title}</div>
      <div style={{ fontSize: 13.5, color: 'var(--fg-2)', marginTop: 8, lineHeight: 1.6, wordBreak: 'keep-all' }}>{desc}</div>
    </div>
  );
}

window.Landing = Landing;