/* ============ モジュール紹介ページ ============
   1 モジュール 1 ページ（ipcs-<slug>.html、smart-bim.html）。内容は modules.jsx。
   レイアウトは製品詳細（lx-pd-*）のスタイルを流用し、全画面ページではなく通常のページとして表示する。
   ==================================================== */

const MOD_GROUP = { ipcs: "IPCS スマート施工管理", bim: "IPCS スマート BIM", bimmod: "IPCS スマート BIM" };

function lxModuleFile(m) {
  return m.group === "ipcs" ? `ipcs-${m.slug}.html` : `${m.slug}.html`;
}
function lxModuleById(id) {
  return (window.LX_MODULES || []).find((m) => "m-" + m.slug === id) || null;
}

// サイト内の通常ページ（お問い合わせ、料金）はページ内で切り替える。Ctrl や中ボタンのクリックはブラウザ本来の動作（新しいタブ）に任せる
function modGo(id) {
  return (e) => {
    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    if (!window.lxGoto) return;
    e.preventDefault();
    window.lxGoto(id);
  };
}

function ModuleLinks({ exclude }) {
  const all = window.LX_MODULES || [];
  return (
    <>
      {[["bim", "bimmod"], ["ipcs"]].map(([g, g2]) => {
        const list = all.filter((m) => (m.group === g || m.group === g2) && m.slug !== exclude);
        if (!list.length) return null;
        return (
          <div key={g} className="lx-mod-index-group">
            <b>{MOD_GROUP[g]}</b>
            <div className="lx-mod-pills">
              {list.map((m) => <a key={m.slug} href={lxModuleFile(m)}>{m.name}</a>)}
            </div>
          </div>
        );
      })}
    </>
  );
}

/* IPCS スマート施工管理のモジュールカード一覧（製品紹介 → IPCS スマート施工管理 → 詳しく見る）。
   カードの名称とサブタイトルは modules.jsx の name・card、並び順も modules.jsx のとおり。最後の 1 枚は別途契約の IPCS スマート BIM。 */
