/* ============ 30 日間無料トライアル × プラン説明 × プラン比較表 ============
   配色は公式サイトの色（濃色背景 + ゴールドのアクセント）を使用。
   ※ 金額は日本円・税別。
   =============================================================== */

const TP_HIGHLIGHTS = [
  { t: 'IFC アップロード', d: '50MB まで' },
  { t: 'モデルをすばやく表示', d: 'インストール不要' },
  { t: 'すぐに体験できる', d: 'ログインするだけ' }
];

const TP_SPECS = ['月 500 ポイント', '編集・操作アカウント 3 名', 'ビューアーは無料'];

const TP_PRODUCTS = [
  { t: '建築管理 BIM', d: '設計 · モデル · 資産管理' },
  { t: '施工進捗 BIM', d: '進捗追跡 · 現場協業' },
  { t: '3D GIS', d: '空間情報 · 地理データ統合' }
];

const TP_TRUST = [
  { t: 'クラウド基盤', d: '安全で信頼できる' },
  { t: 'すばやい表示', d: 'なめらかな閲覧' },
  { t: '多様な形式に対応', d: 'IFC を完全に解析' },
  { t: 'マルチデバイス対応', d: 'いつでもどこでも確認' }
];

const TP_PLANS = [
  { key:'s', name:'スタータープラン S', price:'¥8,990', per:'/ 月', point:'月 500 ポイント',
    who:'初めての導入／小規模チーム', seat:'編集・操作アカウント 3 名' },
  { key:'a', name:'プロフェッショナルプラン A', price:'¥29,900', per:'/ 月', point:'月 3,000 ポイント',
    who:'中規模案件／部門をまたぐ協業', seat:'編集・操作アカウント 10 名', featured:true, tag:'おすすめ' },
  { key:'b', name:'エンタープライズプラン B', price:'¥119,000', per:'/ 月', point:'月 15,000 ポイント',
    who:'グループ企業／複数案件の管理', seat:'編集・操作アカウント 30 名' },
  { key:'x', name:'カスタマイズプラン', price:'お問い合わせ', per:'', point:'カスタマイズ',
    who:'大企業／居住者向けポータル／システム連携', seat:'カスタマイズ' }
];

/* 比較表：v はチェック、x はバツ、それ以外はテキスト */
const TP_TABLE = [
  { group:'料金とポイント', rows:[
    ['月額料金', '¥8,990 / 月', '¥29,900 / 月', '¥119,000 / 月', 'お問い合わせ'],
    ['月間の基本ポイント', '500 ポイント', '3,000 ポイント', '15,000 ポイント', 'カスタマイズ'],
    ['ポイントの追加購入', '¥3,000／500 ポイント', '¥3,000／500 ポイント', '¥3,000／500 ポイント', 'ご要望に応じて設計']
  ]},
  { group:'主な機能', rows:[
    ['建築管理 BIM', 'v', 'v', 'v', 'カスタマイズ対応'],
    ['施工進捗 BIM', 'v', 'v', 'v', 'カスタマイズ対応'],
    ['3D GIS', 'x', 'v', 'v', 'カスタマイズ対応'],
    ['IFC のアップロードとモデル閲覧', 'v', 'v', 'v', 'カスタマイズ対応'],
    ['クラウド基盤のマルチデバイス利用', 'v', 'v', 'v', 'v']
  ]},
  { group:'アカウントと利用', rows:[
    ['編集・操作アカウント', '3 名', '10 名', '30 名', 'カスタマイズ'],
    ['閲覧専用アカウント（Viewer）', '無料', '無料', '無料', '無料'],
    ['30 日間トライアル', 'v', '要相談', '要相談', '要相談'],
    ['同一モデルの更新 2 回まで', '追加料金なし', '追加料金なし', '追加料金なし', 'プランによる']
  ]},
  { group:'サポートと導入', rows:[
    ['想定されるお客様', '初めての導入／小規模チーム', '中規模案件／部門をまたぐ協業', 'グループ企業／複数案件の管理', '大企業／居住者向けポータル／システム連携'],
    ['50MB 以下のモデルをすぐに体験', 'v', 'v', 'v', 'ご要望に応じて'],
    ['居住者向けポータル／建物管理での活用', 'x', 'x', 'カスタマイズ対応', 'v'],
    ['システム連携とカスタマイズ導入', 'x', 'x', 'カスタマイズ対応', 'v']
  ]}
];

