/* global React */
// architecture.jsx
// v0.4 software architecture section: USAR/INSARAG + ICS role-split versions
// and the shared Swift core. Mirrors readme.md / PROJECT_STRUCTURE.md so the
// site reflects the current project architecture (not only the V0.2 hardware).

// ===== v0.4 Architecture =====
function Architecture() {
  const versions = [
    {
      code: 'UCC', full: 'LinkGuard-UCC', zh: '最高指揮中心',
      tags: ['macOS'],
      desc: '最高協調與資料權威。全區儀表板、ICS 架構、跨區調度、AI 分析、災情統計、電台監聽、事件日誌、PWS / EMIC、資源總控與 INSARAG 國際協作。',
      device: 'Mac 優先',
    },
    {
      code: 'SCC', full: 'LinkGuard-SCC', zh: '現場總指揮中心',
      tags: ['macOS', 'iPadOS'],
      desc: '現場指揮中心。分區管理、人員總覽、安全管制與「城市搜索與救援隊隊伍概況表」A/B/C/D 的接收與彙整。',
      device: 'Mac + iPad',
    },
    {
      code: 'TL', full: 'LinkGuard-TL', zh: '小隊長 / 分區指揮',
      tags: ['iOS', 'iPadOS'],
      desc: '分區、Worksite 與任務派遣，向上銜接 SCC、向下調度搜救隊員，掌握分區人員狀態與回報。',
      device: 'iPhone + iPad',
    },
    {
      code: 'TE', full: 'LinkGuard-TE', zh: '搜救隊員',
      tags: ['iOS'],
      desc: '任務接收、GPS、SOS、照片、危險標記、分區資訊、任務回報、離線暫存、語音與 LoRa，內建高壓模式。',
      device: 'iPhone 優先',
    },
    {
      code: 'EMT', full: 'LinkGuard-EMT', zh: '醫療 / 檢傷（獨立）',
      tags: ['iOS', 'iPadOS'],
      desc: '必須獨立。傷患建立、START、生命徵象、狀態更新、後送、醫院容量、語音病歷與 AI 預警；不被分區、ICS 指揮、搜救進度干擾。',
      device: 'iPhone + iPad',
    },
    {
      code: 'VO', full: 'LinkGuard-VO', zh: '志工 / 民間支援',
      tags: ['iOS'],
      desc: '帳號、GPS、SOS、照片、災情回報、離線暫存、語音、多語、安全警告與超簡化模式，降低民間支援的操作門檻。',
      device: 'iPhone 優先',
    },
    {
      code: 'i', full: 'LinkGuard-iPhone', zh: '單一現場入口',
      tags: ['iOS'],
      desc: 'v0.4 統一啟動器。開啟後選 TL / TE / EMT / VO 身份，再依選擇重建對應 appID、權限矩陣與功能頁籤。',
      device: 'iPhone',
    },
  ];

  const core = [
    { idx: 'C / a', name: '共享核心', en: 'LinkGuardCore', desc: 'app identity、role profile、ICS section / position / role assignment 與 app permission matrix，所有版本共用同一份 Swift framework。', stat: { big: 'Swift', sub: 'shared package' } },
    { idx: 'C / b', name: '角色功能矩陣', en: 'Role Feature Access', desc: '以 UCC / SCC / TL / TE / EMT / VO 的 ●／○／✕ 細項矩陣，gate 地圖、人員、醫療、通訊與 AI / 指揮功能。', stat: { big: '6 roles', sub: '功能 gate' } },
    { idx: 'C / c', name: '事件資料模型', en: 'Incident Model', desc: 'incident、sector、sub-sector、worksite、task、alert、map feature、人員概況、照片回報與安全管制。', stat: { big: 'ICS', sub: '結構化模型' } },
    { idx: 'C / d', name: '離線同步', en: 'Offline Sync', desc: 'sync envelope、idempotency key、offline queue、operation snapshot store、連線恢復協調與手動重試。', stat: { big: 'Offline', sub: 'first' } },
    { idx: 'C / e', name: '地圖系統', en: 'Map System', desc: '點線面標記、ICS 分區、搜救狀態與人員安全圖層，含離線 tile manifest、下載進度與 AI 圖層。', stat: { big: 'GIS', sub: '離線 tile' } },
    { idx: 'C / f', name: '醫療資料', en: 'EMT Medical', desc: 'patient、vitals、evacuation、hospital capacity 與醫療版本 phase roadmap，與搜救資料流分離。', stat: { big: 'START', sub: 'triage' } },
    { idx: 'C / g', name: '災後復盤', en: 'After Action Review', desc: 'audit event、decision record、timeline event，記錄誰、何時、做了什麼與指令流向，支援 JSON / CSV 匯出。', stat: { big: 'AAR', sub: 'audit' } },
    { idx: 'C / h', name: '現場 UI', en: 'LinkGuardFieldUI', desc: 'iPhone / iPad field app shell + Phase 2 controller，依角色矩陣排隊分區、地圖、人員、回報、醫療、安全、聊天、語音與 SOS。', stat: { big: 'FieldUI', sub: 'role shell' } },
  ];

  return (
    <section id="architecture">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="label">[ 02.7 ]</span>
            <span className="label">/ v0.4 系統架構</span>
          </div>
          <h2 className="h2 reveal">
            USAR / INSARAG + ICS，<br />
            一個共享核心，六種角色版本。
          </h2>
        </div>

        <div className="features-intro reveal">
          <p>
            v0.4 從單一 Mac HQ 走向 <span className="key">共享核心 + 角色分流</span> 架構：
            <span className="key">UCC</span> 為最高協調與資料權威，<span className="key">SCC</span> 為現場指揮中心，
            iPhone / iPad 則依 TL / TE / EMT / VO 角色載入對應權限與功能。
            所有版本共用 <span className="key">LinkGuardCore</span> 的資料模型、權限矩陣、離線同步與災後復盤。
          </p>
        </div>

        <div className="arch-versions reveal-stagger">
          {versions.map((v) => (
            <article key={v.full} className="arch-card" data-hover>
              <div className="arch-card-top">
                <span className="arch-code">{v.code}</span>
                <div className="arch-tags">
                  {v.tags.map((t) => <span key={t} className="arch-tag">{t}</span>)}
                </div>
              </div>
              <h3 className="arch-name">
                <span className="full">{v.full}</span>
                <span className="zh">{v.zh}</span>
              </h3>
              <p className="arch-desc">{v.desc}</p>
              <div className="arch-device">
                <span className="k">優先裝置</span>
                <span className="v">{v.device}</span>
              </div>
            </article>
          ))}
        </div>

        <div className="arch-core-head reveal">
          <span className="label">/ 共享核心 · LinkGuardCore</span>
        </div>
        <div className="product-rows">
          {core.map((p) => (
            <div key={p.idx} className="product-row" data-hover>
              <div className="idx">{p.idx}</div>
              <div>
                <div className="name">{p.name}<span className="en">{p.en}</span></div>
                <div className="desc">{p.desc}</div>
              </div>
              <div className="stat">
                <span className="big">{p.stat.big}</span>
                {p.stat.sub}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.LGArchitecture = { Architecture };