const MOD_ICON = {
  "site-personnel": <><circle cx="9" cy="8" r="3.2" /><path d="M3 19.5c0-3.3 2.7-5.6 6-5.6s6 2.3 6 5.6" /><circle cx="17" cy="9" r="2.4" /><path d="M16.6 13.8c2.6.2 4.4 2.3 4.4 5.2" /></>,
  "data-hub": <><ellipse cx="12" cy="5.5" rx="7" ry="2.5" /><path d="M5 5.5v13c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-13" /><path d="M5 12c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5" /></>,
  "safety-inspection": <><path d="M12 3l7 3v5.5c0 4.4-3 7.7-7 9.5-4-1.8-7-5.1-7-9.5V6l7-3z" /><path d="M8.8 12l2.2 2.2 4.2-4.4" /></>,
  "inspection": <><rect x="5" y="4.5" width="14" height="16.5" rx="1.5" /><path d="M9 4.5V3h6v1.5" /><path d="M8.8 13l2.2 2.2 4.2-4.4" /></>,
  "equipment-management": <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9l-3.8 3.8z" />,
  "daywork-management": <><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></>,
  "daily-report": <><path d="M14 3H7a1.5 1.5 0 0 0-1.5 1.5v15A1.5 1.5 0 0 0 7 21h10a1.5 1.5 0 0 0 1.5-1.5V7.5L14 3z" /><path d="M14 3v4.5h4.5" /><path d="M9 12h6M9 15.5h6" /></>,
  "gantt-chart": <><path d="M4 4v16h16" /><path d="M8 8h6M10 12h7M8 16h4" /></>,
  "work-tracking": <><path d="M4 6.5l1.5 1.5L8 5.5M4 12.5l1.5 1.5L8 11.5M4 18.5l1.5 1.5L8 17.5" /><path d="M11 7h9M11 13h9M11 19h9" /></>,
  "meeting-management": <><path d="M4 5h11v8H8l-4 3V5z" /><path d="M15 9h5v8.5l-3-2.5h-6v-2" /></>,
  "drawing-collaboration": <><path d="M4 4h11l5 5v11H4V4z" /><path d="M8 16l6.5-6.5 2 2L10 18H8v-2z" /></>,
  "file-management": <path d="M3.5 6.5A1.5 1.5 0 0 1 5 5h4.5l2 2.5H19a1.5 1.5 0 0 1 1.5 1.5v8.5A1.5 1.5 0 0 1 19 19H5a1.5 1.5 0 0 1-1.5-1.5v-11z" />,
  "site-gis": <><path d="M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z" /><circle cx="12" cy="10" r="2.4" /></>,
  "approval": <><path d="M9.5 3.5h5l-1 7h-3l-1-7z" /><path d="M5 14.5h14v3H5z" /><path d="M5 20.5h14" /><path d="M10.5 10.5v4M13.5 10.5v4" /></>,
  "calendar": <><rect x="3.5" y="5" width="17" height="15.5" rx="1.5" /><path d="M3.5 9.5h17M8 3v4M16 3v4" /></>,
  "dashboard": <><rect x="4.5" y="12" width="3.5" height="8" rx="1.2" /><rect x="10.25" y="5" width="3.5" height="15" rx="1.2" /><rect x="16" y="9" width="3.5" height="11" rx="1.2" /></>,
  "schema-code": <><rect x="9" y="3" width="6" height="4.5" rx="1" /><rect x="3" y="16.5" width="6" height="4.5" rx="1" /><rect x="15" y="16.5" width="6" height="4.5" rx="1" /><path d="M12 7.5V12M6 16.5V12h12v4.5" /></>,
  "smart-bim": <><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" /><path d="M4 7.5l8 4.5 8-4.5M12 12v9" /></>,
  "bim-building": <><path d="M4 21V8l8-5 8 5v13" /><path d="M9 21v-5h6v5M8 11h2M14 11h2" /></>,
  "bim-viewer": <><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" /><circle cx="12" cy="12" r="2.6" /></>,
  "bim-space": <><rect x="3.5" y="4" width="17" height="16" rx="1" /><path d="M3.5 11h9V4M12.5 11v9M12.5 15h8" /></>,
  "bim-progress": <><path d="M4 20V10l4-2v12M10 20V7l4-2v15M16 20V4l4-1v17" /><path d="M3 20h18" /></>,
  "bim-issues": <><path d="M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z" /><path d="M12 7v4M12 13.5v.5" /></>,
  "bim-model-check": <><path d="M4 7.5l6-3.5 6 3.5v7l-6 3.5-6-3.5v-7z" /><circle cx="17" cy="17" r="3.2" /><path d="M19.4 19.4L21.5 21.5" /></>,
  "bim-facility": <><rect x="4" y="4" width="7" height="7" rx="1" /><rect x="13" y="4" width="7" height="7" rx="1" /><rect x="4" y="13" width="7" height="7" rx="1" /><path d="M13 13h3v3h-3zM17 17h3v3h-3zM17 13h3M13 17v3" /></>,
  "bim-simulation": <><circle cx="12" cy="5.5" r="2" /><path d="M12 8v6l-3 6M12 14l3 6M8 11h8" /></>,
  "bim-sharing": <><circle cx="17.5" cy="5.5" r="2.5" /><circle cx="6.5" cy="12" r="2.5" /><circle cx="17.5" cy="18.5" r="2.5" /><path d="M8.7 10.8l6.6-4M8.7 13.2l6.6 4" /></>,
  "bim-3dgis": <><circle cx="12" cy="12" r="8.5" /><path d="M3.5 12h17M12 3.5c2.6 2.3 3.9 5.1 3.9 8.5s-1.3 6.2-3.9 8.5c-2.6-2.3-3.9-5.1-3.9-8.5s1.3-6.2 3.9-8.5z" /></>,
};

function ModuleCard({ mod, badge }) {
  return (
    <a className="lx-modgrid-card" href={lxModuleFile(mod)}>
      <span className="lx-modgrid-ico" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">{MOD_ICON[mod.slug]}</svg>
      </span>
      <span className="lx-modgrid-text">
        <b>{mod.name}{badge && <em>{badge}</em>}</b>
        <small>{mod.card}</small>
      </span>
      <span className="lx-modgrid-arrow" aria-hidden="true">→</span>
    </a>
  );
}

function IpcsModuleGrid() {
  const all = window.LX_MODULES || [];
  const bim = all.find((m) => m.group === "bim");
  return (
    <section className="lx-modgrid">
      <header className="lx-modgrid-head">
        <span className="lx-modgrid-eyebrow">機能モジュール</span>
        <h2>IPCS スマート施工管理 機能モジュール</h2>
        <p className="lx-modgrid-sub">現場管理・工程の把握・品質と安全・協働を、ひとつのプラットフォームで</p>
        <p className="lx-modgrid-note">1 つのアカウントでログインし、権限は案件と役割ごとに設定できます。標準モジュールはすべてご利用いただけます。モジュールを選ぶと詳しい紹介をご覧いただけます。</p>
      </header>
      <div className="lx-modgrid-list">
        {all.filter((m) => m.group === "ipcs").map((m) => <ModuleCard key={m.slug} mod={m} />)}
        {bim && <ModuleCard mod={bim} badge="別途契約" />}
      </div>
    </section>
  );
}


/* IPCS スマート BIM の機能モジュール（製品紹介 → IPCS スマート BIM → 詳しく見る）。
   modules.jsx の group: "bimmod"。プラン・仕様・実測データは smart-bim.html と料金プランのページ。 */
