/* ============ Scenarios — 活用シーン（動画） ============ */
function Scenarios() {
  const headRef = useReveal(0.3);

  // video: 自社ホストの mp4 ファイル名（assets/ に配置）；embed: YouTube / Vimeo の埋め込み URL
  // どちらも空の場合は「準備中」のプレースホルダーを表示する
  const scenarios = [
  {
    n: "01",
    title: "作業員の入場管理",
    lead: "入場前に資格を確認し、確認履歴を確実に残す",
    desc: "作業員の登録、所属する協力会社、職種、資格・免許の管理から、入場時の周知や入退場ゲートの運用まで、IPCS は作業員情報をひとつのプラットフォームに集約します。入場前に本人確認と作業資格をどのように確認するかを動画でご覧いただけます。紙の名簿や重複したチェックを減らし、入場するすべての作業員について、確認内容を検索可能な履歴として残します。",
    video: "", embed: ""
  },
  {
    n: "02",
    title: "安全衛生パトロール管理",
    lead: "QR コードを読み取るだけ、設備点検をその場で",
    desc: "IPCS は施工設備・機材の情報を登録し、設備ごとの QR コードを発行します。現場ではスマートフォンやタブレットで読み取るだけで、その設備に対応した対象設備の安全点検項目が表示され、その場で点検を完了できます。設備と点検記録が直接ひも付くため、情報を探す時間が短くなり、点検結果はその場で記録として残ります。設備の識別と安全衛生管理の効率が向上します。",
    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;