/* ============ Products — 兩大核心系統產品 ============
   依需求方提供的視覺稿改版：產品介紹只留智慧 BIM 圖台與 IPCS 智慧工地，
   左右並排各自呈現功能與價值。配色沿用官網（淺底 + 金色重點），
   不套原稿的藍／綠。
   ==================================================== */

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: "img/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: "電腦、平板、手機皆可用" },
      { t: "資料安全控管", d: "權限管理安心分享" }
    ]
  },
  {
    id: "ipcs",
    zh: "IPCS 智慧工地",
    en: "INTELLIGENT CONSTRUCTION SITE",
    tagline: "現場管理 · 進度掌握 · 品質安全一站整合",
    desc: "整合人員、機具、進度、查驗、巡檢、會議與追蹤等工地管理流程，透過行動化填報與即時數據掌握現場狀況，提升工地管理效率與施工品質。",
    shot: "img/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">兩大核心系統產品，打造完整工程數位管理</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;