/* ============ Product Detail Overlay with Scroll Spy + Pricing ============ */

const PRODUCT_DATA = {
  ipcs: {
    code: "IPCS",
    codeFull: "INTELLIGENT PROJECT CONSTRUCTION SITE",
    zh: "IPCS スマート現場管理",
    sub: "リアルタイムデータ × 要員管理 × 標準化された業務",
    hero: "assets/prod-ipcs.webp",
    desc: "IPCS スマート現場管理は、案件、承認、工事検査、安全衛生点検、工事日報、書類、進捗、会議、設備、現場作業員といった管理業務を統合します。紙、チャットアプリ、個別のファイルに散らばっていた工事情報を、同じプラットフォーム上で入力・検索・追跡・集計できるようにします。パソコン、タブレット、スマートフォンのいずれからも操作でき、現場の進捗・対応状況をその場で把握し、より透明で、履歴を追跡できる標準化された業務フローをつくります。",
    sections: [
      { id:"overview", n:"01", t:"モジュール概要",
        lead:"現場への入場、検査とパトロール、会議の追跡、日報の集計まで",
        body:"IPCS は現場の日常業務を軸に、要員、帳票、書類、進捗、現場管理の情報を、蓄積し続けられるデジタルの記録に変えます。データの作成から業務の実行、その後の検索と追跡まで、一連の作業を同じシステム内で完了できます。役割の異なる関係者がその場で案件の状況を把握でき、情報のずれを減らし、協業の効率と管理の一貫性を高めます。",
        cards:[
          {n:"1",  t:"現場作業員管理", d:"入退場、要員数、協力会社、職種を把握"},
          {n:"2",  t:"入退場ゲート管理", d:"顔認証での入場と退場の記録を統合"},
          {n:"3",  t:"安全衛生管理",   d:"安全教育、パトロール、是正の追跡"},
          {n:"4",  t:"工事検査",       d:"段階別の検査、写真の保存、承認管理"},
          {n:"5",  t:"設備管理",       d:"定期点検、検査証の有効状況、履歴の検索"},
          {n:"6",  t:"会議管理",       d:"議事録、決定事項、担当者の割り当て"},
          {n:"7",  t:"PDF マークアップ", d:"図面上に課題を記し、タスクを割り当て"},
          {n:"8",  t:"作業項目の追跡",     d:"未対応事項、期限超過、対応の進捗"},
          {n:"9",  t:"日報",           d:"複数人で入力し、要員と機材を集計"},
          {n:"10", t:"ガントチャート", d:"予定と実績を比較し、遅れを把握"},
        ],
        flowLabel:"現場の 1 日の流れ",
        flow:["入場管理", "施工作業", "検査・パトロール", "調整と追跡", "終業時の集計"],
        benefits:["現場情報をその場で把握", "業務の標準化", "品質・安全に関する履歴を追跡できる", "部門をまたぐ協業が円滑に", "管理判断がより効率的に"],
      },
      { id:"project", n:"02", t:"案件と権限",
        lead:"プロジェクトごとにデータと利用権限を整理する",
        body:"案件の基本情報と権限管理により、工事プロジェクトごとにデータを整理・管理します。利用者の職責に応じて、閲覧できる案件、機能、操作の範囲を割り当てられるため、多人数・複数案件の環境でも一貫した管理ルールを保てます。",
        features:[
          {t:"案件の基本情報管理", d:"新しい案件を作成し、案件名、開始・終了時期、所在地、緯度経度、所属会社を設定します。システム内の各種工事データの帰属先となります。"},
          {t:"利用者グループ管理", d:"組織、部門、職責に応じて利用者グループを作成し、種類ごとのシステム権限をまとめて管理します。"},
          {t:"機能権限の管理", d:"各グループが閲覧・利用できる IPCS の機能モジュールを設定し、権限のない担当者が無関係な機能を操作することを防ぎます。"},
          {t:"案件権限の管理", d:"利用者がアクセスできる工事プロジェクトを制御します。同じ利用者でも案件ごとに異なる役割と操作権限を持てるため、複数案件の管理にも対応します。"},
        ],
      },
      { id:"forms", n:"03", t:"帳票と現場業務",
        lead:"現場の帳票作成と検査を、その場で完結",
        body:"IPCS は申請と承認、工事検査、安全衛生点検、工事日報をオンラインの業務に置き換えます。現場の担当者はスマートフォンやタブレットで入力でき、管理者は帳票の内容、処理状況、過去の記録をまとめて検索できます。標準化され、後から追跡できる業務の流れをつくります。",
        features:[
          {t:"申請・承認", d:"申請一覧、承認待ち一覧、ワークフロー管理、帳票管理を統合します。申請の起票、オンラインでの承認、ワークフローの設定ができ、事務・工事の申請業務をまとめて管理します。"},
          {t:"工事検査表", d:"検査表の作成、結果入力、帳票出力、履歴管理に対応します。工事検査のデータを作成し、検査結果を記録して、過去の記録と関連する帳票をまとめて検索できます。"},
          {t:"安全衛生点検表", d:"点検表の作成、QR コードの読み取り、点検履歴の管理に対応します。現場の担当者は施工項目、項目区分、点検内容に沿ってパトロールを行い、点検結果と説明を入力できます。"},
          {t:"QR コードの読み取り", d:"設備ごとに専用の QR コードを発行できます。現場でスマートフォンやタブレットから読み取ると、対応する設備情報と安全衛生の点検作業に進めるため、情報を探す時間と操作の手間を減らせます。"},
          {t:"工事日報", d:"日々の施工内容と関連する工事情報を記録します。毎日の入力データをまとめて保存し、管理者が工事の実行記録を継続して確認できます。"},
        ],
      },
      { id:"progress", n:"04", t:"進捗と協業",
        lead:"工程表、会議、タスクをつなぐ",
        body:"IPCS は工程表、会議の決定事項、タスクを互いに結び付けます。案件のマイルストーンから作業計画を展開し、タスクの割り当て、対応状況の更新、関連する記録を継続して追跡できます。管理情報が別々の書類やメッセージに散らばることがなくなります。",
        features:[
          {t:"カレンダー", d:"カレンダー形式で予定を作成・確認できます。日付、内容、区分を設定でき、個人や案件の予定を把握しやすくなります。"},
          {t:"ガントチャート", d:"案件の流れ、マイルストーン、工程上の作業項目を作成します。メインとサブのガントチャートに対応し、協力会社の進捗の確認や、タスク間の関連付けができます。"},
          {t:"タスク影響の通知", d:"ガントチャート上の関連タスクが変更されたとき、影響を受ける可能性のある作業をシステムが知らせます。管理者が工程の見直しを判断する助けになります。"},
          {t:"会議管理", d:"会議情報をまとめて作成し、決定事項を記録します。決定事項はタスクに変換して担当者に割り当て、対応の進捗を追跡できます。"},
          {t:"作業項目の追跡", d:"作業項目を作成して割り当て、担当者、作業内容、対応状況の更新、関連ファイルを管理します。作業項目とガントチャート上の作業段階を関連付けることもできます。"},
          {t:"個人タスクの一覧", d:"自分に関係する作業項目をまとめて確認できます。条件で絞り込んで対応すべきタスクをすばやく見つけ、対応状況の更新や資料の添付ができます。"},
        ],
      },
      { id:"labor", n:"05", t:"要員・設備と出面",
        lead:"現場の要員・設備と、日々の稼働状況を把握する",
        body:"現場作業員、資格・免許、施工設備、機材資産、日々の出面データを統合し、現場の人員と設備の基本的な管理記録をつくります。管理者は作業員情報、設備の履歴、日々の作業投入状況を検索できます。",
        features:[
          {t:"現場作業員管理", d:"現場作業員の基本情報を作成し、所属会社、部署、職種、作業項目、連絡先、本人写真を管理して、関連情報をまとめて保存します。"},
          {t:"資格・免許の管理", d:"現場作業員の資格と免許の情報を記録し、案件管理や現場での作業員情報の確認に利用します。"},
          {t:"オンライン届出", d:"要員管理の必要に応じた帳票を用意し、現場の担当者がオンラインで届出を入力できるようにして、入力内容と記録を保持します。"},
          {t:"二段階の入退場管理", d:"現場作業員の管理と入場の流れに合わせて、二段階の入退場に関する業務を行います。実際の入退場データは、現場のゲートシステムと連携条件に従います。"},
          {t:"設備管理", d:"施工設備、機材、資産の情報をまとめて作成し、基本情報、設備の履歴、保守情報を管理します。"},
          {t:"設備の QR コード", d:"設備ごとに専用の QR コードを発行します。現場で読み取ると設備をすばやく識別でき、関連情報や点検作業に進めます。"},
          {t:"出面管理", d:"日々の作業項目、協力会社、作業員の作業内容、作業場所、所定内労働時間、残業時間を記録し、日々の投入人工の記録をつくります。"},
          {t:"労務費管理", d:"出面データから作業員の労働時間と協力会社の情報を集計し、労務費の管理とその後のデータ確認の基礎とします。"},
        ],
      },
      { id:"docs", n:"06", t:"書類とデータの活用",
        lead:"工事のデータを、整理しやすく、探しやすく、使いやすく",
        body:"ファイル管理、空間・設備分類コード、ダッシュボード、3D GIS などの機能により、工事書類と管理データを一貫した方法で整理します。必要な情報をすばやく見つけられ、案件の内容を視覚的に、また空間的に確認できます。",
        features:[
          {t:"ファイル管理", d:"視覚的に操作できるフォルダ画面で工事書類を管理します。複数ファイルの一括アップロード、バージョン管理、ファイル名検索に対応し、案件の資料をまとめて保存します。"},
          {t:"文書の全文検索", d:"ファイル名だけでなく、文書の内容に対しても全文検索を行えます。ファイルを 1 つずつ開いて探す時間を減らせます。"},
          {t:"PDF のオンライン閲覧と注記", d:"パソコン、タブレット、スマートフォンからオンラインで PDF を閲覧し、文書上に直接注記を書き込めます。"},
          {t:"注記の割り当てと追跡", d:"PDF の注記を担当者に割り当てて対応を依頼し、その後の返信や対応状況を継続して追跡できます。"},
          {t:"空間・設備分類コード", d:"空間と設備に一貫したコードを設定し、BIM モデルの空間・設備分類コード登録用テンプレートも提供します。異なる工事データをまたぐ共通の検索基準になります。"},
          {t:"関連データの検索", d:"空間や設備のコードから、関連するファイル、議事録、作業項目をすばやく検索でき、モジュールをまたぐ確認作業が効率化します。"},
          {t:"ダッシュボード", d:"管理の必要に応じて個人用のダッシュボードを作成し、システムのデータを視覚的な情報に変換します。年度、月、複数案件などの条件で確認できます。"},
          {t:"ダッシュボードの共有権限", d:"ダッシュボードの閲覧権限を設定し、リンクを指定の利用者に共有できます。管理上の役割ごとに、対応する情報を見せられます。"},
          {t:"3D GIS", d:"プロジェクトの 3D 空間情報を確認するためのポータルを提供します。案件の位置と関連する地理情報を 3D GIS で表示し、空間の観点から案件の内容を確認できます。"},
        ],
      },
    ],
  },
  bim: {
    code: "BIM",
    codeFull: "SMART BIM · BUILDING × CONSTRUCTION",
    zh: "スマート BIM プラットフォーム",
    sub: "インストール不要の閲覧 × モデル検索 × 施工ステップ",
    hero: "assets/prod-bim.webp",
    desc: "スマート BIM プラットフォームは建築管理 BIM と施工進捗 BIM を統合し、ウェブ上のプラットフォームで建築モデル、階、部材の属性、工事の進捗情報をまとめて表示します。専用の BIM ソフトをインストールしなくても、パソコン、タブレット、スマートフォンからモデルの閲覧、部材の検索、階の切り替え、計測、施工ステップの確認が行えます。BIM を三次元モデルの表示にとどめず、建築情報の検索と施工進捗管理に活用できるプラットフォームとして提供します。",
    sections: [
      { id:"overview", n:"01", t:"主な機能",
        lead:"ウェブ完結の BIM プラットフォームで、モデル管理と協業をより簡単に",
        body:"スマート BIM は建築モデルを、ウェブ上で操作できるインタラクティブな情報基盤に変え、建築管理 BIM、施工進捗 BIM、3D GIS の空間活用を統合します。階、要素の種類、部材の属性でモデルの内容を絞り込め、施工進捗のデータを三次元モデルと結び付けられます。建築空間から部材情報、工事の段階まで、BIM 情報を直感的に検索・参照できるようにします。",
        cards:[
          {n:"1", t:"3D モデル閲覧",       d:"IFC、3D Tiles、GLB などの形式に対応し、大規模な BIM モデルをオンラインでなめらかに閲覧できます。"},
          {n:"2", t:"モデル部材の検索",     d:"部材をクリックすると属性情報を確認でき、モデルと設備の情報をすばやく把握できます。"},
          {n:"3", t:"レイヤーとビューの管理", d:"レイヤーの表示切替、透明度の調整、ビューの保存と切り替えに対応し、管理が効率化します。"},
          {n:"4", t:"書類と図面の管理",     d:"図面、PDF、写真などの書類を統合してまとめて管理し、すばやく探せます。"},
          {n:"5", t:"マークアップと計測",   d:"マークアップ、距離・面積・角度の計測に対応し、現場での確認が容易になります。"},
          {n:"6", t:"進捗管理と比較",       d:"施工進捗 BIM と統合し、進捗の反映とモデルの比較に対応。進捗の状態を色で表示します。"},
          {n:"7", t:"設備管理",             d:"設備台帳、保守周期、修理記録により、施設管理を効率化します。"},
          {n:"8", t:"複数案件の管理",       d:"複数案件の切り替えと管理に対応し、企業や大規模組織での利用に適します。"},
        ],
        extraLabel:"応用範囲",
        extra:[
          {t:"建築管理 BIM",       d:"建物のライフサイクル全体を管理し、モデル、図面情報、データを統合して資産管理を効率化します。"},
          {t:"施工進捗 BIM",       d:"施工の進捗を可視化して管理し、協業の効率と案件の透明性を高めます。"},
          {t:"3D GIS の活用",      d:"GIS と BIM を統合し、都市・敷地レベルの管理を効率化できます。"},
          {t:"外部 Viewer での共有", d:"モデルのリンクや図面を共有でき、居住者や社外の関係者が簡単に確認できます。"},
        ],
        benefits:["情報を統合して可視化", "的確な検索と位置特定", "協業の効率化", "マルチデバイス対応", "データの安全な管理"],
      },
      { id:"viewer", n:"02", t:"モデルの閲覧と操作",
        lead:"さまざまな角度から建築モデルを把握する",
        body:"スマート BIM は直感的な三次元モデルの操作機能を備えています。確認したい内容に応じて視点を変え、表示モードを切り替え、モデルを断面表示できます。建物全体の外観だけでなく、階の構成や内部の部材の関係まで確認できます。",
        features:[
          {t:"ウェブでのモデル閲覧", d:"ウェブブラウザから BIM モデルを読み込みます。利用者側に専用の BIM ソフトをインストールしなくても、モデルの確認と操作を行えます。"},
          {t:"回転・移動・拡大縮小", d:"マウスまたはタッチ操作でモデルの向き、画面の位置、表示倍率を調整し、建物全体や細部をすばやく確認できます。"},
          {t:"平面表示モード", d:"階の平面図に近い視点でモデルを確認でき、指定した階の空間構成と部材の分布を把握しやすくなります。"},
          {t:"断面表示", d:"モデルの一部を切り取って遮りを取り除き、建物内部の空間、階、部材の配置を確認できます。"},
          {t:"分解表示", d:"モデルの階や内容を分離して展開し、建物の構成や上下階の関係を見分けやすくします。"},
          {t:"グリッド表示", d:"モデル画面に補助グリッドを表示し、モデルの位置や建物の配置を読み取る助けにします。"},
          {t:"モデル上の距離計測", d:"モデル上で計測する位置を選ぶと 2 点間の距離を表示します。モデルの確認や寸法の把握に利用できます。"},
        ],
      },
      { id:"query", n:"03", t:"階と部材の検索",
        lead:"階から、ひとつの部材の情報まで",
        body:"スマート BIM はモデル内の階、要素の種類、ファミリの情報に沿って、段階的にモデルの内容を絞り込めます。指定した階に切り替えられるほか、部材を直接クリックしたり一覧から検索したりして、モデル上の位置をすばやく特定し、元の BIM モデルが持つ属性情報を確認できます。",
        features:[
          {t:"階のすばやい切り替え", d:"BIM モデルの階情報から階の一覧を作成し、指定した階を選んで読み込み・確認できます。"},
          {t:"階の表示制御", d:"必要に応じて指定した階を表示・非表示にできます。他の階による遮りを減らし、今見たい範囲に集中できます。"},
          {t:"モデル部材の選択", d:"モデル内の壁、扉、窓、設備などの部材を直接クリックして選択状態を表示し、関連情報を確認できます。"},
          {t:"部材へのフォーカス", d:"部材を選択すると、その位置に視点を寄せられます。空間的な関係をすばやく確認できます。"},
          {t:"部材の属性確認", d:"部材の名称、種類、識別情報、および IFC モデルの変換後も保持される属性やパラメータを確認できます。"},
          {t:"要素種類での絞り込み", d:"扉、窓など BIM の要素種類でモデルの内容を絞り込み、同じ種類の部材の一覧と分布をまとめて確認できます。"},
          {t:"ファミリタイプの確認", d:"指定した要素種類の中で、さらにファミリの種類とその部材明細を確認でき、仕様や形式の違いを見分けられます。"},
          {t:"一覧とモデルの連動", d:"検索結果から部材を選ぶとモデル上の該当位置に移動できます。逆にモデル上で部材を選んで属性を確認することもできます。"},
          {t:"モデルの表示・非表示", d:"階、レイヤー、モデルの内容に応じて部材の表示を制御し、今は不要な部分を一時的に隠して遮りを減らせます。"},
        ],
      },
      { id:"drawing", n:"04", t:"モデル情報と図面の活用",
        lead:"モデルの形状、属性、平面図の情報を統合する",
        body:"スマート BIM は三次元モデルと部材の属性を同じ画面に表示します。部材の空間的な位置を見ながら、モデルが持つデータも同時に把握できます。さらに平面図の重ね合わせ機能により、階の図面とモデルやプラットフォームの情報をまとめて表示できます。",
        features:[
          {t:"モデルと属性の同時表示", d:"モデルの部材をクリックすると、同じ画面で位置と関連する属性を確認できます。別の書類やシステムに切り替える手間が減ります。"},
          {t:"モデル情報の表示", d:"モデルの基本情報、階情報、部材の種類、識別情報、関連パラメータを統合し、三次元モデルから情報検索へ入る操作方法をつくります。"},
          {t:"モデル内容の制御", d:"今の目的に応じて、階、レイヤー、指定したモデル内容の表示・非表示を制御し、必要な情報だけを画面に残せます。"},
          {t:"平面図の読み込み", d:"階ごとに対応する平面図の画像を読み込み、プラットフォーム上でモデルと平面図の情報を確認できます。"},
          {t:"平面図の重ね合わせ", d:"階の平面図を、既存の位置と座標のデータに合わせてプラットフォーム上に重ねられます。二次元の図面と三次元モデルを見比べられます。"},
          {t:"重ね合わせ設定の保存", d:"図面名、対象の階、画像の位置、座標などのデータを保存し、重ね合わせの設定を継続して利用できます。"},
          {t:"重ね合わせの再現", d:"図面を再度開いたとき、保存済みの重ね合わせデータを読み込んで元の位置を再現します。毎回設定し直す必要はありません。"},
        ],
      },
      { id:"schedule", n:"05", t:"施工進捗管理",
        lead:"三次元モデルで施工ステップを表す",
        body:"施工進捗 BIM は工事の進捗データと BIM モデルを対応付けます。施工の段階ごとに、対応するモデルの内容を確認できます。工程表や一覧を読むだけの場合と比べ、三次元モデルは工事の対象範囲と各段階の建物の状態をより直感的に示します。",
        features:[
          {t:"モデルと進捗データの結合", d:"施工進捗のデータと BIM モデルの内容を対応付け、工事の進捗を三次元モデルから確認できるようにします。"},
          {t:"施工ステップの表示", d:"施工の段階ごとに対応するモデルの内容を表示し、各段階で建物がどの状態にあるかを把握できます。"},
          {t:"指定した段階の確認", d:"特定の施工段階を選ぶと、その段階に対応するモデルの範囲と関連する進捗情報を確認できます。"},
          {t:"工事進捗の確認", d:"施工進捗のデータから施工状況を把握し、そこから対応する BIM モデルの内容へ進めます。"},
          {t:"モデルからの進捗確認", d:"BIM モデルから、部材やモデルの内容が対応する施工段階を確認できます。モデルが進捗情報の視覚的なインターフェースになります。"},
          {t:"施工順序の理解", d:"施工段階ごとのモデル表示により、工事が時系列でどのように積み上がっていくかを理解しやすくなります。"},
        ],
      },
      { id:"gis", n:"06", t:"3D GIS による空間活用",
        lead:"地図から BIM モデルへアクセスする",
        body:"建築 3D GIS は、案件の位置、地理情報、BIM モデルを一元的に連携します。まず地図で建物や案件の位置を把握し、指定した建物を選んで対応する BIM モデルへ進むという、地図から建物・部材へと段階的に検索できます。",
        features:[
          {t:"案件位置の特定", d:"案件に設定した所在地と緯度経度の情報を使い、GIS の地図上に建物や案件の位置を表示します。"},
          {t:"地図からの建物確認", d:"地図の画面から複数の建物や案件の分布を確認でき、地理的な位置を起点としたモデル検索の入口をつくります。"},
          {t:"地図からのモデル選択", d:"GIS の地図で指定した建物や案件を選ぶと、対応する BIM モデルを開けます。"},
          {t:"BIM モデルの検索", d:"モデルに入った後は、階の切り替え、部材の選択、属性の確認、モデルの表示といった機能をそのまま利用できます。"},
          {t:"GIS と BIM の統合", d:"案件の緯度経度、地図上の位置、建物の BIM モデルをつなぎ、地理空間の全体像から建物の階や部材の情報へと段階的に深く入れます。"},
          {t:"三次元での空間表示", d:"三次元の地理情報として建物の位置と周辺の空間を表示し、建築モデルと周辺環境との情報のつながりを高めます。"},
        ],
      },
    ],
  },
};
window.PRODUCT_DATA = PRODUCT_DATA;