const TP_NOTES = [
  'S プランには 3D GIS は含まれません',
  '同一モデルの更新は 2 回まで追加料金なし。3 回目以降は規定に従いポイントを消費します',
  '50MB 以下の基本モデルはすぐに体験できます',
  '施工進捗 BIM はモデルの規模に応じてより高いポイント消費基準が適用されます'
];

/* ---------- モデル処理パックの必要ポイント基準 ---------- */
/* IFC の元ファイルサイズとモデルの用途に応じて消費。施工進捗 BIM は建築管理 BIM の 3 倍 */
const TP_PT_TABLE = [
  ['50MB 以下',        '500 ポイント',   '1,500 ポイント'],
  ['50MB 〜 100MB',    '1,000 ポイント', '3,000 ポイント'],
  ['100MB 〜 200MB',   '2,500 ポイント', '7,500 ポイント'],
  ['200MB 〜 500MB',   '5,000 ポイント', '15,000 ポイント'],
  ['500MB 以上',       '別途お見積り',     '別途お見積り']
];

/* 1 つの処理パックに含まれる 3 回 */
const TP_PT_PACK = [
  { n: '1 回目', t: '初回のモデル処理' },
  { n: '2 回目', t: '同一モデルの 1 回目の更新' },
  { n: '3 回目', t: '同一モデルの 2 回目の更新' }
];

const TP_PT_OK = [
  ['同一案件', '同じ案件内のモデルであること'],
  ['同一モデル', '元のモデルの更新版であること。別のモデルへの差し替えは不可'],
  ['同一用途', '建築管理 BIM から施工進捗 BIM への変更は不可'],
  ['同一区分', '更新後の IFC ファイルサイズが元の区分を超えないこと']
];

/* ポイントの追加購入：¥3,000 を 1 単位とし、追加分は失効しない */
const TP_PT_TOPUP = [
  { amount: '¥3,000', point: '500 ポイント' },
  { amount: '¥6,000', point: '1,000 ポイント' },
  { amount: '¥9,000', point: '1,500 ポイント' }
];

const TP_PT_RULES = [
  ['ポイントの用途', 'モデル処理、施工進捗 BIM の処理、モデルの更新'],
  ['月間付与ポイント', 'プランに応じて毎月一定のポイントを付与。翌月への繰り越しはありません'],
  ['追加購入ポイント', '¥3,000 単位で購入でき、契約が終了するまで保持されます'],
  ['Viewer での閲覧', '外部 Viewer での閲覧のみではポイントを消費しません'],
  ['大規模モデル', '500MB 以上、または部材数の多いモデルは別途お見積りとなります']
];

const TP_PT_EXAMPLES = [
  ['スタータープラン', '500 ポイント', '50MB 以下の建築管理 BIM を月 1 件処理でき、同一モデルの更新 2 回を含みます'],
  ['プロフェッショナルプラン', '3,000 ポイント', '50MB〜100MB の施工進捗 BIM を 1 件、または建築管理 BIM を複数件処理できます'],
  ['エンタープライズプラン', '15,000 ポイント', '200MB〜500MB の施工進捗 BIM を 1 件、または中規模の建築管理 BIM を複数件処理できます'],
  ['カスタマイズプラン', 'カスタマイズ', '大規模モデル、部材数の多い設備系モデル、複数案件、社内モデルライブラリ、システム連携など']
];