function BimModuleGrid() {
  const all = window.LX_MODULES || [];
  return (
    <section className="lx-modgrid">
      <header className="lx-modgrid-head">
        <span className="lx-modgrid-eyebrow">機能モジュール</span>
        <h2>IPCS スマート BIM 機能モジュール</h2>
        <p className="lx-modgrid-sub">モデル閲覧・施工進捗・設備管理・複数案件の地図表示で、モデルを設計から維持管理まで活用</p>
        <p className="lx-modgrid-note">ブラウザでそのまま開け、インストールは不要です。社外の方は共有リンクからログインなしで閲覧できます。3D GIS 複数案件ビューはエンタープライズプランで提供します。モジュールを選ぶと詳しい紹介をご覧いただけます。</p>
      </header>
      <div className="lx-modgrid-list">
        {all.filter((m) => m.group === "bimmod").map((m) => <ModuleCard key={m.slug} mod={m} />)}
      </div>
    </section>
  );
}

/* 困擾 → 解決 → 效益的一格：{t 短標題, d 一行說明}；舊資料是一句字串也照樣顯示 */
const psgKey = (c) => (typeof c === "string" ? c : c.t);
function PsgCell({ c }) {
  if (typeof c === "string") return <p>{c}</p>;
  return <><b>{c.t}</b><p>{c.d}</p></>;
}

