function RestaurantDetail({ nav }) {
  const { Badge, Button } = window.SpotureDesignSystem_f7ad96;
  const rp = new URLSearchParams(location.search);
  const [big, setBig] = React.useState(rp.get('rphoto') != null && rp.get('rphoto') !== '' ? Number(rp.get('rphoto')) : null);
  const [menu, setMenu] = React.useState(rp.get('rmenu') || '전체');
  const [saved, setSaved] = React.useState(rp.get('rsaved') === '1');
  const [share, setShare] = React.useState(rp.get('rshare') === '1');
  const menus = ['전체', '순대국', '내장탕', '깍두기', '공기밥', '수육'];
  const photoMenu = ['순대국', '내장탕', '순대국', '깍두기', '수육', '공기밥', '순대국', '내장탕', '수육'];
  const photos = ['rd-1', 'rd-2', 'rd-3', 'rd-4', 'rd-5', 'rd-6', 'rd-7', 'rd-8', 'rd-9'];
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', background: 'var(--surface-ink)' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 240 }}><div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, background: '#2E2E2E' }}><i className="ti ti-photo" style={{ fontSize: 28, color: 'rgba(255,255,255,.34)' }}></i><span style={{ font: '600 12px/1 var(--font-family)', color: 'rgba(255,255,255,.34)' }}>사진</span></div></div>
      <div style={{ position: 'relative', flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 3, pointerEvents: 'none' }}>
        <div style={{ pointerEvents: 'auto' }}><StatusBar light /></div>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 20px 0', pointerEvents: 'auto' }}>
          <div onClick={() => nav('feed')} style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(26,26,26,.34)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><i className="ti ti-chevron-left" style={{ fontSize: 20, color: '#fff' }}></i></div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div onClick={() => setShare(true)} style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(26,26,26,.34)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><i className="ti ti-share-2" style={{ fontSize: 19, color: '#fff' }}></i></div>
            <div onClick={() => setSaved(v => !v)} title={saved ? '찜 해제' : '찜하기'} style={{ width: 44, height: 44, borderRadius: '50%', background: saved ? 'var(--text-accent)' : 'rgba(26,26,26,.34)', backdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><i className="ti ti-bookmark" style={{ fontSize: 19, color: '#fff' }}></i></div>
          </div>
        </div>
        </div>
        <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto' }}>
          <div style={{ height: 168 }}></div>
          <div style={{ minHeight: '100%', background: 'var(--bg-app)', borderRadius: 'var(--radius-sheet) var(--radius-sheet) 0 0', padding: '20px 0 0' }}>
            <div style={{ padding: '0 20px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ minWidth: 0 }}>
                  <span style={{ font: 'var(--text-title)', display: 'block', marginBottom: 5 }}>할매순대국 강남점</span>
                  <span style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)' }}>서울 강남구 강남대로 123 · 45m</span>
                </div>
                <span style={{ font: 'var(--text-body-strong)', background: 'var(--surface-1)', borderRadius: 999, padding: '8px 13px', display: 'inline-flex', alignItems: 'center', gap: 5, flexShrink: 0, boxShadow: 'var(--shadow-card)' }}><i className="ti ti-heart" style={{ fontSize: 13, color: 'var(--text-accent)' }}></i>642</span>
              </div>
              <div style={{ display: 'flex', gap: 6, margin: '14px 0 18px', flexWrap: 'wrap' }}>
                <Badge tone="accent">한식</Badge><Badge tone="neutral">순대국</Badge><Badge tone="success"><i className="ti ti-map-pin-check" style={{ fontSize: 12 }}></i>위치 확인됨</Badge>
              </div>
              <div style={{ display: 'flex', gap: 10, marginBottom: 20 }}>
                {[['128', '사진'], ['642', '좋아요'], ['9', '위치제보']].map(([n, l]) => (
                  <div key={l} style={{ flex: 1, background: 'var(--surface-1)', borderRadius: 'var(--radius-tile)', padding: '14px 12px', textAlign: 'center' }}>
                    <span style={{ font: 'var(--text-heading)', display: 'block' }}>{n}</span>
                    <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)' }}>{l}</span>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 10 }}>
                <span style={{ font: 'var(--text-body-strong)' }}>메뉴별 사진</span>
                <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>이웃이 남긴 메뉴 태그</span>
              </div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 16, overflowX: 'auto' }}>
                {menus.map(t => (
                  <span key={t} onClick={() => setMenu(t)} style={{ font: menu === t ? '600 14px/1 var(--font-family)' : '400 14px/1 var(--font-family)', color: menu === t ? '#fff' : 'var(--text-primary)', background: menu === t ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '12px 18px', cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0 }}>{t === '전체' ? t : '#' + t}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6, padding: '0 20px 104px' }}>
              {photos.map((id, i) => (menu === '전체' || photoMenu[i] === menu) ? <div key={id} onClick={() => setBig(i)} style={{ aspectRatio: '1', borderRadius: 14, overflow: 'hidden', background: 'var(--surface-1)', cursor: 'pointer', position: 'relative' }}><div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-2)' }}><i className="ti ti-photo" style={{ fontSize: 22, color: 'var(--text-muted)' }}></i></div><span style={{ position: 'absolute', left: 6, bottom: 6, font: 'var(--text-micro)', color: '#fff', background: 'rgba(26,26,26,.66)', borderRadius: 999, padding: '4px 8px' }}>#{photoMenu[i]}</span></div> : null)}
            </div>
            </div>
        </div>
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '30px 20px 20px', display: 'flex', gap: 8, background: 'linear-gradient(to top, var(--bg-app) 34%, rgba(255,255,255,0) 100%)', pointerEvents: 'none' }}>
              <span style={{ pointerEvents: 'auto', flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 6, font: '600 15px/1 var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-1)', border: '1px solid var(--border-strong)', borderRadius: 999, padding: '17px 20px', cursor: 'pointer' }}><i className="ti ti-navigation" style={{ fontSize: 17 }}></i>길찾기</span>
              <div style={{ pointerEvents: 'auto', flex: 1, minWidth: 0 }}><Button variant="accent" onClick={() => nav('upload')}><i className="ti ti-camera" style={{ fontSize: 18 }}></i>사진 올리기</Button></div>
        </div>
        {big != null && (
          <PostViewer
            post={{ user: ['국밥러버92', '밥순이', '야식탐험가', '동네박사', '떡볶이덕후', '카페인탐정', '순대국매니아', '역삼동토박이', '국밥마니아'][big] || '국밥러버92', place: '할매순대국 강남점', distance: '45m', meal: '저녁', category: '한식', likes: [128, 44, 91, 17, 210, 56, 73, 39, 61][big] || 0, comments: [24, 6, 12, 9, 38, 4, 11, 3, 7][big] || 0, imageId: 'rd-big-' + big, tags: { 0: [photoMenu[big]] } }}
            onClose={() => setBig(null)} onPlace={() => setBig(null)} />
        )}
        {share && <SharePlaceSheet place={{ name: '할매순대국 강남점', addr: '서울 강남구 강남대로 123' }} onClose={() => setShare(false)} />}
      </div>
    </div>
  );
}
window.RestaurantDetail = RestaurantDetail;