function Notices({ nav }) {
  const [open, setOpen] = React.useState(null);
  const [cat, setCat] = React.useState('전체');
  const items = [
    { id: 1, cat: '점검', title: '8/18(화) 새벽 2시~4시 서버 점검 안내', date: '2026.08.14', pinned: true, unread: true, body: ['점검 시간 동안 사진 업로드와 위치 제안이 일시적으로 중단됩니다.', '작성 중이던 게시물은 저장되지 않으니 점검 전에 올려주세요.', '점검이 앞당겨 끝나면 앱 내 알림으로 안내드릴게요.'] },
    { id: 2, cat: '이벤트', title: '8월 밀키트 인증샷 미션 · 응모권 2배', date: '2026.08.11', unread: true, body: ['8월 한 달간 밀키트 미션 인증샷을 올리면 응모권을 두 장 드려요.', '심사를 통과한 인증샷만 집계되며, 하루 최대 2건까지 인정됩니다.', '당첨자는 9월 첫째 주에 알림으로 안내드립니다.'] },
    { id: 3, cat: '공지', title: '이용약관 및 개인정보처리방침 개정 안내', date: '2026.08.01', body: ['장소 제안 승인 절차와 미션 보상 회수 기준이 명확해졌습니다.', '2026년 9월 1일부터 적용되며, 그 전까지 언제든 탈퇴할 수 있습니다.', '자세한 내용은 설정 > 이용약관에서 확인하세요.'] },
    { id: 4, cat: '공지', title: '위치 제안 기능 개선 · 중복 제안 정리', date: '2026.07.22', body: ['같은 가게로 모인 제안은 하나로 묶여 보이도록 바뀌었습니다.', '작성자가 승인하면 남은 제안은 자동으로 정리됩니다.'] },
    { id: 5, cat: '이벤트', title: '동네박사 배지 시즌2 시작', date: '2026.07.05', body: ['한 동네에서 20곳을 기록하면 동네박사 배지를 드려요.', '시즌1 달성자는 별 표시가 함께 붙습니다.'] }
  ];
  const cats = ['전체', '공지', '점검', '이벤트'];
  const list = cat === '전체' ? items : items.filter(i => i.cat === cat);
  const tone = c => c === '점검' ? { bg: 'var(--bg-danger)', fg: 'var(--text-danger)' } : c === '이벤트' ? { bg: 'var(--bg-accent)', fg: 'var(--text-accent)' } : { bg: 'var(--surface-2)', fg: 'var(--text-secondary)' };
  if (open) {
    const n = items.find(i => i.id === open);
    const t = tone(n.cat);
    return (
      <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
        <StatusBar />
        <ScreenHeader title="공지사항" onBack={() => setOpen(null)} />
        <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 104px' }}>
          <span style={{ display: 'inline-block', font: '700 11px/1 var(--font-family)', color: t.fg, background: t.bg, borderRadius: 999, padding: '7px 10px', marginBottom: 12 }}>{n.cat}</span>
          <span style={{ font: 'var(--text-title)', display: 'block', marginBottom: 8, lineHeight: 1.4, textWrap: 'pretty' }}>{n.title}</span>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-muted)', display: 'block', paddingBottom: 18, borderBottom: '1px solid var(--border)' }}>{n.date}</span>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 18 }}>
            {n.body.map(b => <p key={b} style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', lineHeight: 1.75, margin: 0, textWrap: 'pretty' }}>{b}</p>)}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 26, padding: '14px 16px', background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)' }}>
            <i className="ti ti-help-circle" style={{ fontSize: 16, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', flex: 1 }}>더 궁금한 점이 있나요?</span>
            <span onClick={() => nav('support', { from: 'notices' })} style={{ font: '600 12px/1 var(--font-family)', color: 'var(--text-accent)', cursor: 'pointer', flexShrink: 0 }}>문의하기</span>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
      <StatusBar />
      <ScreenHeader title="공지사항" sub="서비스 소식과 점검 일정을 알려드려요" onBack={() => nav('settings')} />
      <div style={{ display: 'flex', gap: 8, padding: '0 20px 16px', overflowX: 'auto', scrollbarWidth: 'none' }}>
        {cats.map(c => (
          <span key={c} onClick={() => setCat(c)} style={{ flexShrink: 0, font: cat === c ? '600 14px/1 var(--font-family)' : '400 14px/1 var(--font-family)', color: cat === c ? '#fff' : 'var(--text-primary)', background: cat === c ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '11px 16px', cursor: 'pointer' }}>{c}</span>
        ))}
      </div>
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 104px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {list.map(n => {
          const t = tone(n.cat);
          return (
            <div key={n.id} onClick={() => setOpen(n.id)} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 16, boxShadow: 'var(--shadow-card)', cursor: 'pointer' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                {n.pinned && <i className="ti ti-pin" style={{ fontSize: 14, color: 'var(--text-accent)' }}></i>}
                <span style={{ font: '700 11px/1 var(--font-family)', color: t.fg, background: t.bg, borderRadius: 999, padding: '6px 9px' }}>{n.cat}</span>
                {n.unread && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--text-accent)' }}></span>}
                <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', marginLeft: 'auto' }}>{n.date}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ flex: 1, font: 'var(--text-body-strong)', lineHeight: 1.45, textWrap: 'pretty' }}>{n.title}</span>
                <i className="ti ti-chevron-right" style={{ fontSize: 15, color: 'var(--text-muted)', flexShrink: 0 }}></i>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
window.Notices = Notices;