function PublicCollections({ nav }) {
  const [sort, setSort] = React.useState('내 주변');
  const [saved, setSaved] = React.useState([]);
  const items = [
    { name: '역삼 국밥 지도', owner: '국밥러버92', sub: '해장 성공한 곳만', count: 12, places: 9, near: 3, icon: 'soup', savers: 84 },
    { name: '혼밥 가능한 곳', owner: '야식탐험가', sub: '1인석 있는 곳', count: 8, places: 8, near: 2, icon: 'user', savers: 61 },
    { name: '늦게까지 하는 카페', owner: '카페인탐정', sub: '11시 이후 영업', count: 15, places: 12, near: 5, icon: 'coffee', savers: 133 },
    { name: '역삼 점심 로테이션', owner: '역삼동토박이', sub: '평일 12시 웨이팅 없는 곳', count: 22, places: 18, near: 7, icon: 'building-store', savers: 209 },
    { name: '비 오는 날 국물', owner: '분식마스터', sub: '따뜻한 국물 위주', count: 9, places: 7, near: 2, icon: 'bowl-chopsticks', savers: 45 },
    { name: '데이트 코스', owner: '동네박사', sub: '분위기 좋은 곳', count: 11, places: 10, near: 4, icon: 'heart', savers: 97 }
  ];
  const toggle = (e, n) => { e.stopPropagation(); setSaved(p => p.includes(n) ? p.filter(x => x !== n) : [...p, n]); };
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="이웃이 만든 컬렉션" sub="강남구 역삼동 주변 공개 컬렉션" onBack={() => nav('feed')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', paddingBottom: 104 }}>
        <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: 'flex', flexDirection: 'column', gap: 12, padding: '0 20px' }}>
          {items.map((c, i) => {
            const on = saved.includes(c.name);
            return (
              <div key={c.name} onClick={() => nav('collectionDetailOther')} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 16, boxShadow: 'var(--shadow-card)', cursor: 'pointer' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 12 }}>
                  <div style={{ display: 'flex', flexShrink: 0 }}>
                    {[0, 1, 2].map(k => (
                      <div key={k} style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--surface-2)', border: '2px solid var(--surface-1)', marginLeft: k ? -18 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-photo" style={{ fontSize: 17, color: 'var(--text-muted)' }}></i></div>
                    ))}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 3 }}>
                      <i className={'ti ti-' + c.icon} style={{ fontSize: 13, color: 'var(--text-accent)', flexShrink: 0 }}></i>
                      <span style={{ font: 'var(--text-body-strong)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{c.name}</span>
                    </div>
                    <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', display: 'block', marginBottom: 4 }}>{c.sub}</span>
                    <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>@{c.owner} · 게시물 {c.count}개 · 장소 {c.places}곳</span>
                  </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, font: 'var(--text-micro)', color: 'var(--text-accent)', background: 'var(--bg-accent)', borderRadius: 999, padding: '6px 10px', flexShrink: 0 }}><i className="ti ti-map-pin" style={{ fontSize: 10 }}></i>내 주변 {c.near}곳</span>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{c.savers}명이 저장</span>
                  <span onClick={(e) => toggle(e, c.name)} style={{ marginLeft: 'auto', flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 5, font: '600 13px/1 var(--font-family)', color: on ? 'var(--text-secondary)' : 'var(--text-primary)', background: on ? 'var(--surface-2)' : 'var(--surface-1)', border: '1px solid ' + (on ? 'transparent' : 'var(--border-strong)'), borderRadius: 999, padding: '10px 14px', cursor: 'pointer' }}><i className={on ? 'ti ti-bookmarks' : 'ti ti-bookmark'} style={{ fontSize: 13 }}></i>{on ? '저장됨' : '저장'}</span>
                </div>
              </div>
            );
          })}
          <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', textAlign: 'center', margin: '4px 0 0' }}>비공개 컬렉션은 여기에 보이지 않아요</span>
        </div>
      </div>
    </div>
  );
}
window.PublicCollections = PublicCollections;