function HotPlaces({ nav }) {
  const params = new URLSearchParams(location.search);
  const [range, setRange] = React.useState('이번 주');
  const [cat, setCat] = React.useState('전체');
  const items = [
    { name: '할매순대국 강남점', category: '한식', distance: '210m', likes: 342, photos: 128, trend: 2, badge: '국밥' },
    { name: '멘야하나비 역삼', category: '일식', distance: '450m', likes: 288, photos: 96, trend: 0, badge: '라멘' },
    { name: '청년다방 역삼점', category: '분식', distance: '320m', likes: 251, photos: 84, trend: -1, badge: '떡볶이' },
    { name: '로스트림 로스터스', category: '카페', distance: '680m', likes: 214, photos: 143, trend: 5, badge: '핸드드립' },
    { name: '역삼 해장촌', category: '한식', distance: '890m', likes: 187, photos: 61, trend: 1, badge: '뼈해장국' },
    { name: '연돈부부', category: '일식', distance: '1.1km', likes: 166, photos: 52, trend: -2, badge: '돈까스' },
    { name: '을밀대 역삼', category: '한식', distance: '1.3km', likes: 142, photos: 47, trend: 0, badge: '냉면' },
    { name: '이문설농탕 역삼', category: '한식', distance: '1.5km', likes: 121, photos: 38, trend: 3, badge: '설렁탕' }
  ];
  const list = cat === '전체' ? items : items.filter(i => i.category === cat);
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="이 동네 핫한 곳" sub="강남구 역삼동 · 8월 2주차 기준" onBack={() => nav('feed')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', paddingBottom: 104 }}>
        <div style={{ display: 'flex', gap: 8, padding: '0 20px 12px', overflowX: 'auto' }}>
          {['이번 주', '이번 달', '역대'].map(t => (
            <span key={t} onClick={() => setRange(t)} style={{ flexShrink: 0, font: range === t ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: range === t ? '#fff' : 'var(--text-primary)', background: range === t ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '11px 16px', cursor: 'pointer', boxShadow: 'var(--shadow-card)' }}>{t}</span>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8, padding: '0 20px 16px', overflowX: 'auto' }}>
          {['전체', '한식', '일식', '분식', '카페'].map(t => (
            <span key={t} onClick={() => setCat(t)} style={{ flexShrink: 0, font: 'var(--text-small)', fontWeight: cat === t ? 600 : 400, color: cat === t ? 'var(--text-accent)' : 'var(--text-secondary)', background: cat === t ? 'var(--bg-accent)' : 'var(--surface-2)', border: '1px solid ' + (cat === t ? 'var(--text-accent)' : 'transparent'), borderRadius: 999, padding: '9px 14px', cursor: 'pointer' }}>{t}</span>
          ))}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '0 20px' }}>
          {list.map((r, i) => (
            <div key={r.name} onClick={() => nav('restaurantDetail')} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 12, boxShadow: 'var(--shadow-card)', cursor: 'pointer' }}>
              <div style={{ width: 30, flexShrink: 0, textAlign: 'center' }}>
                <span style={{ font: i < 3 ? '700 17px/1 var(--font-family)' : '600 15px/1 var(--font-family)', color: i < 3 ? 'var(--text-accent)' : 'var(--text-muted)', display: 'block', marginBottom: 4 }}>{i + 1}</span>
                <span style={{ font: 'var(--text-micro)', color: r.trend > 0 ? 'var(--text-success)' : r.trend < 0 ? 'var(--text-accent)' : 'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 1 }}>
                  <i className={'ti ti-' + (r.trend > 0 ? 'chevron-up' : r.trend < 0 ? 'chevron-down' : 'minus')} style={{ fontSize: 9 }}></i>{r.trend !== 0 ? Math.abs(r.trend) : ''}
                </span>
              </div>
              <div style={{ width: 62, height: 62, borderRadius: 14, background: 'var(--surface-2)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-photo" style={{ fontSize: 20, color: 'var(--text-muted)' }}></i></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name}</span>
                <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', display: 'block', marginBottom: 6 }}>{r.category} · {r.distance} · #{r.badge}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-primary)', display: 'inline-flex', alignItems: 'center', gap: 3 }}><i className="ti ti-heart" style={{ fontSize: 10, color: 'var(--text-accent)' }}></i>{r.likes}</span>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>사진 {r.photos}</span>
                </div>
              </div>
              <i className="ti ti-chevron-right" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            </div>
          ))}
          <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', textAlign: 'center', margin: '6px 0 0' }}>좋아요·사진 수·최근 방문을 합쳐 매주 월요일에 갱신돼요</span>
        </div>
      </div>
    </div>
  );
}
window.HotPlaces = HotPlaces;