function MissionPosts({ nav }) {
  const [sort, setSort] = React.useState('최신순');
  const [menuPost, setMenuPost] = React.useState(null);
  const [open, setOpen] = React.useState(null);
  const items = [
    { user: '집밥연구소', menu: '스테이크 플래터', area: '역삼동', likes: 64, comments: 8, time: '20분 전' },
    { user: '주말요리사', menu: '부대찌개', area: '삼성동', likes: 41, comments: 5, time: '1시간 전' },
    { user: '야식탐험가', menu: '밀키트감바스', area: '논현동', likes: 88, comments: 12, time: '3시간 전' },
    { user: '분식마스터', menu: '로제떡볶이', area: '역삼동', likes: 33, comments: 4, time: '5시간 전' },
    { user: '동네박사', menu: '차돌짬뽕', area: '대치동', likes: 57, comments: 7, time: '어제' },
    { user: '국밥러버92', menu: '순대국밀키트', area: '역삼동', likes: 72, comments: 9, time: '어제' },
    { user: '카페인탐정', menu: '크림파스타', area: '신사동', likes: 25, comments: 2, time: '2일 전' },
    { user: '떡볶이덕후', menu: '마라탕', area: '역삼동', likes: 49, comments: 6, time: '2일 전' },
    { user: '밥순이', menu: '들깨수제비', area: '삼성동', likes: 18, comments: 1, time: '3일 전' }
  ];
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="이웃의 밀키트 인증샷" sub="이달의 밀키트 인증샷 · 참여자 1,284명" onBack={() => nav('feed')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', paddingBottom: 104 }}>
        <div onClick={() => nav('missionDetail')} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--bg-ink)', borderRadius: 'var(--radius-card)', padding: 14, margin: '0 20px 16px', cursor: 'pointer', boxShadow: 'var(--shadow-float)' }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className="ti ti-gift" style={{ fontSize: 19, color: 'var(--text-accent)' }}></i></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <span style={{ font: 'var(--text-body-strong)', color: '#fff', display: 'block', marginBottom: 2 }}>나도 참여하기</span>
            <span style={{ font: 'var(--text-small)', color: 'rgba(255,255,255,.62)' }}>사진 3장 · 남은 기간 6일</span>
          </div>
          <i className="ti ti-chevron-right" style={{ fontSize: 17, color: 'rgba(255,255,255,.5)', flexShrink: 0 }}></i>
        </div>
        <div style={{ display: 'flex', gap: 8, padding: '0 20px 16px', overflowX: 'auto' }}>
          {['최신순', '인기순', '내 주변'].map(t => (
            <span key={t} onClick={() => setSort(t)} style={{ flexShrink: 0, font: sort === t ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: sort === t ? '#fff' : 'var(--text-primary)', background: sort === t ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '11px 16px', cursor: 'pointer', boxShadow: 'var(--shadow-card)' }}>{t}</span>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gridAutoRows: 'min-content', gap: 10, padding: '0 20px' }}>
          {items.map((p, i) => (
            <div key={p.user} onClick={() => setOpen({ ...p, mission: true, mediaCount: 3, imageId: 'mpg-' + i })} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', overflow: 'hidden', boxShadow: 'var(--shadow-card)', cursor: 'pointer' }}>
              <div style={{ width: '100%', aspectRatio: '1', background: 'var(--surface-2)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i className="ti ti-photo" style={{ fontSize: 24, color: 'var(--text-muted)' }}></i>
                <span style={{ position: 'absolute', left: 8, top: 8, font: '700 10px/1 var(--font-family)', color: '#fff', background: 'var(--text-accent)', borderRadius: 999, padding: '5px 8px', letterSpacing: '.03em' }}>MISSION</span>
                <span style={{ position: 'absolute', right: 8, top: 8, font: 'var(--text-micro)', color: '#fff', background: 'rgba(26,26,26,.68)', borderRadius: 999, padding: '4px 8px' }}>1/3</span>
                <span style={{ position: 'absolute', left: 8, bottom: 8, font: 'var(--text-micro)', color: '#fff', background: 'rgba(26,26,26,.68)', borderRadius: 999, padding: '4px 8px' }}>#{p.menu}</span>
              </div>
              <div style={{ padding: '11px 12px 13px' }}>
                <span style={{ font: 'var(--text-small)', fontWeight: 600, display: 'block', marginBottom: 5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>@{p.user}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6 }}>
                  <i className="ti ti-map-pin" style={{ fontSize: 11, color: 'var(--text-secondary)', flexShrink: 0 }}></i>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)' }}>{p.area}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 3 }}><i className="ti ti-heart" style={{ fontSize: 10 }}></i>{p.likes}</span>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 3 }}><i className="ti ti-message-circle" style={{ fontSize: 10 }}></i>{p.comments}</span>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', marginLeft: 'auto' }}>{p.time}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'block', textAlign: 'center', margin: '14px 20px 0' }}>심사를 통과한 인증샷만 보여요</span>
      </div>
      {open && <PostViewer post={open} onClose={() => setOpen(null)} onComments={() => setOpen(null)} onMenu={() => { setMenuPost(open); setOpen(null); }} onPlace={() => setOpen(null)} />}
      {menuPost && <PostActionSheets post={menuPost} onClose={() => setMenuPost(null)} onDeleted={() => setMenuPost(null)} onEdit={(pp) => nav('editPost', { post: pp })} />}
    </div>
  );
}
window.MissionPosts = MissionPosts;