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 — shared-data 연동 + 업종(카테고리) 병행 표시 */}
      <FeaturedJobs onNavigate={onNavigate}/>
    </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>
  );
}

/* --------------------------------------------------------------
 * FeaturedJobs — 랜딩의 "지금 채용 중인 포지션" 섹션.
 * 관리자(ATS)가 등록한 실제 공고를 반영하고, 포지션 옆에 업종(카테고리)을
 * 한글(영어) 병행 표기합니다.
 * -------------------------------------------------------------- */
function FeaturedJobs({ onNavigate }) {
  const [jobs, setJobs] = React.useState(() => (window.CIS ? CIS.getJobs() : []));
  React.useEffect(() => {
    const t = setInterval(() => setJobs(CIS.getJobs()), 1500);
    return () => clearInterval(t);
  }, []);
  const active = jobs.filter(j => j.status === 'active');
  const featured = active.slice(0, 4);

  return (
    <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' }}>
            지금 채용 중인 포지션
            <span style={{ fontSize: 15, color: 'var(--fg-3)', fontWeight: 500, marginLeft: 8 }}>(Open Now)</span>
          </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 }}>
          전체 {active.length}개 보기 (View all) <Icon name="arrow-right" size={14}/>
        </button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {featured.map(j => {
          const ind = CIS.industryOf(j.industryId);
          const de = CIS.departmentOf(j.deptId);
          return (
            <div key={j.id} onClick={()=>onNavigate('jobDetail', { jobId: j.id })} 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'; }}>
              {/* 업종(카테고리) 상단 노출 — Industry chip */}
              <div style={{ display:'flex', alignItems:'center', gap: 6, flexWrap: 'wrap' }}>
                <span style={{
                  fontSize: 11.5, color: 'var(--brand-700)', background:'var(--brand-50)',
                  padding:'2px 8px', borderRadius: 999, fontWeight: 600,
                  display: 'inline-flex', alignItems: 'center', gap: 3,
                }}>
                  <Icon name="building-2" size={10}/>
                  {ind.ko}
                  <span style={{ opacity: 0.7, fontWeight: 500 }}>({ind.en})</span>
                </span>
                <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>{de.ko}</span>
                <span style={{ fontSize: 11.5, color: 'var(--fg-3)' }}>· {j.level}</span>
              </div>
              <div style={{ fontSize: 17, fontWeight: 700, letterSpacing:'-0.01em', marginTop: 10 }}>
                {j.title_ko || j.title}
                {j.title_en && (
                  <div style={{ fontSize: 13, color: 'var(--fg-3)', fontWeight: 500, marginTop: 2 }}>
                    {j.title_en}
                  </div>
                )}
              </div>
              <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 8, display:'inline-flex', alignItems:'center', gap: 4 }}>
                <Icon name="map-pin" size={12}/>{j.loc_ko || j.loc}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

window.Landing = Landing;