function FeedAreaSheet({ area, onApply, onClose }) {
  const { BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const [q, setQ] = React.useState('');
  const [sel, setSel] = React.useState(area);
  const [radius, setRadius] = React.useState(area.radius);
  const [gpsOn, setGpsOn] = React.useState(area.gps);
  const current = { name: '역삼동', city: '강남구', posts: 42 };
  const recent = [
    { name: '연남동', city: '마포구', posts: 18 },
    { name: '을지로3가', city: '중구', posts: 7 },
    { name: '성수동2가', city: '성동구', posts: 4 }
  ];
  const all = [
    { name: '역삼1동', city: '강남구' }, { name: '역삼2동', city: '강남구' },
    { name: '논현동', city: '강남구' }, { name: '삼성동', city: '강남구' },
    { name: '연남동', city: '마포구' }, { name: '연희동', city: '서대문구' },
    { name: '을지로3가', city: '중구' }, { name: '서초동', city: '서초구' },
    { name: '성수동2가', city: '성동구' }, { name: '망원동', city: '마포구' }
  ];
  const hits = q.trim() ? all.filter(a => a.name.includes(q.trim()) || a.city.includes(q.trim())) : [];
  const pick = a => { setSel({ name: a.name, city: a.city }); setGpsOn(false); };
  const Row = ({ a, sub }) => {
    const on = !gpsOn && sel.name === a.name;
    return (
      <div onClick={() => pick(a)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', background: on ? 'var(--bg-accent)' : 'transparent', border: '1px solid ' + (on ? 'var(--text-accent)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
        <i className="ti ti-map-pin" style={{ fontSize: 17, color: on ? 'var(--text-accent)' : 'var(--text-muted)', flexShrink: 0 }}></i>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ font: 'var(--text-body)', marginBottom: 2, fontWeight: on ? 600 : 400 }}>{a.name}</div>
          <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{sub}</div>
        </div>
        {on && <i className="ti ti-check" style={{ fontSize: 17, color: 'var(--text-accent)', flexShrink: 0 }}></i>}
      </div>
    );
  };
  const label = gpsOn ? '현재 위치' : sel.city + ' ' + sel.name;
  return (
    <BottomSheet title="지역 변경" onClose={onClose}
      footer={<Button variant="primary" onClick={() => onApply({ name: gpsOn ? current.name : sel.name, city: gpsOn ? current.city : sel.city, radius, gps: gpsOn })}>{label} 반경 {radius}로 보기</Button>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div onClick={() => { setGpsOn(true); setSel(current); }} style={{ display: 'flex', alignItems: 'center', gap: 11, background: gpsOn ? 'var(--bg-accent)' : 'var(--surface-2)', border: '1px solid ' + (gpsOn ? 'var(--text-accent)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', padding: '14px 16px', cursor: 'pointer' }}>
          <i className="ti ti-current-location" style={{ fontSize: 18, color: 'var(--text-accent)', flexShrink: 0 }}></i>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ font: '600 14px/1.4 var(--font-family)', color: gpsOn ? 'var(--text-accent)' : 'var(--text-primary)', marginBottom: 2 }}>현재 위치로 보기</div>
            <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>지금 {current.city} {current.name} 근처예요 · 이동하면 자동으로 따라가요</div>
          </div>
          {gpsOn && <i className="ti ti-check" style={{ fontSize: 17, color: 'var(--text-accent)', flexShrink: 0 }}></i>}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 16px' }}>
          <i className="ti ti-search" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="동·구 이름 검색" style={{ flex: 1, minWidth: 0, border: 'none', background: 'transparent', outline: 'none', font: 'var(--text-body)', color: 'var(--text-primary)', fontFamily: 'var(--font-family)' }} />
          {q && <i className="ti ti-x" onClick={() => setQ('')} style={{ fontSize: 16, color: 'var(--text-muted)', cursor: 'pointer', flexShrink: 0 }}></i>}
        </div>
        {q.trim() ? (
          hits.length ? (
            <React.Fragment>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', padding: '8px 4px 0' }}>검색 결과 {hits.length}곳</span>
              {hits.map(a => <Row key={a.name + a.city} a={a} sub={'서울 ' + a.city} />)}
            </React.Fragment>
          ) : (
            <div style={{ padding: '30px 0', textAlign: 'center' }}>
              <i className="ti ti-map-off" style={{ fontSize: 26, color: 'var(--text-muted)', display: 'block', marginBottom: 10 }}></i>
              <span style={{ font: 'var(--text-caption)', color: 'var(--text-muted)' }}>검색 결과가 없어요</span>
            </div>
          )
        ) : (
          <React.Fragment>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', padding: '8px 4px 0' }}>내 동네</span>
            <Row a={current} sub={'서울 ' + current.city + ' · 내 기록 ' + current.posts + '개'} />
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', padding: '8px 4px 0' }}>최근 본 동네</span>
            {recent.map(a => <Row key={a.name} a={a} sub={'서울 ' + a.city + ' · 최근 기록 ' + a.posts + '개'} />)}
          </React.Fragment>
        )}
        <div style={{ height: 1, background: 'var(--border)', margin: '10px 0 2px' }}></div>
        <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', padding: '0 4px 2px' }}>보여줄 반경</span>
        <div style={{ display: 'flex', gap: 6, background: 'var(--surface-2)', borderRadius: 'var(--radius-chip)', padding: 6 }}>
          {['300m', '500m', '1km', '3km'].map(r => (
            <span key={r} onClick={() => setRadius(r)} style={{ flex: 1, textAlign: 'center', font: radius === r ? '600 13.5px/1 var(--font-family)' : '400 13.5px/1 var(--font-family)', color: radius === r ? '#fff' : 'var(--text-secondary)', background: radius === r ? 'var(--bg-ink)' : 'transparent', borderRadius: 999, padding: '12px 0', cursor: 'pointer' }}>{r}</span>
          ))}
        </div>
        <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', padding: '2px 4px 0', lineHeight: 1.6 }}>반경이 좁으면 걸어갈 수 있는 곳만, 넓으면 더 많은 기록이 보여요. 미션과 랭킹은 내 동네 기준으로 계산돼요.</span>
      </div>
    </BottomSheet>
  );
}
window.FeedAreaSheet = FeedAreaSheet;