/* ---------- トップページ：無料トライアルのメインビジュアル ---------- */
function TrialBanner({ onCompare, onTrial }) {
  const ref = useReveal(0.2);
  return (
    <section className="lx-trial is-first" id="home" ref={ref}>
      {/* 日本でのサービス開始時期の告知 */}
      <div className="lx-launch">
        <span className="lx-launch-tag">COMING SOON</span>
        <b>{LX_LAUNCH} 正式サービス開始予定</b>
        <span className="lx-launch-note">日本国内でのサービス提供は準備中です。事前のご相談・お問い合わせは承っております。</span>
      </div>

      <div className="lx-trial-inner">
        <div className="lx-trial-main">
          <div className="lx-trial-brand">
            <span className="lx-trial-brand-name">スマート BIM プラットフォーム</span>
            <span className="lx-trial-brand-sub">建築管理 BIM ／ 施工進捗 BIM ／ 3D GIS</span>
          </div>

          <h2 className="lx-trial-head">
            無料トライアル<strong>30</strong>日間
          </h2>
          <p className="lx-trial-sub">ログインするだけで、すぐにご体験いただけます</p>

          <ul className="lx-trial-quick">
            {TP_HIGHLIGHTS.map((h) =>
              <li key={h.t}><b>{h.t}</b><span>{h.d}</span></li>
            )}
          </ul>

          <div className="lx-trial-price">
            <span className="lx-trial-price-label">体験価格</span>
            <span className="lx-trial-price-num">¥8,990</span>
            <span className="lx-trial-price-per">／月〜</span>
          </div>

          <div className="lx-trial-specs">
            {TP_SPECS.map((s) => <span key={s}>{s}</span>)}
          </div>

          <div className="lx-trial-products">
            {TP_PRODUCTS.map((p) =>
              <div key={p.t}><b>{p.t}</b><span>{p.d}</span></div>
            )}
          </div>

          <div className="lx-trial-cta">
            {/* サービス開始前のため、主 CTA はトライアル開始ではなく事前相談に向ける */}
            <button className="lx-trial-btn is-primary" onClick={() => { if (window.lxGoto) window.lxGoto('contact'); }}>
              事前のご相談・お問い合わせ →
            </button>
            <button className="lx-trial-btn" onClick={onCompare}>詳しい説明を見る</button>
          </div>
          <p className="lx-trial-foot">まずは小規模に始め、プラットフォームの価値をご体感いただけます</p>
        </div>

        <aside className="lx-trial-side">
          <div className="lx-trial-shot">
            <img src="assets/prod-bim.webp" alt="スマート BIM プラットフォーム" />
          </div>
          <div className="lx-trial-trust">
            {TP_TRUST.map((t) =>
              <div key={t.t}><b>{t.t}</b><span>{t.d}</span></div>
            )}
          </div>
        </aside>
      </div>
    </section>
  );
}

