/* ============ Scenarios — Application use cases (影片) ============ */
function Scenarios() {
  const headRef = useReveal(0.3);

  // video: 自架 mp4 檔名（放在 img/）；embed: YouTube / Vimeo 內嵌網址
  // 兩者皆空時顯示待上傳的佔位區塊
  const scenarios = [
  {
    n: "01",
    title: "人員進場管理",
    lead: "資格確認，進場有依據",
    desc: "從工地人員建檔、所屬廠商、工種與資格證照管理，到進場告知及門禁作業，IPCS 將人員資料集中於同一平台。透過影片了解如何在進場前確認人員身分與作業資格，減少紙本名冊與重複查核，讓每一位進場人員都有清楚、可查詢的管理依據。",
    video: "", embed: ""
  },
  {
    n: "02",
    title: "職安巡檢管理",
    lead: "掃碼即查，設備巡檢更即時",
    desc: "IPCS 為施工設備與機具建立專屬資料及 QR Code，現場人員使用手機或平板掃描後，即可開啟對應的職安檢查內容並完成巡檢。透過設備與檢查紀錄的直接連結，縮短資料查找時間，讓巡檢結果即時留存，提升設備識別與職安管理效率。",
    video: "", embed: ""
  },
  {
    n: "03",
    title: "點工管理",
    lead: "工時即時記錄，人力投入更清楚",
    desc: "透過 IPCS 建立每日工作項目，記錄承攬廠商、施工人員、工作內容、作業地點、正常工時與加班時數。影片將呈現現場如何完成每日點工作業，協助管理者掌握人力配置與實際投入情形，並建立後續工時查詢及人工成本管理的資料基礎。",
    video: "", embed: ""
  },
  {
    n: "04",
    title: "工程查驗管理",
    lead: "現場即填報，品質紀錄可追溯",
    desc: "工程查驗不再依賴紙本填寫與事後整理。現場人員可透過手機或平板執行查驗、填寫結果並保存相關紀錄，管理者則可集中查詢歷次查驗資料與報表。從現場填報到後續管理，建立格式一致、資料完整且可持續追溯的工程品質紀錄。",
    video: "", embed: ""
  },
  {
    n: "05",
    title: "任務追蹤管理",
    lead: "從問題發現到完成，全程可追蹤",
    desc: "無論是 PDF 圖面標註、會議裁示，或工程執行中的工作項目，都可在 IPCS 中轉為明確的待辦任務並指派相關人員。執行者可回覆進度及上傳檔案，管理者則能掌握負責人與處理狀態，讓問題從提出、指派、回覆到完成，都保留完整紀錄。",
    video: "", embed: ""
  },
  {
    n: "06",
    title: "甘特進度管理",
    lead: "串聯排程、任務與執行進度",
    desc: "IPCS 甘特圖不只呈現工程日期，也能建立專案流程、里程碑、作業節點及任務關聯，並串聯會議紀錄與工項追蹤。透過影片了解如何從排程掌握分包商工作進度及相關執行資訊，讓工程計畫與現場任務形成一致、可追蹤的進度管理架構。",
    video: "", embed: ""
  },
  {
    n: "07",
    title: "戰情儀表板",
    lead: "整合現場數據，支援管理決策",
    desc: "IPCS 將各功能模組累積的工程資料轉為視覺化管理資訊，並可依專案、年度或月份查看不同統計內容。透過戰情儀表板，管理者能快速掌握專案執行情形，減少人工彙整報表的時間，讓現場紀錄進一步成為管理判斷與決策的依據。",
    video: "", embed: ""
  }];


  return (
    <section className="lx-section lx-scenarios" id="scenario">
      <div className="lx-container">
        <div className="lx-section-head is-center lx-reveal" ref={headRef}>
          <span className="lx-section-eyebrow-line">SCENARIO · 應用場景</span>
          <h2 className="lx-section-title" style={{ color: "rgb(227, 227, 227)" }}>讓每一項工程，都有數據可依循</h2>
          <p className="lx-section-sub">整合 GIS、BIM 與 AI 技術，將現場資訊轉化為可分析、可追溯的管理依據。</p>
        </div>
      </div>

      <div className="lx-container">
        <div className="lx-scenario-videos">
          {scenarios.map((s, idx) =>
          <ScenarioVideo key={s.n} scenario={s} delay={idx * 50} />
          )}
        </div>
      </div>
    </section>);

}

function ScenarioVideo({ scenario, delay }) {
  const ref = useReveal(0.12);

  return (
    <article className="lx-scenario-video lx-reveal" ref={ref} style={{ transitionDelay: `${delay}ms` }}>
      <div className="lx-scenario-media">
        {scenario.video ?
        <video controls preload="metadata" playsInline poster={scenario.poster || undefined}>
            <source src={scenario.video} type="video/mp4" />
          </video> :
        scenario.embed ?
        <iframe src={scenario.embed} title={scenario.title} allowFullScreen
          allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" /> :

        <div className="lx-scenario-media-empty">
            <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.4" width="40" height="40">
              <rect x="4" y="10" width="30" height="28" rx="2" />
              <path d="M34 20l10-6v20l-10-6z" />
              <path d="M15 18l10 6-10 6z" />
            </svg>
            <span>影片待上傳</span>
          </div>
        }
      </div>
      <div className="lx-scenario-video-body">
        <div className="lx-scenario-video-head">
          <span className="lx-scenario-num">{scenario.n}</span>
          <h3 className="lx-scenario-title">{scenario.title}</h3>
        </div>
        <p className="lx-scenario-lead">{scenario.lead}</p>
        <p className="lx-scenario-desc">{scenario.desc}</p>
      </div>
    </article>);

}

window.Scenarios = Scenarios;