/* ============ 安全與信任 ============
   首頁放三欄賣點卡 + 精簡區塊；導覽列點進來是全螢幕的完整說明頁（正式版 + FAQ）。
   智慧 BIM 圖台的文案由需求方提供；IPCS 智慧工地的部分依現有產品說明起草，待需求方核對。
   配色沿用官網深墨底 + 金色。
   ==================================================== */

/* ---------- 首頁：三欄賣點（兩套系統共用的保護機制） ---------- */
const SEC_CARDS = [
  {
    n: '01',
    t: '雲端部署，穩定擴充',
    d: '智慧 BIM 圖台與 IPCS 智慧工地部署於 Google Cloud 雲端環境，可依專案數量、模型規模與使用人數彈性擴充。不需自行建置高規格伺服器，即可透過瀏覽器與行動裝置使用。',
    points: ['Google Cloud 雲端部署', '支援跨裝置使用', '適合多專案擴充', '降低本地端主機維運負擔']
  },
  {
    n: '02',
    t: '分層權限，資料可控',
    d: 'BIM 模型、圖檔、文件，以及工地人員資料、查驗與職安紀錄，皆存放於受控雲端空間。管理者可依專案、角色、帳號與外部單位設定可查看的範圍，兼顧協作便利性與資料安全。',
    points: ['HTTPS 加密傳輸', '模型與圖檔不任意公開', '承攬商僅見授權範圍', 'Viewer 可瀏覽但不開放管理操作']
  },
  {
    n: '03',
    t: '版本與紀錄，可追溯',
    d: '模型搭配版本時間戳管理，避免新舊資料混用；工地端的填報、查驗與簽核則保留操作紀錄，讓資料在需要追溯、查核或釐清責任時有明確依據。',
    points: ['模型版本明確', '現場填報留存軌跡', '權限異動可查', '備份與異常監控']
  }
];

/* 精簡區塊的核心保護機制 */
const SEC_MECHS = [
  'Google Cloud 雲端部署',
  'HTTPS 加密傳輸',
  '模型與圖檔受控存取',
  '工地人員資料權限控管',
  '專案、角色與帳號權限控管',
  'Viewer 純瀏覽權限',
  '模型版本與時間戳管理',
  '操作紀錄、備份與異常監控'
];

