function MockInterview({ onNavigate }) {
  const [phase, setPhase] = useState('recording'); // setup → recording → analyzing → result
  const [elapsed, setElapsed] = useState(87); // seconds into current answer

  useEffect(() => {
    if (phase !== 'recording') return;
    const t = setInterval(() => setElapsed(e => e + 1), 1000);
    return () => clearInterval(t);
  }, [phase]);

  return (
    <div style={{
      background: 'radial-gradient(120% 90% at 20% 0%, #0A2E96 0%, #06133F 60%, #030820 100%)',
      minHeight: 'calc(100vh - 68px)', color: '#fff',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '24px 40px 60px' }}>

        {/* Session header */}
        <div style={{ display:'flex', alignItems:'center', gap: 12, marginBottom: 20 }}>
          <button onClick={()=>onNavigate('jobs')} style={{
            background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.14)',
            color:'#D0E0FF', padding:'6px 10px', borderRadius: 8, cursor:'pointer',
            fontSize: 12, display:'inline-flex', alignItems:'center', gap: 5, whiteSpace:'nowrap',
          }}><Icon name="arrow-left" size={13}/>세션 종료</button>
          <div>
            <div style={{ fontSize: 11.5, color:'#A3C4FF', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 600 }}>Mock Interview Session</div>
            <div style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>Sr. Frontend Engineer · Toss</div>
          </div>
          <div style={{ flex: 1 }}/>
          <div style={{
            padding: '6px 10px', background: 'rgba(220,46,46,0.16)', border: '1px solid rgba(220,46,46,0.35)',
            borderRadius: 999, fontSize: 12, fontWeight: 600, display:'inline-flex', alignItems:'center', gap: 6, color: '#FFB7B7',
          }}>
            <span style={{ width: 8, height: 8, background: '#FF4444', borderRadius: 999, animation: 'pulse 1.4s infinite' }}/>
            REC · 03:24
          </div>
          <div style={{
            padding: '6px 10px', background: 'rgba(31,95,255,0.14)', border: '1px solid rgba(110,160,255,0.3)',
            borderRadius: 999, fontSize: 12, fontWeight: 600, color: '#A3C4FF',
          }}>질문 3 / 5</div>
        </div>

        {/* Main grid */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 340px', gap: 20 }}>

          {/* Left: video + question */}
          <div style={{ display:'grid', gap: 16 }}>
            {/* Camera view */}
            <div style={{
              position:'relative', aspectRatio:'16 / 10',
              background: 'linear-gradient(135deg, #1a2340 0%, #0a1428 100%)',
              borderRadius: 16, overflow:'hidden',
              border: '1px solid rgba(110,160,255,0.2)',
            }}>
              {/* Mock person silhouette */}
              <div style={{
                position:'absolute', inset: 0, display:'flex', alignItems:'flex-end', justifyContent:'center',
              }}>
                <svg width="55%" height="90%" viewBox="0 0 200 200" style={{ opacity: 0.28 }}>
                  <circle cx="100" cy="70" r="34" fill="#A3C4FF"/>
                  <path d="M40 200 Q40 130 100 130 Q160 130 160 200 Z" fill="#A3C4FF"/>
                </svg>
              </div>

              {/* Face detection frame */}
              <svg style={{ position:'absolute', top:'22%', left:'38%', width: '24%', height: '35%' }} viewBox="0 0 100 140">
                <path d="M0 20 L0 0 L20 0 M80 0 L100 0 L100 20 M100 120 L100 140 L80 140 M20 140 L0 140 L0 120" fill="none" stroke="#6EA0FF" strokeWidth="2.5"/>
              </svg>

              {/* Overlay HUD */}
              <div style={{ position:'absolute', top: 14, left: 14, display:'flex', gap: 6 }}>
                <span style={{ padding:'3px 8px', background:'rgba(0,0,0,0.4)', backdropFilter:'blur(4px)', color:'#fff', fontSize: 10.5, fontWeight: 600, borderRadius: 4, letterSpacing:'0.06em' }}>1280×720 · 60fps</span>
                <span style={{ padding:'3px 8px', background:'rgba(23,163,74,0.24)', color:'#7AE29B', fontSize: 10.5, fontWeight: 600, borderRadius: 4, display:'inline-flex', alignItems:'center', gap: 4 }}>
                  <span style={{ width: 6, height: 6, background:'#17A34A', borderRadius:999 }}/>
                  카메라 · 마이크 정상
                </span>
              </div>
              <div style={{ position:'absolute', bottom: 14, left: 14, right: 14, display:'flex', alignItems:'end', justifyContent:'space-between', gap: 12 }}>
                <div>
                  <div style={{ fontSize: 11, color:'#A3C4FF', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 600 }}>Live coaching</div>
                  <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4, color:'#fff' }}>
                    <Icon name="eye" size={13} style={{marginRight: 4, verticalAlign:'-2px'}}/>
                    시선 처리 좋아요 · 계속 카메라를 바라보세요
                  </div>
                </div>
                {/* audio wave */}
                <div style={{ display:'flex', alignItems:'end', gap: 3, height: 32, padding: '0 4px' }}>
                  {[36, 68, 45, 82, 55, 74, 42, 60, 38, 70, 48, 84, 52, 66].map((h,i)=>(
                    <span key={i} style={{
                      width: 3, height: `${h}%`, background:'#6EA0FF',
                      borderRadius: 2, opacity: 0.85,
                    }}/>
                  ))}
                </div>
              </div>
            </div>

            {/* Question card */}
            <div style={{
              background:'rgba(255,255,255,0.04)', backdropFilter:'blur(8px)',
              border:'1px solid rgba(110,160,255,0.2)', borderRadius: 14, padding: 20,
            }}>
              <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 10 }}>
                <span style={{
                  width: 24, height: 24, borderRadius: 999,
                  background:'linear-gradient(135deg, #1F5FFF, #7C55F2)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                  fontSize: 12, fontWeight: 700, fontFamily:'var(--font-latin)',
                }}>Q3</span>
                <span style={{ fontSize: 11.5, color:'#A3C4FF', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 600 }}>기술 심층 · 예상 답변 시간 2분</span>
              </div>
              <div style={{ fontSize: 20, fontWeight: 600, lineHeight: 1.45, letterSpacing:'-0.01em' }}>
                최근 Web Performance 개선 프로젝트에서 <span style={{ background:'linear-gradient(90deg,#6EA0FF,#B49AFF)', WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent' }}>LCP를 어떻게 측정하고 어떤 전략으로 개선</span>했는지 구체적인 사례를 들어 설명해주세요.
              </div>
              <div style={{ display:'flex', gap: 8, marginTop: 14, flexWrap:'wrap' }}>
                <KeyChip>STAR 구조 권장</KeyChip>
                <KeyChip>지표 · 수치 포함</KeyChip>
                <KeyChip>2인칭 → 1인칭 전환</KeyChip>
              </div>
            </div>

            {/* Control bar */}
            <div style={{
              display:'flex', alignItems:'center', gap: 10,
              padding: 14, background:'rgba(255,255,255,0.04)', borderRadius: 14,
              border:'1px solid rgba(110,160,255,0.16)',
            }}>
              <ControlBtn icon="mic" label="음소거"/>
              <ControlBtn icon="video" label="카메라"/>
              <ControlBtn icon="captions" label="자막"/>
              <div style={{ flex: 1 }}/>
              <button style={{
                padding:'10px 20px', background: 'transparent', border:'1px solid rgba(255,255,255,0.22)',
                color:'#fff', borderRadius: 10, cursor:'pointer', fontSize: 13.5, fontWeight: 600, display:'inline-flex', alignItems:'center', gap: 6,
              }}><Icon name="skip-forward" size={14}/>답변 건너뛰기</button>
              <button style={{
                padding:'10px 20px', background:'#DC2E2E', border:'1px solid #DC2E2E',
                color:'#fff', borderRadius: 10, cursor:'pointer', fontSize: 13.5, fontWeight: 700, display:'inline-flex', alignItems:'center', gap: 6,
              }}><span style={{ width: 10, height: 10, background:'#fff', borderRadius: 2 }}/>답변 종료</button>
            </div>
          </div>

          {/* Right: live analysis panel */}
          <aside style={{ display:'grid', gap: 14, alignContent:'start' }}>
            {/* Live metrics */}
            <div style={{
              background:'rgba(255,255,255,0.04)', backdropFilter:'blur(8px)',
              border:'1px solid rgba(110,160,255,0.2)', borderRadius: 14, padding: 18,
            }}>
              <div style={{ display:'flex', alignItems:'center', gap: 6, color:'#B49AFF', fontSize: 11, fontWeight: 700, letterSpacing:'0.06em', textTransform:'uppercase', whiteSpace: 'nowrap' }}>
                <Icon name="sparkles" size={13} stroke={2.4}/>
                LIVE AI ANALYSIS
              </div>
              <div style={{ fontSize: 13, color:'#A3C4FF', marginTop: 4, whiteSpace: 'nowrap' }}>답변 중 실시간 코칭</div>

              <div style={{ display:'grid', gap: 12, marginTop: 16 }}>
                <LiveMetric label="말하기 속도" value="적정" hint="분당 178단어" tone="good"/>
                <LiveMetric label="시선 처리" value="양호" hint="82% 카메라 응시" tone="good"/>
                <LiveMetric label="채움어 사용" value="주의" hint="'음..' 6회 · 지금 3회" tone="warn"/>
                <LiveMetric label="답변 구조" value="STAR ✓" hint="상황→과제→행동 확인" tone="good"/>
                <LiveMetric label="핵심 키워드" value="4 / 6" hint="LCP · 이미지 지연로딩 감지" tone="progress" progress={67}/>
              </div>
            </div>

            {/* Timer + progress */}
            <div style={{
              background:'linear-gradient(135deg, rgba(31,95,255,0.14), rgba(124,85,242,0.12))',
              border:'1px solid rgba(110,160,255,0.28)', borderRadius: 14, padding: 18,
            }}>
              <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between' }}>
                <span style={{ fontSize: 11.5, color:'#A3C4FF', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 600 }}>현재 답변 시간</span>
                <span style={{ fontSize: 10.5, color:'#D0E0FF' }}>권장 2:00</span>
              </div>
              <div style={{ display:'flex', alignItems:'baseline', gap: 6, marginTop: 6 }}>
                <span style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 40, fontWeight: 800, letterSpacing:'-0.03em', lineHeight: 1 }}>
                  {String(Math.floor(elapsed/60)).padStart(2,'0')}:{String(elapsed%60).padStart(2,'0')}
                </span>
                <span style={{ color:'#A3C4FF', fontSize: 13 }}>/ 02:00</span>
              </div>
              <div style={{ height: 6, background:'rgba(255,255,255,0.08)', borderRadius: 999, marginTop: 12, overflow:'hidden' }}>
                <div style={{ width: `${Math.min(elapsed/120*100, 100)}%`, height: '100%', background:'linear-gradient(90deg, #6EA0FF, #B49AFF)', borderRadius: 999, transition: 'width 500ms linear' }}/>
              </div>
            </div>

            {/* Session progress */}
            <div style={{
              background:'rgba(255,255,255,0.04)',
              border:'1px solid rgba(110,160,255,0.16)', borderRadius: 14, padding: 16,
            }}>
              <div style={{ fontSize: 11.5, color:'#A3C4FF', letterSpacing:'0.06em', textTransform:'uppercase', fontWeight: 600, marginBottom: 10 }}>전체 진행률</div>
              <div style={{ display:'grid', gap: 6 }}>
                <QRow n={1} label="자기소개" done score={88}/>
                <QRow n={2} label="지원 동기" done score={82}/>
                <QRow n={3} label="Web Performance 사례" active/>
                <QRow n={4} label="시스템 설계 질문" upcoming/>
                <QRow n={5} label="역질문" upcoming/>
              </div>
            </div>
          </aside>
        </div>
      </div>

      <style>{`
        @keyframes pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.4; transform: scale(0.85); }
        }
      `}</style>
    </div>
  );
}

