/* ============ Products — 2つのコア製品 ============
   製品紹介はスマート BIM プラットフォームと IPCS スマート現場管理の
   2製品のみを左右に並べ、それぞれの機能と価値を提示する。
   配色は公式サイト（淡色背景＋ゴールドのアクセント）を踏襲。
   ==================================================== */

const ico = (d) => (
  <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"
       strokeLinecap="round" strokeLinejoin="round" width="17" height="17">{d}</svg>
);

const PROD_CORE = [
  {
    id: "bim",
    zh: "スマート BIM プラットフォーム",
    en: "SMART BIM PLATFORM",
    tagline: "スムーズな閲覧 · 的確な検索 · 協業を支える 3D デジタル基盤",
    desc: "BIM モデルと工事情報を一元化し、3D モデルの閲覧、レイヤー管理、部材検索、書類の統合といった機能を提供します。マルチデバイスでの閲覧と協業に対応し、工事情報をより直感的に、より効率的に扱えます。",
    shot: "assets/prod-bim.webp",
    features: [
      { t: "3D モデル閲覧", d: "IFC · 3D Tiles · GLB に対応", i: ico(<><path d="M10 2l7 4v8l-7 4-7-4V6l7-4z" /><path d="M3 6l7 4 7-4M10 10v8" /></>) },
      { t: "部材検索", d: "属性情報をすばやく確認", i: ico(<><circle cx="9" cy="9" r="5.5" /><path d="M13 13l4 4" /></>) },
      { t: "レイヤー・モデル管理", d: "複数モデルを統合して管理", i: ico(<><path d="M10 3l7 4-7 4-7-4 7-4z" /><path d="M3 11l7 4 7-4M3 15l7 4 7-4" /></>) },
      { t: "書類の統合", d: "図面 · 写真 · ファイル管理", i: ico(<><path d="M4 3h7l5 5v9a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1z" /><path d="M11 3v5h5M6 11h8M6 14h5" /></>) },
      { t: "共有・共同作業", d: "社内外の関係者がリアルタイムに連携", i: ico(<><circle cx="7" cy="7" r="2.5" /><circle cx="14" cy="8" r="2" /><path d="M2 16c0-2.8 2.2-5 5-5s5 2.2 5 5M13 11.5c2.6 0 4.5 1.9 4.5 4.5" /></>) }
    ],
    values: [
      { t: "情報を統合して可視化", d: "モデルとデータを一体で管理" },
      { t: "的確な検索と絞り込み", d: "必要な情報にすぐ到達" },
      { t: "協業の効率化", d: "組織を越えてリアルタイムに連携" },
      { t: "マルチデバイス対応", d: "PC・タブレット・スマホで利用可能" },
      { t: "データの安全な管理", d: "権限管理により安心して共有" }
    ]
  },
  {
    id: "ipcs",
    zh: "IPCS スマート現場管理",
    en: "INTELLIGENT CONSTRUCTION SITE",
    tagline: "現場管理 · 進捗把握 · 品質と安全をひとつに",
    desc: "作業員、機材、工程進捗、検査、パトロール、会議、課題追跡といった現場業務を一元化します。モバイル入力とリアルタイムのデータで現場の状況を把握し、現場管理の効率と施工品質を高めます。",
    shot: "assets/prod-ipcs.webp",
    features: [
      { t: "入退場・作業員管理", d: "顔認証ゲート連携 · 入退場記録", i: ico(<><circle cx="10" cy="6" r="3" /><path d="M3 17c0-3.3 3.1-6 7-6s7 2.7 7 6" /></>) },
      { t: "進捗管理", d: "ガントチャート · 計画／実績管理", i: ico(<><path d="M3 4h9M3 8h13M3 12h7M3 16h11" /></>) },
      { t: "工事検査", d: "一次・二次・三次検査 · 品質管理", i: ico(<><rect x="4" y="3" width="12" height="14" rx="1.5" /><path d="M7 8.5l1.6 1.6L12.5 6.5M7 13.5h6" /></>) },
      { t: "安全衛生管理", d: "パトロール · 定期点検 · 是正管理", i: ico(<><path d="M10 2l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V5l7-3z" /><path d="M7.5 10l1.8 1.8L13 8" /></>) },
      { t: "会議と課題追跡", d: "作業項目の進捗管理 · タスク管理", i: ico(<><path d="M3 10c0-3.9 3.1-7 7-7s7 3.1 7 7-3.1 7-7 7c-1.5 0-2.9-.5-4-1.3L3 18v-8z" /><path d="M7 9h6M7 12h4" /></>) }
    ],
    values: [
      { t: "現場をリアルタイムに把握", d: "データが即時に反映" },
      { t: "業務プロセスの標準化", d: "業務効率の向上" },
      { t: "品質と安全の両立", d: "リスクと不具合を低減" },
      { t: "モバイルでの作業", d: "スマホ・タブレットでいつでも入力" },
      { t: "クラウドでデータ統合", d: "一元管理で記録の漏れを防ぐ" }
    ]
  }
];

function Products({ onOpen }) {
  const headRef = useReveal(0.3);

  return (
    <section className="lx-section lx-products" id="product">
      <div className="lx-container">
        <div className="lx-section-head is-center lx-reveal" ref={headRef}>
          <span className="lx-section-eyebrow-line">PRODUCT · 製品紹介</span>
          <h2 className="lx-section-title">2つのコア製品で、建設プロジェクトのデジタル管理を一気通貫で支える</h2>
          <p className="lx-section-sub">設計・施工から維持管理まで。BIM プラットフォームとスマート現場管理を統合し、プロジェクトの効率と品質を高めます</p>
        </div>

        <div className="lx-core-grid">
          {PROD_CORE.map((p, i) => <CoreCard key={p.id} item={p} delay={i * 120} onOpen={onOpen} />)}
        </div>

        <div className="lx-core-band">
          <b>一元化 · データ連携</b>
          <span>スマート BIM プラットフォームと IPCS スマート現場管理はデータが相互に連携します。3D モデルから現場管理まで、デジタル施工管理の新しい標準をつくります。</span>
        </div>
      </div>
    </section>);
}

function CoreCard({ item, delay, onOpen }) {
  const ref = useReveal();
  return (
    <article
      ref={ref}
      className="lx-core-card lx-reveal"
      style={{ transitionDelay: `${delay}ms` }}>

      <header className="lx-core-head">
        <span className="lx-core-en">{item.en}</span>
        <h3 className="lx-core-title">{item.zh}</h3>
        <p className="lx-core-tagline">{item.tagline}</p>
        <p className="lx-core-desc">{item.desc}</p>
      </header>

      <ul className="lx-core-features">
        {item.features.map((f) =>
          <li key={f.t}>
            <span className="lx-core-feature-ico">{f.i}</span>
            <b>{f.t}</b>
            <span className="lx-core-feature-d">{f.d}</span>
          </li>
        )}
      </ul>

      <div className="lx-core-shot">
        <img src={item.shot} alt={item.zh} />
      </div>

      <div className="lx-core-values">
        <span className="lx-core-values-label">導入によるメリット</span>
        <div className="lx-core-values-grid">
          {item.values.map((v) =>
            <div key={v.t}><b>{v.t}</b><span>{v.d}</span></div>
          )}
        </div>
      </div>

      <button className="lx-core-cta" onClick={() => onOpen(item.id)}>
        製品詳細を見る →
      </button>
    </article>);
}

window.Products = Products;