---
// TOP の「導入前ガイド」：LP 2つ（GPU を買うか借りるか・配膳ロボットの導入前シミュレーション）への入口を横に並べる
// GPU は黒い面で、背景の写真の上に文字をそのまま置く。配膳ロボットは明るい面に、文字を左・店の立体の絵（SVG・試算と同じ店）を右に置く
// 3D の店の録画は高さ 720px までしかなく粗く見えたため、どの大きさでも粗くならない線の図にした。
// 縦に切り抜くと何の図か分からず、白黒の平面図は色味がなかったので、同じ店を斜め上から見た立体の絵（tools/make_cta_iso.py で作る）を切らずに置く
// 配膳ロボットの数字（○/99条件）は、ここだけでは意味が分からずノイズに見えたので載せない（2026-10-24）
// 2枚がひと目で別のものと分かるように、面の色と組み方を変える（中身の順番はそろえる）。/series6 は GuideBanner（1本）のまま
const cards = [
  {
    href: '/gpu-buy-or-rent', bg: '/site/gbr/reverse.webp', light: false, label: '導入比較ガイド',
    fig: { old: '¥750,000', big: '¥4,700', small: '' },
    title: 'ロボットAIの学習用GPU、買うか借りるか',
    sub: '実際に借りて学習させた費用と、損益分岐の計算機、判定フローで決められます。',
    ev: 'TOPガイド:GPU',
  },
  {
    href: '/serving-robot-one-less-staff', img: '/site/srl/cta-iso.svg', light: true, label: '導入前シミュレーション',
    title: '配膳ロボットを、導入前に自分の店舗でシミュレーション',
    sub: '店舗の図面と人数から、何人で回るか・どこで止まるか・月いくらかかるかを出します。',
    ev: 'TOPガイド:配膳ロボット',
  },
];
---
<div class="gcards">
  {cards.map((c) => (
    <a class={`gcard${c.light ? ' light' : ''}`} href={c.href} data-ev={c.ev} style={c.bg ? `--bg:url(${c.bg})` : undefined}>
      {c.img && <span class="gc-img"><img src={c.img} alt="店の立体図（席・キッチン・配膳ロボットの通り道）" width="1400" height="900" loading="lazy" /></span>}
      <span class="gc-body">
        <span class="gc-label">{c.label}</span>
        {c.fig && <span class="gc-fig" aria-hidden="true">
          {c.fig.old && <s class="gc-old">{c.fig.old}</s>}
          <b class="gc-big">{c.fig.big}</b>
          {c.fig.small && <small class="gc-small">{c.fig.small}</small>}
        </span>}
        <span class="gc-title">{c.title}</span>
        <span class="gc-sub">{c.sub}</span>
        <span class="gc-go">読む<i class="ms">arrow_forward</i></span>
      </span>
    </a>
  ))}
</div>
<style>
  .gcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  /* ほかのセクションのカード（記録・4コマ・シリーズ）と同じ角丸と影 */
  .gcard { position: relative; isolation: isolate; overflow: hidden; display: grid; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.08); background: #0b0c0e; color: #fff; text-decoration: none; }
  .gc-body { display: grid; align-content: center; gap: 10px; padding: 32px; }
  .gcard::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg) right center / cover no-repeat; transition: transform .6s ease; }
  .gcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,12,14,.95) 0%, rgba(11,12,14,.86) 55%, rgba(11,12,14,.55) 100%); }
  .gcard:hover::before { transform: scale(1.03); }
  .gcard:focus-visible { outline: 2px solid #121418; outline-offset: 3px; }
  .gc-label { font: 700 12px/18px var(--sans); color: #b9bec7; letter-spacing: .08em; }
  .gc-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-family: 'Manrope', 'Noto Sans JP', sans-serif; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .gc-old { font-size: 20px; font-weight: 800; color: #8d939d; text-decoration-thickness: 2px; }
  .gc-big { font-size: 40px; font-weight: 800; color: #f2600c; letter-spacing: -.01em; }
  .gc-small { font: 700 14px/1.5 var(--sans); color: #d6dae3; }
  .gc-title { margin-top: 4px; font: 900 22px/1.45 var(--sans); word-break: auto-phrase; text-wrap: pretty; }
  .gc-sub { font: 400 14px/1.7 var(--sans); color: #c8ccd4; text-wrap: pretty; }
  .gc-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-top: 6px; padding: 0 20px; border-radius: 4px;
    background: #f2600c; color: #fff; font: 700 14px/1 var(--sans); white-space: nowrap; transition: background .15s, color .15s; }
  .gcard:hover .gc-go { background: #fff; color: #121418; }
  /* 配膳ロボット：明るい面。カードが広いときは文字を左・立体の絵を右に、狭いときは絵を上・文字を下に置く。
     区切りはカードの幅で決める（画面の幅ではない）。2枚並びのカードは画面が 900〜1300px くらいだと 450〜600px しかなく、
     横に並べると文字の列が細くなって題名と説明が細かく折り返すため。
     横に並べるのは、ガイドの枠（.gcards）が 1180px 以上（カード1枚が約580px 以上）のときだけ。文字の列は 300px より狭くしない */
  .gcards { container-type: inline-size; }
  .gcard.light { grid-template-columns: 1fr; background: #eceef1; color: #121418; }
  .gcard.light::before, .gcard.light::after { content: none; }
  .gc-img { grid-column: 1; grid-row: 1; position: relative; display: block; overflow: hidden; height: 220px; background: #eceef1; }
  .gc-img img { position: absolute; top: 12px; left: 12px; display: block; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; object-position: 50% 50%; transition: transform .6s ease; }
  .gcard.light .gc-body { grid-column: 1; grid-row: 2; padding: 24px 32px 32px; }
  @container (min-width: 1180px) {
    .gcard.light { grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr); }
    .gc-img { grid-column: 2; grid-row: 1; height: auto; }
    .gc-img img { top: 0; left: 0; width: calc(100% - 20px); height: 100%; object-position: 0 50%; }
    .gcard.light .gc-body { grid-column: 1; grid-row: 1; padding: 32px 20px 32px 32px; }
  }
  .gcard.light:hover .gc-img img { transform: scale(1.03); }
  .gcard.light .gc-title { font-size: 20px; }
  .gcard.light .gc-label { color: #5c616b; }
  .gcard.light .gc-small { color: #121418; }
  .gcard.light .gc-body { word-break: auto-phrase; text-wrap: pretty; }
  .gcard.light .gc-sub { color: #4a4f58; }
  .gcard.light:hover .gc-go { background: #121418; color: #fff; }
  .gc-go .ms { font-size: 18px; transition: transform .2s; }
  .gcard:hover .gc-go .ms { transform: translateX(3px); }
  @media (max-width: 899px) {
    .gcards { grid-template-columns: 1fr; }
    .gcard { min-height: 0; }
    .gc-body, .gcard.light .gc-body { padding: 24px 20px; }
    .gcard:not(.light)::after { background: rgba(11,12,14,.84); }
    .gc-big { font-size: 32px; }
    .gc-title { font-size: 19px; }
  }
</style>