function ProductDetail({ productKey, onClose }) {
  const data = PRODUCT_DATA[productKey];
  const [active, setActive] = useState(data?.sections[0]?.id || "");
  const scrollRef = useRef(null);

  // Lock body when open
  useEffect(() => {
    if (!productKey) return;
    document.body.style.overflow = "hidden";
    document.body.classList.add("is-pd-open");
    return () => {
      document.body.style.overflow = "";
      document.body.classList.remove("is-pd-open");
    };
  }, [productKey]);

  // Scroll spy
  useEffect(() => {
    if (!productKey) return;
    const root = document.querySelector(".lx-pd-overlay");
    if (!root) return;
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setActive(e.target.id);
        });
      },
      { root, rootMargin: "-40% 0px -55% 0px", threshold: 0 }
    );
    const els = root.querySelectorAll(".lx-pd-sec");
    els.forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, [productKey]);

  // Esc to close
  useEffect(() => {
    if (!productKey) return;
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [productKey, onClose]);

  // Reset scroll on open
  useEffect(() => {
    if (productKey && scrollRef.current) scrollRef.current.scrollTop = 0;
  }, [productKey]);

  if (!data) return null;

  // 購入プランがある製品では、プランも 1 章として数える（IPCS はプランを外したので加算されない）
  const totalSecs = String(data.sections.length + (data.pricing ? 1 : 0)).padStart(2, '0');

  const clickNav = (id) => (ev) => {
    ev.preventDefault();
    const root = scrollRef.current;
    const target = root.querySelector(`#${id}`);
    if (target) {
      // overlay の scrollTop から target までの絶対位置を直接計算する
      setTimeout(() => {
        root.scrollTo({
          top: target.offsetTop - 40,
          behavior: "smooth"
        });
      }, 0);
    }
  };

  return (
    <div className={`lx-pd-overlay ${productKey ? "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">
          PRODUCT &nbsp;/&nbsp; <span>{data.code} — {data.zh}</span>
        </div>
      </div>

      <div className="lx-pd-hero">
        <div className="lx-pd-hero-inner">
          <div>
            <div className="lx-pd-kicker">{data.codeFull}</div>
            <h1 className="lx-pd-title">{data.zh}</h1>
            <div className="lx-pd-sub">{data.sub}</div>
            <p className="lx-pd-desc">{data.desc}</p>
          </div>
          <div className="lx-pd-hero-visual">
            <img src={data.hero} alt={data.zh} />
          </div>
        </div>
      </div>

      <div className="lx-pd-spy">
        <aside className="lx-pd-spy-nav">
          <span className="lx-eyebrow">機能ガイド · INDEX</span>
          <ul>
            {data.sections.map(s => (
              <li key={s.id} className={active === s.id ? "is-active" : ""}>
                <a href={`#${s.id}`} onClick={clickNav(s.id)}>
                  {s.n} · {s.t}
                </a>
              </li>
            ))}
            {data.pricing && (
              <li className={active === "pricing" ? "is-active" : ""}>
                <a href="#pricing" onClick={clickNav("pricing")}>{totalSecs} · 購入プラン</a>
              </li>
            )}
          </ul>
        </aside>

        <div className="lx-pd-spy-content">
          {data.sections.map(s => (
            <section key={s.id} id={s.id} className="lx-pd-sec">
              <span className="lx-pd-sec-num">{s.n} / {totalSecs}</span>
              <h2>{s.t}</h2>
              {s.lead && <p className="lx-pd-sec-lead">{s.lead}</p>}
              {s.body && <p>{s.body}</p>}

              {s.features && (
                <div className="lx-pd-features">
                  {s.features.map((f, i) => (
                    <div key={i} className={`lx-pd-feature ${f.accent ? "is-accent" : ""}`}>
                      <h4>{f.t}</h4>
                      <p>{f.d}</p>
                    </div>
                  ))}
                </div>
              )}

              {/* 機能／モジュールの一覧 */}
              {s.cards && (
                <div className="lx-pd-cards">
                  {s.cards.map((c) => (
                    <div key={c.n} className="lx-pd-card">
                      <span className="lx-pd-card-n">{c.n}</span>
                      <h4>{c.t}</h4>
                      <p>{c.d}</p>
                    </div>
                  ))}
                </div>
              )}

              {/* 応用範囲 */}
              {s.extra && (
                <div className="lx-pd-extra">
                  <span className="lx-pd-block-label">{s.extraLabel}</span>
                  <div className="lx-pd-extra-grid">
                    {s.extra.map((e) => (
                      <div key={e.t}><b>{e.t}</b><span>{e.d}</span></div>
                    ))}
                  </div>
                </div>
              )}

              {/* 業務の流れ */}
              {s.flow && (
                <div className="lx-pd-flow">
                  <span className="lx-pd-block-label">{s.flowLabel}</span>
                  <ol>
                    {s.flow.map((f) => <li key={f}>{f}</li>)}
                  </ol>
                </div>
              )}

              {/* 導入の効果 */}
              {s.benefits && (
                <ul className="lx-pd-benefits">
                  {s.benefits.map((b) => <li key={b}>{b}</li>)}
                </ul>
              )}

              {s.modules && (
                <div className="lx-pd-modules">
                  {s.modules.map((m, i) => (
                    <div key={i} className="lx-pd-module">
                      <div className="lx-pd-module-img">
                        <div className="lx-pd-module-placeholder">
                          <span className="lx-pd-module-placeholder-num">{m.n}</span>
                          <span className="lx-pd-module-placeholder-label">画像エリア</span>
                        </div>
                      </div>
                      <div className="lx-pd-module-body">
                        <div className="lx-pd-module-num">{m.n} / 05</div>
                        <h3 className="lx-pd-module-title">{m.t}</h3>
                        <p className="lx-pd-module-desc">{m.d}</p>
                        {m.tags && (
                          <div className="lx-pd-module-tags">
                            {m.tags.map((tag, j) => (
                              <span key={j} className="lx-pd-module-tag">{tag}</span>
                            ))}
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {s.stats && (
                <div className="lx-pd-statgrid">
                  {s.stats.map((st, i) => (
                    <div key={i}>
                      <div className="lx-pd-stat-n">{st.n}{st.sup && <sup>{st.sup}</sup>}</div>
                      <div className="lx-pd-stat-l">{st.l}</div>
                    </div>
                  ))}
                </div>
              )}

              {s.spec && (
                <table className="lx-pd-spec-table">
                  <tbody>
                    {s.spec.map((row, i) => (
                      <tr key={i}><th>{row[0]}</th><td>{row[1]}</td></tr>
                    ))}
                  </tbody>
                </table>
              )}
            </section>
          ))}

          {data.pricing && (
            <section id="pricing" className="lx-pd-sec" style={{borderBottom:0, paddingBottom:0}}>
              <span className="lx-pd-sec-num">{totalSecs} / {totalSecs}</span>
              <h2>購入プラン</h2>
              <p>{data.pricing.head.sub}</p>
            </section>
          )}
        </div>
      </div>

      {data.pricing && (
      <section className="lx-pricing">
        <div className="lx-pricing-inner">
          <div className="lx-pricing-grid">
            {data.pricing.plans.map((p, i) => (
              <div key={i} className={`lx-plan ${p.featured ? "is-featured" : ""}`}>
                {p.tag && <span className="lx-plan-tag">{p.tag}</span>}
                <div className="lx-plan-name">{p.name}</div>
                <h3 className="lx-plan-title">{p.title}</h3>
                <p className="lx-plan-tagline">{p.tagline}</p>

                <div className="lx-plan-price">
                  {p.custom ? (
                    <span className="lx-plan-custom">{p.custom}</span>
                  ) : (
                    <>
                      <span className="lx-plan-currency">¥</span>
                      <span className="lx-plan-amount">{p.price.toLocaleString()}</span>
                      <span className="lx-plan-per">{p.per}</span>
                    </>
                  )}
                </div>

                <ul className="lx-plan-features">
                  {p.features.map((f, idx) => {
                    const off = p.off && p.off.includes(idx);
                    return <li key={idx} className={off ? "is-off" : ""}>{f}</li>;
                  })}
                </ul>

                <button className="lx-plan-cta" onClick={() => { if (window.lxGoto) window.lxGoto("contact"); else onClose(); }}>
                  {p.custom ? "担当者に相談 CONTACT →" : "利用を開始 START →"}
                </button>
              </div>
            ))}
          </div>
          <p className="lx-pricing-note">
            金額はすべて日本円、税別です。年払いの場合は <strong style={{color:'var(--lx-ink-2)'}}>15% 割引</strong> となります。
            トライアルや規模に応じたお見積りをご希望の場合は、<a href="#contact" onClick={(e) => { e.preventDefault(); if (window.lxGoto) window.lxGoto("contact"); else onClose(); }}>担当者までお問い合わせください</a>。
          </p>
        </div>
      </section>
      )}
    </div>
  );
}
window.ProductDetail = ProductDetail;