/* ---------- 全螢幕頁：正式說明 ---------- */
const SEC_SECTIONS = [
  {
    group: '兩套系統共通的平台保護機制',
    id: 'cloud', n: '01',
    t: '部署於 Google Cloud，提供穩定且可擴充的服務',
    body: [
      '智慧 BIM 圖台與 IPCS 智慧工地採用雲端架構建置，可依專案規模、模型數量、工地數量與使用人數彈性擴充。',
      '客戶不需要自行建置高規格伺服器，也不必自行維護儲存設備、備份主機與網路環境，即可透過瀏覽器或行動裝置使用。'
    ],
    listLabel: '適用情境',
    list: ['建築管理 BIM', '施工進度 BIM', '3D GIS 設備位置管理', '外部 Viewer 瀏覽分享', '工地人員與門禁紀錄管理', '工程查驗、職安巡檢與日報填報']
  },
  {
    id: 'tls', n: '02',
    t: '全站加密傳輸，降低資料傳輸風險',
    body: [
      '平台採用 HTTPS / TLS 加密傳輸，使用者登入、模型瀏覽、圖檔讀取、文件查看、現場填報與資料交換，皆透過加密連線進行。',
      '這可降低資料在傳輸過程中被攔截、竄改或外洩的風險，讓使用者在公司、工地或外部網路環境下，都能透過受保護的通道使用系統。'
    ]
  },
  {
    id: 'roles', n: '03',
    t: '角色權限控管，確保不同對象看到不同內容',
    body: ['平台支援角色與權限設定，可依管理者、圖台作業者、工地主任、監造、承攬商、外部 Viewer 或業主等不同角色，開放不同功能與資料範圍。'],
    roles: [
      ['管理者', '可管理專案、模型、帳號、權限與設定'],
      ['圖台作業帳號', '可進行模型瀏覽、標註、查詢與資料操作'],
      ['工地端使用者', '依職責開放填報、查驗、巡檢與追蹤功能'],
      ['Viewer 瀏覽者', '僅提供純瀏覽，不開放進階操作'],
      ['外部協力廠商', '僅可查看被授權的專案或指定資料']
    ],
    foot: '同一位使用者在不同專案中可具有不同角色，符合跨專案、跨工地的管理需求。'
  },
  {
    id: 'audit', n: '04',
    t: '備份、監控與操作紀錄，支援後續維運管理',
    body: ['平台可搭配雲端備份、異常監控與操作紀錄，協助客戶建立可追蹤、可維護的使用環境。'],
    listLabel: '可管理的紀錄包含',
    list: ['模型上傳、更新與刪除', '文件上傳、改版與刪除', '使用者登入與權限異動', '現場填報與簽核紀錄', '重要資料操作紀錄', '服務狀態、流量與異常事件'],
    foot: '當資料需要追溯、查核或復原時，系統可提供更明確的管理依據。'
  },

  {
    group: '智慧 BIM 圖台',
    id: 'storage', n: '05',
    t: '模型與圖檔不對外公開，依權限授權存取',
    body: [
      'BIM 模型、3D Tiles、GLB、圖面、PDF、照片及設備文件，皆存放於受控雲端儲存空間。',
      '平台不採用任意公開下載的方式，而是透過帳號、角色、專案權限與分享設定，控制使用者可查看的內容。'
    ],
    listLabel: '管理者可依實際需求設定',
    list: ['哪些人可進入專案', '哪些角色可操作圖台', '哪些外部人員只能瀏覽', '哪些資料可查看或下載', '哪些模型及功能可被分享'],
    foot: '也就是說，模型可以分享給外部 Viewer，但資料仍由管理者控管。'
  },
  {
    id: 'version', n: '06',
    t: '版本控管與快取機制，兼顧速度與資料正確性',
    body: [
      '智慧 BIM 圖台針對模型、圖塊、屬性資料與靜態檔案，可搭配快取與版本時間戳管理。',
      '同一版本模型可快速載入，減少重複讀取；模型更新後則切換至新版本，避免使用者看到舊資料或錯誤版本。'
    ],
    listLabel: '此機制帶來三項效益',
    list: ['提升模型開啟與瀏覽速度', '減少重複讀取造成的流量浪費', '確保模型更新後版本明確可追蹤']
  },

  {
    group: 'IPCS 智慧工地',
    id: 'people', n: '07',
    t: '工地人員資料依權限存取，不對外開放',
    body: [
      'IPCS 管理的工地人員基本資料、所屬廠商、工種、資格證照、人員照片與出勤紀錄，皆存放於受控雲端空間，並依專案與角色權限開放查看。',
      '門禁的臉部辨識由刷臉系統廠商的設備與系統執行，IPCS 透過該廠商提供的 API 介接，取得進出場人員資料。' +
      '也就是說，臉部特徵的比對與儲存留在刷臉系統端，IPCS 取得與保存的是進出場紀錄。'
    ],
    listLabel: '管理者可設定的範圍',
    list: ['哪些人可進入該工地專案', '哪些角色可查看人員與證照資料', '哪些角色可查看出勤與點工紀錄', '哪些資料可匯出或列印'],
    foot: '人員資料屬於工地管理的必要資訊，平台以權限控管的方式提供，不採開放查詢或公開連結的方式呈現。'
  },
  {
    id: 'site-record', n: '08',
    t: '現場填報與查驗紀錄保留軌跡，責任可釐清',
    body: [
      '工程查驗、職安檢查、工項追蹤、會議裁示與工程日報，都在系統中留下填報人、填報時間與後續處理狀態。',
      '相較於紙本與通訊軟體，資料集中保存於同一平台，後續要追溯某一次查驗、某一項缺失或某一則裁示的處理經過時，能有明確依據。'
    ],
    listLabel: '可追溯的內容包含',
    list: ['查驗單的建立、結果與照片留存', '職安巡檢的缺失與改善追蹤', '工項的指派、進度回覆與逾期狀態', '會議裁示轉為待辦後的處理情形', '每日填報的人力與機具紀錄']
  },
  {
    id: 'vendor', n: '09',
    t: '承攬商與跨單位分權，只看得到被授權的範圍',
    body: [
      '工地現場通常同時有總公司、工地主任、監造單位、多家承攬商與協力廠商共同作業，各自需要的資料範圍並不相同。',
      'IPCS 可依專案、使用者群組與功能權限，控制每個單位可進入的專案、可使用的模組，以及可查看的資料內容。'
    ],
    listLabel: '常見的分權方式',
    list: ['承攬商僅查看自己負責的工項與查驗紀錄', '監造單位可查看查驗與職安但不修改人員資料', '工地主任掌握單一工地完整資訊', '總公司可跨工地查看彙整資訊'],
    foot: '行動端填報同樣受同一套權限規範，現場人員在手機或平板上看到的功能與資料，與其帳號被授權的範圍一致。'
  }
];

