---
// 確認用：考察記事のサムネイルを文字だけで組んだとき、一覧でどう見えるか（2026-10-26）
// /series5 と同じ組み（見出し・考えのページのバナー・記録の一覧）で、最初に見える12本だけサムネイルを差し替える
// 案は上のボタンで切り替える（サムネイルは tools/deep_dive_thumb.py で書き出す）
// 検索に出さない（noindex・サイトマップから外す）。どこからもリンクしない。確かめ終わったら消す
import Base from '../../layouts/Base.astro';
import RecordCard from '../../components/RecordCard.astro';
import ThinkingBanner from '../../components/ThinkingBanner.astro';
import { seriesCards, SERIES_PAGES } from '../../lib/records';
import conf from '../../../tools/deep_dive_thumb_preview.json';
import { media } from '../../lib/media';

// 案3（文の強弱）の強弱の付け方だけを変えた4つ。案1・案2・最初の試作は #p1・#p2・#plain で開ける
const PLANS = [
  { id: 'p3', label: '案3 今の形', tab: true },
  { id: 'p3a', label: '3-A 差を控えめに', tab: true },
  { id: 'p3b', label: '3-B 3段階', tab: true },
  { id: 'p3c', label: '3-C 太さだけで差', tab: true },
  { id: 'p1', label: '案1 一語を大きく', tab: false },
  { id: 'p2', label: '案2 黒い面で分ける', tab: false },
  { id: 'plain', label: '最初の試作', tab: false },
];
const page = SERIES_PAGES.series5;
const ready = new Set(conf.items.map((i) => `LOG${i.log}`));
const base = (await seriesCards(page.series)).slice(0, page.limit);
const cardsFor = (plan: string) => base.map((c) => (ready.has(c.day) ? { ...c, thumb: `/preview/deep-dive/${plan}/${c.day}.html`, cover: null } : c));
const [enName, jaName] = page.title.split(' | ');
// TOP のシリーズのカード（考察記事）の絵の案。public/preview/deep-dive/top/{a,b,c}.html
const TOP = [
  { id: 'a', label: 'A ひとつの大きな問い', note: '考えのページと同じ問いを 3-B の形で組む', src: '/preview/deep-dive/top/a.html' },
  { id: 'b', label: 'B 問いの数', note: '記事ごとの一語を大小つけて敷き詰める。新しい記事の語から並ぶ', src: '/preview/deep-dive/top/b.html' },
  { id: 'c', label: 'C 最新の記事', note: '新しい4本のサムネイルを 2×2 で。記事が増えると入れ替わる', src: '/preview/deep-dive/top/c.html' },
  { id: 'now', label: '今の絵', note: 'Gemini の4コマ', img: media('/media/s-2528x1694_7a2b46a9-02c8-49d6-92c4-2e7994843726.webp') },
];
const DESC = '実装の記録とは別に、フィジカルAIやロボットについて、なぜそうなるのか、何を意味するのかを考えた記事。外れた議論も含めて、対話をそのまま残しています。';
---
<Base title="確認用：考察記事のサムネイル | Pixels to Motors" path="/preview/deep-dive-thumbs" noindex>
  <section class="s-hero"><div class="panel">
    <h1 class="sec-h s-title">{jaName} | {enName}</h1>
    <p class="s-intro">{page.intro}</p>
    <div class="s-guide"><ThinkingBanner /></div>
  </div></section>
  <section class="sec"><div class="panel">
    <h2 class="sec-h">記録 | Record</h2>
    <div class="pv-tabs" role="tablist" aria-label="サムネイルの案">
      {PLANS.filter((p) => p.tab).map((p, i) => <button type="button" role="tab" class="pv-tab" data-plan={p.id} aria-selected={i === 0 ? 'true' : 'false'}>{p.label}</button>)}
    </div>
    {PLANS.map((p, i) => (
      <div class="grid3 pv-grid" data-plan={p.id} hidden={i !== 0}>{cardsFor(p.id).map((c) => <RecordCard item={c} />)}</div>
    ))}
  </div></section>
  <section class="sec" id="top"><div class="panel">
    <h2 class="sec-h">TOPのシリーズのカード（案）</h2>
    <p class="pv-note">TOP の「シリーズ | Series」に並ぶ考察記事のカードの絵です。カードの形と文字は TOP と同じにしています。</p>
    <div class="pv-top">
      {TOP.map((t) => (
        <figure class="pv-fig">
          <figcaption><b>{t.label}</b><span>{t.note}</span></figcaption>
          <div class="scard">
            {t.src ? <div class="sc-img"><iframe src={t.src} title={t.label} scrolling="no" tabindex="-1"></iframe></div> : <img src={t.img} alt="" />}
            <div class="sc-meta">
              <div class="sc-line"><span class="sc-ja">考察記事</span><span class="sc-en">Deep Dive</span></div>
              <p class="sc-desc">{DESC}</p>
            </div>
          </div>
        </figure>
      ))}
    </div>
  </div></section>
  <script>
    const tabs = [...document.querySelectorAll<HTMLButtonElement>('.pv-tab')];
    const grids = [...document.querySelectorAll<HTMLElement>('.pv-grid')];
    const show = (id: string) => {
      tabs.forEach((t) => t.setAttribute('aria-selected', String(t.dataset.plan === id)));
      grids.forEach((g) => { g.hidden = g.dataset.plan !== id; });
    };
    tabs.forEach((t) => t.addEventListener('click', () => { show(t.dataset.plan!); history.replaceState(null, '', `#${t.dataset.plan}`); }));
    const start = location.hash.slice(1);
    if (grids.some((g) => g.dataset.plan === start)) show(start);
  </script>
</Base>
<style>
  .s-hero { padding: 88px 80px 0; }
  .s-title { margin: 0; }
  .s-guide { margin: 24px 0 0; }
  .s-intro { margin: 16px 0 0; font: 400 16px/28px var(--sans); color: var(--ink-2); }
  .pv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 32px; }
  .pv-tab { height: 40px; padding: 0 16px; border: 1px solid var(--ink, #242424); border-radius: 4px; background: #fff; color: var(--ink, #242424); font: 600 14px/1 var(--sans); cursor: pointer; }
  .pv-tab[aria-selected="true"] { background: var(--ink, #242424); color: #fff; }
  .pv-grid[hidden] { display: none; }
  .pv-note { margin: -8px 0 24px; font: 400 14px/24px var(--sans); color: var(--ink-2); }
  .pv-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  @media (max-width: 767px) { .pv-top { grid-template-columns: minmax(0, 1fr); } }
  .pv-fig { margin: 0; }
  .pv-fig figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 12px; font: 400 13px/20px var(--sans); color: var(--ink-2); }
  .pv-fig figcaption b { font: 600 15px/20px var(--sans); color: var(--ink); }
  .scard { display: block; background: #fff; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,.08); overflow: hidden; }
  .scard img, .sc-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; position: relative; }
  .sc-img iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
  .sc-meta { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
  .sc-line { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
  .sc-ja { font: 600 24px/1.3 var(--sans); }
  .sc-en { font: 500 14px/16.8px var(--sans); }
  .sc-desc { margin: 0; font: 400 13px/1.6 var(--sans); color: #555; }
  @media (max-width: 1023px) { .s-hero { padding: 72px 24px 0; } }
  @media (max-width: 599px) { .s-hero { padding: 64px 12px 0; } }
</style>