/* ---------- プラン比較表（全画面） ---------- */
function PlanCompare({ open, onClose, onTrial }) {
  const { useEffect: uE, useRef: uR } = React;
  const scrollRef = uR(null);

  uE(() => {
    if (!open) return;
    document.body.style.overflow = 'hidden';
    document.body.classList.add('is-pd-open');
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => {
      document.body.style.overflow = '';
      document.body.classList.remove('is-pd-open');
      window.removeEventListener('keydown', h);
    };
  }, [open, onClose]);

  const cell = (v, i) => {
    if (v === 'v') return <td key={i} className="is-yes"><span aria-label="あり">✓</span></td>;
    if (v === 'x') return <td key={i} className="is-no"><span aria-label="なし">×</span></td>;
    return <td key={i}>{v}</td>;
  };

  // このページは fixed のスクロールコンテナ。アンカーはコンテナ側をスクロールさせる
  const jump = (id) => (e) => {
    e.preventDefault();
    const root = scrollRef.current;
    const target = root?.querySelector(`#${id}`);
    if (target) root.scrollTo({ top: target.offsetTop - 24, behavior: 'smooth' });
  };

  return (
    <div className={`lx-cmp ${open ? '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">PRICING &nbsp;/&nbsp; <span>料金プラン</span></div>
      </div>

      <header className="lx-cmp-hero">
        <span className="lx-eyebrow">スマート BIM プラットフォーム ／ IPCS スマート現場管理</span>
        <h1>料金プラン</h1>
        <p className="lx-cmp-line">2 つの製品は料金体系が異なります。導入される製品に合わせてご確認ください</p>
      </header>

      {/* 2 製品の料金体系：BIM はプラン制、IPCS は別途見積り —— 最初に見えるよう先頭に置く */}
      <div className="lx-mode-grid">
        <div className="lx-mode-card">
          <span className="lx-mode-tag">スマート BIM プラットフォーム</span>
          <h2>月額プラン + モデル処理ポイント</h2>
          <p>導入規模、モデルのサイズ、協業する人数に応じてプランを選べます。モデル処理には別途ポイントを使用し、料金体系を明確にしています。</p>
          <ul className="lx-mode-factors is-light">
            <li>4 つのプラン S ／ A ／ B ／ カスタマイズ</li>
            <li>毎月一定のポイント、当月内有効</li>
            <li>追加購入 ¥3,000 = 500 ポイント、失効しません</li>
            <li>操作アカウント 3 〜 30 名</li>
            <li>社外の閲覧専用ユーザーは無料で利用可能</li>
          </ul>
          <div className="lx-mode-price"><b>¥8,990</b><span>／月〜</span></div>
          <div className="lx-mode-cta">
            <a href="#cmp-plans" className="lx-trial-btn" onClick={jump('cmp-plans')}>プラン比較表を見る</a>
            <a href="#cmp-points" className="lx-trial-btn" onClick={jump('cmp-points')}>ポイント基準を見る</a>
          </div>
        </div>

        <div className="lx-mode-card is-quote">
          <span className="lx-mode-tag">IPCS スマート現場管理</span>
          <h2>担当者がヒアリングし、カスタマイズしてご提案</h2>
          <p>
            現場の料金は一律にはできません。案件数、利用人数、現場の種別・利用環境、組み合わせるモジュールによって構成が変わります。
            IPCS は<strong>きめ細かい権限とロールの管理</strong>を備えており、
            本社、現場所長、工事監理者、協力会社、現場作業員まで、階層ごとに公開する機能とデータの範囲を変えられます。
            単一の現場からグループ企業の複数案件まで対応します。
          </p>
          <ul className="lx-mode-factors">
            <li>現場・案件の数</li>
            <li>利用人数と役割の階層</li>
            <li>現場の種別・利用環境</li>
            <li>組み合わせるモジュール</li>
          </ul>
          <div className="lx-mode-price"><b>お問い合わせ</b><span>／ご要望に応じて見積り</span></div>
          <div className="lx-mode-cta">
            <a className="lx-trial-btn is-primary" href="#contact"
               onClick={(e) => { e.preventDefault(); if (window.lxGoto) window.lxGoto('contact'); else onClose(); }}>
              担当者に相談する →
            </a>
          </div>
        </div>
      </div>

      <h2 className="lx-cmp-h2" id="cmp-plans">
        <span>01</span>スマート BIM プラットフォーム · プラン機能比較表
      </h2>

      <div className="lx-cmp-wrap">
        <table className="lx-cmp-table">
          <thead>
            <tr>
              {/* 本文の各行は「分類 + 項目」の 2 列。ヘッダーも 2 列分にしないと全体がずれる */}
              <th className="lx-cmp-cat" colSpan={2}>項目</th>
              {TP_PLANS.map((p) =>
                <th key={p.key} className={p.featured ? 'is-featured' : ''}>
                  {p.name}{p.tag && <em>{p.tag}</em>}
                </th>
              )}
            </tr>
          </thead>
          {TP_TABLE.map((g) =>
            <tbody key={g.group}>
              {g.rows.map((row, ri) =>
                <tr key={ri}>
                  {ri === 0 && <th className="lx-cmp-group" rowSpan={g.rows.length}>{g.group}</th>}
                  <th className="lx-cmp-item">{row[0]}</th>
                  {row.slice(1).map((v, i) => cell(v, i))}
                </tr>
              )}
            </tbody>
          )}
        </table>
      </div>

      <ul className="lx-cmp-notes">
        {TP_NOTES.map((n, i) => <li key={i}>{n}</li>)}
      </ul>

      <h2 className="lx-cmp-h2" id="cmp-points">
        <span>02</span>スマート BIM プラットフォーム · モデル処理パックの必要ポイント
      </h2>
      <p className="lx-cmp-intro">
        スマート BIM プラットフォームは「月額プラン + モデル処理ポイント」の形式です。IFC の元ファイルサイズとモデルの用途に応じてポイントを消費します。
        モデル処理パックには<strong>初回のモデル処理 + 同一モデルの更新 2 回</strong>が含まれ、
        プロジェクト初期にモデル更新が繰り返される実情に合わせています。
      </p>

      {/* 1 パック = 3 回 */}
      <div className="lx-pt-pack">
        {TP_PT_PACK.map((p, i) =>
          <div key={p.n} className="lx-pt-pack-step">
            <span className="lx-pt-pack-n">{p.n}</span>
            <span className="lx-pt-pack-t">{p.t}</span>
            {i < TP_PT_PACK.length - 1 && <i className="lx-pt-pack-arrow" aria-hidden="true">→</i>}
          </div>
        )}
      </div>

      {/* ポイント表 */}
      <div className="lx-cmp-wrap">
        <table className="lx-cmp-table lx-pt-table">
          <thead>
            <tr>
              <th className="lx-pt-size">IFC 元ファイルサイズ</th>
              <th>建築管理 BIM<em>基準</em></th>
              <th className="is-featured">施工進捗 BIM<em>3 倍</em></th>
              <th className="lx-pt-inc">含まれる内容</th>
            </tr>
          </thead>
          <tbody>
            {TP_PT_TABLE.map((row, i) =>
              <tr key={row[0]}>
                <th className="lx-cmp-item">{row[0]}</th>
                <td>{row[1]}</td>
                <td className="is-pt">{row[2]}</td>
                {i === 0 && <td className="lx-pt-inc" rowSpan={TP_PT_TABLE.length}>
                  初回処理 + 同一モデルの更新 2 回<br />
                  <span>（500MB 以上はモデルのサイズ、部材数、処理内容に応じて別途お見積り）</span>
                </td>}
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <p className="lx-cmp-caption">
        施工進捗 BIM は、部材と作業項目のひも付け、施工状態の色分け、進捗データの統合が必要となるため、建築管理 BIM の基準ポイントの 3 倍で計算します。
      </p>

      {/* 「区分」は後段の無料更新条件のキーワード。ここで定義をはっきりさせる */}
      <div className="lx-tier-note">
        <span className="lx-tier-note-label">「ファイルサイズ区分」とは？</span>
        <p>
          区分とは、上の表の左端にある 5 つの IFC 元ファイルサイズの範囲（50MB 以下 ／ 50〜100MB ／ 100〜200MB ／ 200〜500MB ／ 500MB 以上）のことです。
          ポイントは<strong>区分ごとに消費</strong>し、実際の MB 数で換算するわけではありません。同じ区分であれば、55MB でも 98MB でも消費するポイントは同じです。
        </p>
        <div className="lx-tier-example">
          <div className="lx-tier-example-row is-ok">
            <b>区分をまたがない場合</b>
            <span>183MB のモデルを更新して 195MB になった → どちらも <em>100〜200MB</em> の範囲内なので、無料更新の対象となり、追加のポイントは消費しません。</span>
          </div>
          <div className="lx-tier-example-row is-ng">
            <b>区分をまたぐ場合</b>
            <span>183MB のモデルを更新して 250MB になった → <em>100〜200MB</em> から <em>200〜500MB</em> へ移り、処理量が変わるため、新しい区分に従ってあらためてポイントを消費します。</span>
          </div>
        </div>
        <p className="lx-tier-note-foot">
          モデルを送る前にファイルがどの区分に入るかを確認しておけば、今回消費するポイントを事前に見積もれます。更新の際も元の区分を超えなければ、2 回の更新はどちらも処理パックに含まれます。
        </p>
      </div>

      {/* 無料更新の条件 + プラン別ポイントの目安 */}
      <div className="lx-pt-cols">
        <div className="lx-pt-col is-ok">
          <h3>無料更新 2 回の適用条件</h3>
          <dl>
            {TP_PT_OK.map(([k, v]) =>
              <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
            )}
          </dl>
        </div>
        <div className="lx-pt-col">
          <h3>プラン別ポイントの目安</h3>
          <dl>
            {TP_PT_EXAMPLES.map(([k, pt, v]) =>
              <div key={k}><dt>{k}<b>{pt}</b></dt><dd>{v}</dd></div>
            )}
          </dl>
        </div>
      </div>

      {/* ポイントの追加購入 —— 規則は単純だが重要なので独立した区画で説明する */}
      <div className="lx-topup">
        <div className="lx-topup-head">
          <span className="lx-topup-label">ポイントの追加購入</span>
          <h3>¥3,000 を 1 単位として購入でき、追加したポイントは<strong>失効しません</strong></h3>
        </div>

        <div className="lx-topup-body">
          <div className="lx-topup-rates">
            {TP_PT_TOPUP.map((t) =>
              <div key={t.amount}>
                <b>{t.amount}</b>
                <i aria-hidden="true">=</i>
                <span>{t.point}</span>
              </div>
            )}
            <div className="lx-topup-more">以降も同様</div>
          </div>

          <ul className="lx-topup-notes">
            <li>
              <b>追加購入は ¥3,000 単位</b>
              <span>3,000 円の倍数のみとなります：¥3,000、¥6,000、¥9,000 …。¥3,000 で 500 ポイントです。</span>
            </li>
            <li>
              <b>追加購入したポイントは契約終了まで保持</b>
              <span>毎月付与されるポイントとは異なります。月間付与ポイントは当月中に使わなければ失効しますが、<em>追加購入したポイントは保持され続けます</em>。</span>
            </li>
          </ul>
        </div>
      </div>

      {/* ポイントの使い方 */}
      <div className="lx-pt-cols is-single">
        <div className="lx-pt-col">
          <h3>ポイントの使い方</h3>
          <dl>
            {TP_PT_RULES.map(([k, v]) =>
              <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
            )}
          </dl>
        </div>
      </div>

      <div className="lx-cmp-cta">
        <button className="lx-trial-btn is-primary" onClick={onTrial}>30 日間トライアルについて →</button>
        <a className="lx-trial-btn" href="#contact" onClick={(e) => { e.preventDefault(); if (window.lxGoto) window.lxGoto('contact'); else onClose(); }}>担当者に問い合わせる</a>
      </div>
    </div>
  );
}

/* ---------- 無料トライアル（トライアル説明は先方からの提供待ち） ---------- */
function TrialModal({ open, onClose }) {
  const { useEffect: uE } = React;
  uE(() => {
    if (!open) return;
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [open, onClose]);

  if (!open) return null;
  return (
    <div className="lx-fm-modal" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="lx-fm-modal-panel" role="dialog" aria-modal="true" aria-label="無料トライアル">
        <button className="lx-fm-modal-x" onClick={onClose} aria-label="閉じる">×</button>
        <div className="lx-fm-modal-kicker">FREE TRIAL<em>30 日間</em></div>
        <h2>スマート BIM プラットフォームを 30 日間無料で</h2>
        <p className="lx-fm-modal-sum">ログイン後すぐにご体験いただけます。50MB までの IFC モデルをアップロードし、すばやく表示して確認できます。</p>
        <p className="lx-fm-modal-desc">日本国内でのサービス開始は {LX_LAUNCH} を予定しています。それまでの間も、事前のご相談・お問い合わせを承っております。</p>
        <div className="lx-cmp-cta" style={{ padding: 0, marginTop: 8 }}>
          <a className="lx-trial-btn is-primary" href={LX_LOGIN_URL}>ログインして始める →</a>
        </div>
      </div>
    </div>
  );
}

window.TrialBanner = TrialBanner;
window.PlanCompare = PlanCompare;
window.TrialModal = TrialModal;
