---
// サービスロボット導入シミュレーション（/series8）の「ブラウザで動かす（テスト版）」（2026-11-14・LOG506）
// 配膳ロボットのブラウザ版（/sim/serving-robot-3d）への入口。テスト版なので、入口はこの1か所だけ（試算・LP・トップには置かない）。
// 試算・Unity と答え合わせが済んだら、試算の「平面図／Unity で動かすと」の隣に移す（住所に条件を付けて開ける作りは入れてある）。
// TOP にも置く（2026-11-14 エイイチの指示「TOPにも置くようにしてください。なるべく上の方」）。FV のすぐ下・解説動画の前。押された数を分けて数えるため、place で data-ev の頭を変える
const { place = 'series8' } = Astro.props as { place?: 'series8' | 'top' };
const href = '/sim/serving-robot-3d';
const ev = (t: string) => (place === 'top' ? `TOP:${t}` : t);
---
<section class="sec s-bt" id="browser-test" data-ev-area={place === 'top' ? 'top-browser-test' : 'browser-test'}><div class="panel">
  <h2 class="sec-h">ブラウザで動かす（テスト版）| Test</h2>
  <div class="bt-grid">
    <div class="bt-text">
      <p class="bt-lead">配膳ロボットの店を、ブラウザだけで動かす</p>
      <p class="bt-note">試算と同じファミレスの店（②〜⑦）を3Dで建てます。スタッフ・ロボットの台数・混み具合を選ぶと、その場でお客さんが来て、料理が届き、会計して帰るまでの1日が回ります。人とロボットはブラウザの中で動いていて、Unity も実物も使っていません。</p>
      <p class="bt-k"><span class="bt-tag">テスト版</span>まだのこと</p>
      <ul class="bt-list">
        <li>数字は、試算（v2.9）や Unity との答え合わせをしていません</li>
        <li>ロボット3台以上・混雑の日は、ロボットどうしが通路で詰まりやすくなります</li>
        <li>下げ膳（皿をロボットで下げる使い方）は、まだ入っていません</li>
      </ul>
      <a class="bt-btn" href={href} target="_blank" rel="noopener" data-ev={ev('ブラウザ版のテスト版を開く')}>テスト版を開く ↗</a>
      <div><a class="bt-log" href="/record/serving-robot-store-sim-in-the-browser" data-ev={ev('ブラウザ版の記録を開く')}>作り方とコードの記録（LOG506） →</a></div>
    </div>
    <a class="bt-img" href={href} target="_blank" rel="noopener" data-ev={ev('ブラウザ版のテスト版を開く（画像）')}>
      <img src="/site/sim/browser-test.webp" alt="ブラウザ版のテスト版の画面。左は PC のブラウザで、3Dの店の中をスタッフ・お客さん・ロボットが動き、右に操作といまの数字が並ぶ。右はスマホで見た同じ画面" loading="lazy" width="1920" height="1080" />
    </a>
  </div>
</div></section>

<style>
  .s-bt .bt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
  .s-bt .bt-lead { margin: -12px 0 8px; font: 600 18px/28px var(--sans); color: var(--ink); }
  .s-bt .bt-note { margin: 0 0 20px; font: 400 14px/24px var(--sans); color: var(--ink-2); }
  .s-bt .bt-k { margin: 0 0 6px; font: 600 14px/22px var(--sans); color: var(--ink); }
  .s-bt .bt-tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 4px; background: #ecebe7; color: #555; font: 600 12px/20px var(--sans); }
  .s-bt .bt-list { margin: 0 0 24px; padding-left: 1.2em; font: 400 14px/26px var(--sans); color: var(--ink-2); }
  .s-bt .bt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 8px; background: var(--ink, #242424); color: #fff; font: 600 14px/20px var(--sans); }
  .s-bt .bt-btn:hover { opacity: .85; }
  .s-bt .bt-log { display: inline-block; margin-top: 20px; font: 500 14px/22px var(--sans); color: var(--ink); }
  .s-bt .bt-log:hover { text-decoration: underline; }
  .s-bt .bt-img { display: block; border-radius: 8px; overflow: hidden; background: #eceef2; }
  .s-bt .bt-img img { display: block; width: 100%; height: auto; }
  .s-bt .bt-img:hover img { opacity: .92; }
  @media (max-width: 1023px) { .s-bt .bt-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .s-bt .bt-img { order: -1; } }
</style>
