// ─── 네비게이션 드로어 ───────────────────────
function NavDrawer({ coloredCount, totalCount, lastSyncedAt, onClose, onItem }) {
  // 최상단 단독 항목 (섹션 라벨 없음)
  const topItem = { key: 'list', icon: 'list', title: '지번 목록', desc: '검색·필터·정렬로 전체 필지 조회' };
  // 의미 단위 섹션
  const sections = [
    { label: '설정', items: [
      { key: 'settings', icon: 'sliders-horizontal', title: '색상 이름 설정', desc: '색상 라벨 편집' },
      { key: 'share',    icon: 'share-2',            title: '공유 / 동기화',  desc: 'JSON 파일로 주고받기' },
    ]},
    { label: '기능', items: [
      { key: 'calculator_settings', icon: 'calculator', title: '자동 계산기', desc: '면적 기반 투입량 계산' },
      { key: 'history',             icon: 'archive',    title: '탭 보관함',   desc: '닫은 탭을 다시 열기' },
    ]},
    { label: '고객센터', items: [
      { key: 'release_notes', icon: 'scroll-text', title: '릴리즈 노트', desc: '버전별 업데이트 내역' },
    ]},
  ];
  const future = [
    { icon: 'filter',         title: '색상별 필터',       desc: '곧 제공' },
    { icon: 'file-down',      title: '이미지로 내보내기', desc: '곧 제공' },
  ];

  return (
    <React.Fragment>
      <div style={appStyles.drawerBackdrop} onClick={onClose}></div>
      <div style={appStyles.drawer}>
        <div style={appStyles.drawerHeader}>
          <div style={appStyles.drawerMark}>
            <i data-lucide="map" style={{ width: 18, height: 18, color: '#2F7D4F' }}></i>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={appStyles.drawerTitle}>보구곶리 지적편집도</div>
            <div style={appStyles.drawerMeta}>
              <span style={{ color: '#2F7D4F', fontVariantNumeric: 'tabular-nums' }}>{coloredCount}</span>
              <span style={{ color: '#8E8B82' }}> / {totalCount} 지정</span>
              {lastSyncedAt && (
                <span style={{ color: '#8E8B82' }}>
                  {' · '}동기화 {lastSyncedAt.toLocaleTimeString('ko', { hour: '2-digit', minute: '2-digit' })}
                </span>
              )}
            </div>
          </div>
          <button style={appStyles.drawerClose} onClick={onClose} aria-label="닫기">
            <i data-lucide="x" style={{ width: 18, height: 18, color: '#5C5851' }}></i>
          </button>
        </div>

        <div style={appStyles.drawerList}>
          <DrawerItem icon={topItem.icon} title={topItem.title} desc={topItem.desc} onClick={() => onItem(topItem.key)} />
        </div>

        {sections.map(sec => (
          <React.Fragment key={sec.label}>
            <div style={appStyles.drawerSectionLabel}>{sec.label}</div>
            <div style={appStyles.drawerList}>
              {sec.items.map(it => (
                <DrawerItem key={it.key} icon={it.icon} title={it.title} desc={it.desc} onClick={() => onItem(it.key)} />
              ))}
            </div>
          </React.Fragment>
        ))}

        <div style={appStyles.drawerSectionLabel}>예정</div>
        <div style={appStyles.drawerList}>
          {future.map((it, i) => (
            <DrawerItem key={i} icon={it.icon} title={it.title} desc={it.desc} disabled={true} />
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}