const SEC_FAQ = [
  ['BIM 模型放在雲端安全嗎？',
   '智慧 BIM 圖台部署於 Google Cloud 雲端環境，並搭配加密傳輸、權限控管、版本管理與受控儲存機制。模型不是任意公開放在網路上，而是依登入帳號、專案權限與分享設定控制可查看範圍。'],
  ['外部 Viewer 免費瀏覽，會不會造成資料外流？',
   'Viewer 是純瀏覽角色，管理者可控制可查看的專案與資料範圍。外部 Viewer 不等於開放所有資料，也不代表可進行管理、編輯或下載原始檔。平台可依專案需求設定瀏覽權限，讓分享更方便，也保留控管能力。'],
  ['模型檔、圖檔與文件會不會被任意下載？',
   '平台不建議將模型與圖檔設定為公開任意下載。BIM 模型、3D Tiles、GLB、圖面、PDF、照片與設備文件可存放於受控雲端空間，透過權限驗證或授權機制提供讀取，降低檔案外流風險。'],
  ['不同承攬商可以只看到自己的資料嗎？',
   '可以。平台可依專案、角色、帳號群組設定不同權限。例如承攬商只可查看被授權的樓層、圖層、文件或作業內容；管理者則可掌握完整專案資訊與權限設定。'],
  ['模型更新後，使用者會不會看到舊版本？',
   '平台可搭配版本時間戳或版本編號管理。同一版本模型可快速載入；模型更新後，系統切換至新版本，避免新舊資料混用，也方便後續追蹤模型改版歷程。'],
  ['快取會不會影響資料正確性？',
   '快取主要用於模型檔、圖塊、屬性資料與靜態檔案，可提升載入速度並減少重複讀取。只要搭配版本控管，模型更新時切換新版本，就能兼顧速度與資料正確性。'],
  ['如果專案很多，系統可以擴充嗎？',
   '可以。雲端架構可依專案數量、模型大小、使用人數與流量需求擴充。從小型專案到多專案企業管理，都可依不同方案與需求調整帳號、點數、儲存與流量配置。'],
  ['施工進度 BIM 和一般建築管理 BIM 的資料安全一樣嗎？',
   '是。施工進度 BIM 同樣可透過權限控管、雲端儲存、加密傳輸與版本管理保護。差異在於施工進度 BIM 通常包含更多工項、狀態、進度資料與模型構件對應，因此更需要明確的角色權限與資料版本管理。'],
  ['系統是否會保留操作紀錄？',
   '平台可針對重要操作保留紀錄，例如模型上傳、模型更新、文件改版、帳號權限異動與重要管理操作。這有助於後續追蹤、查核與釐清責任。'],
  ['客戶需要自己維護主機嗎？',
   '不需要。智慧 BIM 圖台採雲端服務模式，客戶可透過瀏覽器使用圖台，不需自行採購或維護高規格伺服器。平台可依實際方案與專案需求提供不同規模的雲端資源配置。'],
  ['工地人員的照片、證照與出勤紀錄怎麼保護？',
   '這些資料存放於受控雲端空間，依專案與角色權限開放查看，不採公開查詢或公開連結的方式呈現。管理者可設定哪些角色能查看人員與證照資料、哪些角色能查看出勤與點工紀錄，以及哪些資料可匯出。'],
  ['門禁的臉部辨識資料存在哪裡？IPCS 會保存嗎？',
   '不會。臉部辨識由刷臉系統廠商的設備與系統執行，臉部特徵的比對與儲存都留在刷臉系統端。IPCS 是透過該廠商提供的 API 介接，取得進出場人員資料，保存的是進出場紀錄，並依專案與角色權限開放查看。'],
  ['不同承攬商在工地系統中會看到彼此的資料嗎？',
   '不會，除非管理者開放。IPCS 可依專案、使用者群組與功能權限，控制每個單位可進入的專案、可使用的模組與可查看的資料範圍，例如承攬商僅查看自己負責的工項與查驗紀錄。'],
  ['查驗、職安與日報的紀錄會不會被事後改掉？',
   '系統會保留填報人、填報時間與後續處理狀態，資料異動同樣留有紀錄。相較於紙本與通訊軟體，後續要追溯某一次查驗、某一項缺失或某一則裁示的處理經過時，能有明確依據。'],
  ['現場用手機、平板填報，資料安全嗎？',
   '行動端與電腦端使用同一套帳號與權限規範，連線同樣走 HTTPS 加密傳輸，使用者看到的功能與資料範圍與其帳號被授權的範圍一致。人員異動時，管理者可即時停用帳號或調整權限。']
];

