---
// 課題地図（/issues）への入口。TOP の「記録」の下に置く（2026-11-14）
// 前は public/embeds/top-banner.html（36件のドット地図・iframe）。LOG343・LOG344 が同じ部品を載せているので、その部品は消さずに残してある
// 件数は課題のデータから数える。写真は課題地図のトップの「まず読む3つ」と同じ（R2 の issues-top3-*.jpg）
import { allIssues, CATEGORIES } from '../lib/issues';
const n = (await allIssues()).length;
const photos = [
  ['/media/issues-top3-caregiving.jpg', '介護現場へのロボット導入の壁'],
  ['/media/issues-top3-data.jpg', '実機データの圧倒的不足'],
  ['/media/issues-top3-motion.jpg', '動作のポータビリティ不在'],
];
---
<a class="isb" href="/issues" data-ev="TOP:課題地図">
  <span class="isb-text">
    <span class="isb-title"><span class="ph">フィジカルAIが</span><span class="ph">社会実装される前に</span><span class="ph">解くべき課題</span></span>
    <span class="isb-lead">放っておくと、ロボットが現場に入る前に止まってしまう課題を{n}件・{CATEGORIES.length}分類に整理しました。週1回、最近の動きを出典つきで足しています。</span>
    <span class="isb-go">課題地図を見る<i class="ms">arrow_forward</i></span>
  </span>
  <span class="isb-ph" aria-hidden="true">
    {photos.map(([src, t]) => (
      <span class="isb-p"><img src={src} alt="" loading="lazy" width="1200" height="750" /><span class="isb-cap">{t}</span></span>
    ))}
  </span>
</a>
<style>
  .isb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 52%); align-items: stretch; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.08); overflow: hidden;
    background: #fff; color: var(--ink, #242424); text-decoration: none; font-family: var(--sans); }
  .isb:focus-visible { outline: 2px solid #121418; outline-offset: 3px; }
  .isb-text { display: grid; gap: 14px; align-content: center; padding: 40px; }
  .isb-title { font-size: 26px; line-height: 1.5; font-weight: 700; }
  .ph { display: inline-block; max-width: 100%; }
  .isb-lead { font-size: 14px; line-height: 1.8; color: var(--ink-2, #555); text-wrap: pretty; }
  .isb-go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-top: 4px; padding: 0 20px; border-radius: 4px; background: var(--dark, #242424); color: #fff;
    font: 700 14px/1 var(--sans); }
  .isb-go .ms { font-size: 18px; transition: transform .2s; }
  .isb:hover .isb-go .ms { transform: translateX(3px); }
  /* 写真：3枚を縦に細長く並べ、下に課題の名前 */
  .isb-ph { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #fff; }
  .isb-p { position: relative; display: block; min-height: 300px; overflow: hidden; }
  .isb-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
  .isb:hover .isb-p img { transform: scale(1.03); }
  .isb-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 12px; font: 600 12px/1.5 var(--sans); color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); }
  @media (max-width: 899px) {
    .isb { grid-template-columns: 1fr; }
    .isb-ph { order: -1; }
    .isb-p { min-height: 150px; }
    .isb-cap { font-size: 11px; padding: 20px 8px 8px; }
    .isb-text { padding: 28px 20px; }
    .isb-title { font-size: 21px; }
  }
</style>