function ModulePage({ mod }) {
  const all = window.LX_MODULES || [];
  const related = (mod.related || []).map((s) => all.find((m) => m.slug === s)).filter(Boolean);
  const group = MOD_GROUP[mod.group];
  const isProduct = mod.group === "bim";

  /* 内容のタブ：並んだラベルでこのページの内容がひと目で分かり、クリックで切り替える。
     すべてのタブを HTML に出力し（選ばれていないものは hidden）、検索エンジンにも読ませる。 */
  const tabs = [
    { id: "features", label: "主な機能", body: (
      mod.fgroups ? (
        <>
          {mod.fgroups.map((g) => (
            <div key={g.g} className="lx-mod-fgroup">
              <h3 className="lx-mod-fgroup-h">{g.g}</h3>
              <div className="lx-pd-features lx-mod-features">
                {g.items.map((f) => (
                  <div key={f.t} className="lx-pd-feature">
                    <h3>{f.t}</h3>
                    <p>{f.d}</p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </>
      ) : (
      <div className="lx-pd-features lx-mod-features">
        {mod.features.map((f) => (
          <div key={f.t} className="lx-pd-feature">
            <h3>{f.t}</h3>
            <p>{f.d}</p>
          </div>
        ))}
      </div>
      )
    ) },
    isProduct && window.LX_PROD_SPECS && { id: "specs", label: "仕様一覧", body: (
      <div className="lx-pd-extra-grid">
        {window.LX_PROD_SPECS.bim.map(([k, v]) => <div key={k}><b>{k}</b><span>{v}</span></div>)}
      </div>
    ) },
    mod.tests && { id: "tests", label: "実測データ", body: (
      <>
        <p className="lx-mod-test-intro">{mod.testsIntro}</p>
        <div className="lx-pd-cards">
          {mod.tests.map((x) => (
            <div key={x.t} className="lx-pd-card">
              <h3>{x.t}</h3>
              <p>{x.d}</p>
              <p className="lx-mod-test-note">{x.note}</p>
            </div>
          ))}
        </div>
      </>
    ) },
    { id: "pain-gain", label: mod.pgs ? "課題・解決・効果" : "課題と効果", body: mod.pgs ? (
      <div className="lx-mod-psg">
        <div className="lx-mod-psg-head" aria-hidden="true">
          <span>よくある課題</span><span>IPCS の解決方法</span><span>導入の効果</span>
        </div>
        {mod.pgs.map((r) => (
          <div key={psgKey(r.p)} className="lx-mod-psg-row">
            <div className="is-p"><em>よくある課題</em><PsgCell c={r.p} /></div>
            <div className="is-s"><em>IPCS の解決方法</em><PsgCell c={r.s} /></div>
            <div className="is-g"><em>導入の効果</em><PsgCell c={r.g} /></div>
          </div>
        ))}
      </div>
    ) : (
      <div className="lx-mod-pg">
        <div>
          <h3>よくある課題</h3>
          <ul className="lx-mod-list is-pain">
            {mod.pains.map((p) => <li key={p}>{p}</li>)}
          </ul>
        </div>
        <div>
          <h3>導入の効果</h3>
          <ul className="lx-mod-list is-gain">
            {mod.benefits.map((b) => <li key={b}>{b}</li>)}
          </ul>
        </div>
      </div>
    ) },
    { id: "compare", label: mod.cmp ? "従来の方法との比較" : "ほかの方法との違い", body: mod.cmp ? (
      <div className="lx-mod-cmp">
        <div className="lx-mod-cmp-head" aria-hidden="true">
          <span>従来の方法</span><span>IPCS の方法</span>
        </div>
        {mod.cmp.map((r) => (
          <div key={r.a} className="lx-mod-cmp-row">
            <div className="is-a"><em>従来の方法</em><b>{r.a}</b></div>
            <div className="is-b"><em>IPCS の方法</em><p>{r.b}</p></div>
          </div>
        ))}
      </div>
    ) : (
      <div className="lx-pd-extra-grid">
        {mod.advantages.map((a) => <div key={a.t}><b>{a.t}</b><span>{a.d}</span></div>)}
      </div>
    ) },
    { id: "audience", label: "こんな方に", body: (
      <div className="lx-pd-cards">
        {mod.audience.map((a) => (
          <div key={a.t} className="lx-pd-card">
            <h3>{a.t}</h3>
            <p>{a.d}</p>
          </div>
        ))}
      </div>
    ) },
    related.length > 0 && { id: "related", label: "あわせて使う", body: (
      <div className="lx-mod-related">
        {related.map((m) => (
          <a key={m.slug} href={lxModuleFile(m)}>
            <b>{m.name}</b>
            <span>{m.tagline}</span>
          </a>
        ))}
      </div>
    ) },
  ].filter(Boolean);
  /* 有「困擾 → 解決 → 效益」對照的模組，把它放第一個分頁：先講問題怎麼被解決，再看完整功能 */
  if (mod.pgs) tabs.sort((x, y) => (y.id === "pain-gain") - (x.id === "pain-gain"));
  const [tab, setTab] = React.useState(tabs[0].id);
  const pick = (id) => () => {
    setTab(id);
    const bar = document.getElementById("lx-mod-tabs");
    if (bar && bar.getBoundingClientRect().top < 0) bar.scrollIntoView({ block: "start" });
  };

  return (
    <article className="lx-mod">
      <header className="lx-pd-hero lx-mod-hero">
        <div className="lx-mod-hero-inner">
          <nav className="lx-mod-crumb" aria-label="現在位置">
            <a href="product.html" onClick={modGo("product")}>製品紹介</a>
            {!isProduct && <><span>/</span><span>{group}</span></>}
          </nav>
          <div className="lx-pd-kicker">{isProduct ? "製品" : mod.group === "bimmod" ? "IPCS スマート BIM · モジュール" : "IPCS スマート施工管理 · モジュール"}</div>
          <h1 className="lx-pd-title">{mod.name}</h1>
          <div className="lx-pd-sub">{mod.tagline}</div>
          {/* 冒頭の説明は箇条書き（mod.points）。mod.intro は検索結果に出る説明文として残す */}
          <LxPoints items={mod.points} />
        </div>
      </header>

      <div className="lx-mod-tabs" id="lx-mod-tabs">
        <div className="lx-mod-tabs-inner" role="tablist" aria-label="モジュールの内容">
          {tabs.map((x) => (
            <button key={x.id} type="button" role="tab" id={"lx-tab-" + x.id}
              aria-selected={tab === x.id} aria-controls={"lx-panel-" + x.id}
              className={"lx-mod-tab" + (tab === x.id ? " is-active" : "")}
              onClick={pick(x.id)}>{x.label}</button>
          ))}
        </div>
      </div>

      <div className="lx-mod-body">
        {tabs.map((x) => (
          <section key={x.id} id={"lx-panel-" + x.id} role="tabpanel" aria-labelledby={"lx-tab-" + x.id}
            className="lx-mod-panel" hidden={tab !== x.id}>
            <h2 className="lx-sr">{x.label}</h2>
            {x.body}
          </section>
        ))}

        <section className="lx-pd-sec lx-mod-next">
          <h2>貴社の現場での使い方をご相談ください</h2>
          <p>工事の種類と管理の流れをお聞かせください。担当者より 30 分の無料相談をご案内します。</p>
          <div className="lx-mod-cta">
            <a className="lx-core-cta is-primary" href="contact.html" onClick={modGo("contact")}>お問い合わせ →</a>
            <a className="lx-core-cta" href="pricing.html" onClick={modGo("pricing")}>料金プランを見る</a>
          </div>
        </section>

        <section className="lx-mod-all">
          <span className="lx-pd-block-label">ほかのモジュール</span>
          <ModuleLinks exclude={mod.slug} />
        </section>
      </div>
    </article>
  );
}

window.LX_MOD_GROUP = MOD_GROUP;
window.lxModuleFile = lxModuleFile;
window.lxModuleById = lxModuleById;
window.IpcsModuleGrid = IpcsModuleGrid;
window.BimModuleGrid = BimModuleGrid;
window.ModulePage = ModulePage;