function KeyChip({ children }) {
  return (
    <span style={{
      padding:'4px 10px', background:'rgba(110,160,255,0.12)',
      border:'1px solid rgba(110,160,255,0.28)', borderRadius: 999,
      fontSize: 11.5, fontWeight: 500, color:'#D0E0FF', whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

function ControlBtn({ icon, label }) {
  return (
    <button style={{
      display:'inline-flex', flexDirection:'column', alignItems:'center', gap: 3,
      padding:'8px 14px', background:'rgba(255,255,255,0.06)',
      border:'1px solid rgba(255,255,255,0.14)', borderRadius: 10, cursor:'pointer',
      color:'#fff', minWidth: 68, whiteSpace: 'nowrap',
    }}>
      <Icon name={icon} size={16}/>
      <span style={{ fontSize: 10.5, color:'#A3C4FF' }}>{label}</span>
    </button>
  );
}

function LiveMetric({ label, value, hint, tone, progress }) {
  const colors = {
    good: '#7AE29B', warn: '#FFC24D', bad: '#FF6B6B', progress: '#B49AFF',
  };
  const c = colors[tone] || '#D0E0FF';
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap: 8 }}>
        <span style={{ fontSize: 12.5, color:'#D0E0FF', whiteSpace:'nowrap' }}>{label}</span>
        <span style={{ fontSize: 12.5, color: c, fontWeight: 700, whiteSpace:'nowrap' }}>{value}</span>
      </div>
      {progress != null ? (
        <div style={{ height: 4, background:'rgba(255,255,255,0.08)', borderRadius: 999, marginTop: 6, overflow:'hidden' }}>
          <div style={{ width: `${progress}%`, height:'100%', background: c, borderRadius: 999 }}/>
        </div>
      ) : null}
      <div style={{ fontSize: 10.5, color:'#8AA5D6', marginTop: 4 }}>{hint}</div>
    </div>
  );
}

function QRow({ n, label, done, active, upcoming, score }) {
  const bg = done ? 'rgba(23,163,74,0.16)' : active ? 'rgba(31,95,255,0.18)' : 'transparent';
  const dotBg = done ? '#7AE29B' : active ? '#6EA0FF' : 'rgba(255,255,255,0.14)';
  const dotFg = done || active ? '#06133F' : '#8AA5D6';
  return (
    <div style={{ display:'grid', gridTemplateColumns:'22px 1fr auto', gap: 8, alignItems:'center', padding: '6px 8px', background: bg, borderRadius: 6 }}>
      <span style={{
        width: 22, height: 22, borderRadius: 999, background: dotBg, color: dotFg,
        display:'inline-flex', alignItems:'center', justifyContent:'center',
        fontSize: 10.5, fontWeight: 700, fontFamily:'var(--font-latin)',
      }}>{done ? '✓' : n}</span>
      <span style={{ fontSize: 12.5, color: upcoming ? '#8AA5D6' : '#fff', fontWeight: active ? 600 : 400, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{label}</span>
      {score && <span style={{ fontFamily:'var(--font-latin)', fontVariantNumeric:'tabular-nums', fontSize: 11.5, color:'#7AE29B', fontWeight: 700 }}>{score}</span>}
      {active && <span style={{ fontSize: 10, color:'#6EA0FF', fontWeight: 600, letterSpacing:'0.06em', textTransform:'uppercase' }}>NOW</span>}
    </div>
  );
}

window.MockInterview = MockInterview;