/* ---------- 首頁區塊 ---------- */
function SecuritySection({ onMore }) {
  const ref = useReveal(0.15);
  return (
    <section className="lx-section lx-sec" id="security" ref={ref}>
      <div className="lx-container">
        <div className="lx-section-head is-center">
          <span className="lx-section-eyebrow-line">TRUST · 安全與信任</span>
          <h2 className="lx-section-title">資料可以分享，權限仍由您控管</h2>
          <p className="lx-section-sub">智慧 BIM 圖台與 IPCS 智慧工地共用同一套雲端保護機制，從部署、傳輸、權限到紀錄留存</p>
        </div>

        <div className="lx-sec-cards">
          {SEC_CARDS.map((c) =>
            <div key={c.n} className="lx-sec-card">
              <span className="lx-sec-card-n">{c.n}</span>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
              <ul>
                {c.points.map((p) => <li key={p}>{p}</li>)}
              </ul>
            </div>
          )}
        </div>

        <div className="lx-sec-brief">
          <div className="lx-sec-brief-body">
            <h3>為什麼可以放心使用？</h3>
            <p>
              兩套系統皆部署於 Google Cloud 雲端環境，透過加密傳輸、受控儲存、角色權限、版本管理與備份監控，
              建立可安全使用的雲端環境。BIM 模型、圖檔、PDF 與設備文件不採任意公開下載方式；
              IPCS 的工地人員資料、查驗與職安紀錄同樣依專案、角色與帳號權限授權存取，
              承攬商與外部單位只看得到被授權的範圍。
            </p>
            <button className="lx-trial-btn" onClick={onMore}>看完整說明與常見問題 →</button>
          </div>
          <div className="lx-sec-mechs">
            <span className="lx-sec-mechs-label">核心保護機制</span>
            <ul>
              {SEC_MECHS.map((m) => <li key={m}>{m}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 全螢幕：完整說明 + FAQ ---------- */
function SecurityPage({ open, onClose, onTrial }) {
  const { useEffect: uE, useRef: uR, useState: uS } = React;
  const scrollRef = uR(null);
  const [openFaq, setOpenFaq] = uS(0);

  uE(() => {
    if (!open) return;
    document.body.style.overflow = 'hidden';
    document.body.classList.add('is-pd-open');
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => {
      document.body.style.overflow = '';
      document.body.classList.remove('is-pd-open');
      window.removeEventListener('keydown', h);
    };
  }, [open, onClose]);

  return (
    <div className={`lx-cmp lx-secpage ${open ? 'is-open' : ''}`} ref={scrollRef}>
      <div className="lx-pd-head">
        <button className="lx-pd-close" onClick={onClose}>
          <span>← CLOSE</span>
          <span style={{ color:'var(--lx-ink-4)', fontWeight:400, letterSpacing:'1px' }}>ESC</span>
        </button>
        <div className="lx-pd-crumb">TRUST &nbsp;/&nbsp; <span>安全與信任</span></div>
      </div>

      <header className="lx-cmp-hero">
        <span className="lx-eyebrow">智慧 BIM 圖台 ／ IPCS 智慧工地</span>
        <h1>雲端部署與資安保護</h1>
        <p className="lx-cmp-line">雲端部署 ｜ 加密傳輸 ｜ 權限控管 ｜ 版本管理 ｜ 備份監控</p>
        <p>
          兩套系統皆部署於 Google Cloud 雲端環境。從資料儲存、連線加密、角色權限、版本管理到備份監控，
          平台採取分層保護機制；模型圖檔與工地人員資料，也分別依其性質提供對應的控管方式。
        </p>
      </header>

      <div className="lx-secpage-body">
        {SEC_SECTIONS.map((s) =>
          <React.Fragment key={s.id}>
          {s.group && <h2 className="lx-secpage-group">{s.group}</h2>}
          <section id={s.id} className="lx-secpage-sec">
            <span className="lx-secpage-n">{s.n}</span>
            <div className="lx-secpage-sec-body">
              <h2>{s.t}</h2>
              {s.body.map((p, i) => <p key={i}>{p}</p>)}

              {s.list &&
                <div className="lx-secpage-list">
                  <span className="lx-secpage-list-label">{s.listLabel}</span>
                  <ul>{s.list.map((x) => <li key={x}>{x}</li>)}</ul>
                </div>
              }

              {s.roles &&
                <dl className="lx-secpage-roles">
                  {s.roles.map(([k, v]) =>
                    <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
                  )}
                </dl>
              }

              {s.foot && <p className="lx-secpage-foot">{s.foot}</p>}
            </div>
          </section>
          </React.Fragment>
        )}

        <div className="lx-secpage-quote">
          <b>讓資料可分享，也讓權限可控管</b>
          <p>
            智慧 BIM 圖台不是單純將 BIM 模型放到網路上，IPCS 也不只是把工地表單搬到線上，
            而是建立一套可控、可查、可分享、可維護的雲端環境。
            從 Google Cloud 雲端部署、加密傳輸、權限控管、圖檔與人員資料保護、版本管理到備份監控，
            平台皆以企業與工程專案的實際使用情境為基礎，協助客戶安全導入雲端應用。
          </p>
        </div>

        <h2 className="lx-cmp-h2" id="sec-faq"><span>FAQ</span>常見問題</h2>
        <div className="lx-secpage-faq">
          {SEC_FAQ.map(([q, a], i) =>
            <div key={i} className={`lx-faq-item ${openFaq === i ? 'is-open' : ''}`}>
              <button className="lx-faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)} aria-expanded={openFaq === i}>
                <em>Q{i + 1}</em>
                <span>{q}</span>
                <i aria-hidden="true">{openFaq === i ? '−' : '+'}</i>
              </button>
              <div className="lx-faq-a"><p>{a}</p></div>
            </div>
          )}
        </div>
      </div>

      <div className="lx-cmp-cta">
        <button className="lx-trial-btn is-primary" onClick={onTrial}>立即試用 30 天 →</button>
        <a className="lx-trial-btn" href="#contact" onClick={(e) => { e.preventDefault(); if (window.lxGoto) window.lxGoto('contact'); else onClose(); }}>聯絡顧問團隊</a>
      </div>
    </div>
  );
}

window.SecuritySection = SecuritySection;
window.SecurityPage = SecurityPage;