---
// TOP の「このサイトの楽しみ方」（2026-11-03）
// 記録は長いログで、人がそのまま読むのはきつい。何度も来ている人に、AI に読ませて聞く楽しみ方を伝える帯。
// 決めたこと（エイイチ 2026-11-03）：活用＝AI に読ませて使う方法。楽しみ方を主にする。取説を読むためにほかのページへ移らせない（TOP の中で開く）。
// 形：ヒーローの下に、閉じると1行の帯。開くと、①質問を選ぶ ②ふだん使っている AI で開く。AI にはサイトの案内（/llms.txt）を読ませる。
// AI の開き方・前回の AI の覚え方（p2m-site-ai）は記事ページの「AIで読む」（src/pages/record/[slug].astro）と同じ。
// 「前に来たときから」は、TOP を前に開いた日を見た人のブラウザに覚えておき（p2m-site-top-visit）、その日より後の記録を AI に拾わせる。覚えていなければ「この2週間」。
// 押した数は /api/ev-stats（場所 ai。「TOPの楽しみ方:…」）、AI が案内を読みに来た数は /api/cr-stats の「AIで読む経由」（/llms.txt?via=…）
import { SITE } from '../lib/seo';

const QUESTIONS = [
  { id: 'since', label: '前に来たときから、何が進んだ？', sub: 'この2週間の記録をまとめる',
    body: '案内の記録の一覧から、{SINCE}に公開された記録を拾い、何が進んだのかをシリーズごとに短くまとめてください。とくに面白い1本があれば、その全文を読んで、どこが面白いのかも添えてください。' },
  { id: 'fail', label: '失敗した回だけ集めて', sub: 'どこでつまずき、どう直したか',
    body: '記録の一覧と全文を読んで、うまくいかなかった回・失敗した回を探してください。どこでつまずき、次にどう直したのかを、新しいものから3つ教えてください。' },
  { id: 'start', label: '自分で始めるなら、最初の1本は？', sub: '読む順番と、要る機材・費用',
    body: '私も同じようにロボットの学習を自分で始めてみたいです。記録の一覧から最初に読むべき記録を3本選び、読む順番と理由を教えてください。要る機材と費用（円）も、分かる範囲で添えてください。' },
  { id: 'hakobu', label: 'ハコブくんに説明してもらう', sub: '最近の研究を、ゆるく',
    body: 'このサイトのマンガに出てくるハコブくん（病院で薬を運ぶお手伝いロボット。明るくて親しみのある口調）になりきって、最近の記録から、エイイチがいま何に取り組んでいるのかを話してください。少しユーモアを入れて、3分で読める長さでお願いします。' },
];
const HEAD = 'Pixels to Motors（フィジカルAI・ロボットの研究記録のサイト）について質問です。\nサイトの案内（記録の一覧と、記録ごとの全文の住所）: {LLMS}\n\n';
const SINCE_DEFAULT = 'この2週間';
// Gemini はテキストのファイルを読めないので、同じ案内の HTML 版を読ませる。住所は拡張子なしの /llms（/llms.html は配信の設定で /llms へ転送されるため）（2026-11-03）
const guideFile = (via) => (via === 'gemini' ? 'llms' : 'llms.txt');
const promptFor = (q, via, since = SINCE_DEFAULT) =>
  (HEAD + q.body).replace('{LLMS}', `${SITE}/${guideFile(via)}?via=${via}`).replace('{SINCE}', since);
const qOf = (q, via) => encodeURIComponent(promptFor(q, via));
const AIS = [
  { id: 'chatgpt', name: 'ChatGPT', url: 'https://chatgpt.com/?q=' },
  { id: 'claude', name: 'Claude', url: 'https://claude.ai/new?q=' },
  { id: 'perplexity', name: 'Perplexity', url: 'https://www.perplexity.ai/search?q=' },
  // Gemini：質問文を入れて開けないので、コピーしてから開く。読ませるのは /llms.html（アプリはテキストのファイルを読まないため。2026-11-03）
  { id: 'gemini', name: 'Gemini', url: 'https://gemini.google.com/app', copy: true },
];
const q0 = QUESTIONS[0];
---
<details class="tag-guide" data-ev-area="ai">
  <summary data-ev="TOPの楽しみ方:開く">
    <span class="tg-k">このサイトの楽しみ方</span>
    <span class="tg-t">記録は長いログです。読むより、AIに聞くほうが早くて楽しい。</span>
    <i class="ms" aria-hidden="true">expand_more</i>
  </summary>
  <div class="tg-body">
    <p class="tg-step"><span class="tg-n">1</span>聞きたいことを選ぶ</p>
    <div class="tg-qs" role="radiogroup" aria-label="AIに聞くこと">
      {QUESTIONS.map((q, i) => (
        <button type="button" class="tg-q" role="radio" aria-checked={i === 0 ? 'true' : 'false'} data-q={q.id} data-ev={`TOPの楽しみ方:質問 ${q.label}`}>
          <span class="tg-ql">{q.label}</span><span class="tg-qs-sub">{q.sub}</span>
        </button>
      ))}
    </div>
    <p class="tg-step"><span class="tg-n">2</span>ふだん使っている AI で開く</p>
    <ul class="tg-ais">
      {AIS.map((a) => (
        <li data-ai={a.id}>
          <a href={a.copy ? a.url : a.url + qOf(q0, a.id)} target="_blank" rel="noopener" data-ev={`TOPの楽しみ方:${q0.id}`} data-copy={a.copy ? promptFor(q0, a.id) : undefined}>
            {a.name}{a.copy && <span class="tg-an">コピーして開く</span>}<i class="ms" aria-hidden="true">open_in_new</i>
          </a>
        </li>
      ))}
      <li data-ai="copy">
        <button type="button" data-ev={`TOPの楽しみ方:${q0.id}:コピー`} data-copy={promptFor(q0, 'copy')}>質問文をコピー<i class="ms" aria-hidden="true">content_copy</i></button>
      </li>
    </ul>
    <p class="tg-msg" role="status" aria-live="polite"></p>
    <textarea class="tg-prompt" hidden readonly></textarea>
    <p class="tg-note">AI がこのサイトの記録を読んで答えます。Gemini は質問を入れた状態で開けないため、質問文をコピーしてから開きます。開いたら入力欄に貼り付けて送ってください。記録のページの AIで読む からは、その1本だけを読ませて聞けます。</p>
  </div>
</details>

<script is:inline define:vars={{ QUESTIONS, HEAD, SINCE_DEFAULT, AIS, SITE }}>
  (() => {
    const box = document.querySelector('.tag-guide');
    if (!box) return;
    const AI_KEY = 'p2m-site-ai', VISIT_KEY = 'p2m-site-top-visit';
    const today = new Date(Date.now() + 9 * 3600e3).toISOString().slice(0, 10);
    // 前に TOP を開いた日（今日より前の日）。今日のうちに何度開いても「前の日」は変えない
    let prev = '';
    try {
      const v = JSON.parse(localStorage.getItem(VISIT_KEY) || 'null') || {};
      if (v.last && v.last !== today) { prev = v.last; localStorage.setItem(VISIT_KEY, JSON.stringify({ prev, last: today })); }
      else { prev = v.prev || ''; localStorage.setItem(VISIT_KEY, JSON.stringify({ prev, last: today })); }
    } catch { /* 覚えられない環境では「この2週間」 */ }
    const md = (d) => { const [, m, dd] = d.split('-').map(Number); return `${m}月${dd}日`; };
    const since = prev ? `${prev}より後` : SINCE_DEFAULT;
    if (prev) {
      const sub = box.querySelector('[data-q="since"] .tg-qs-sub');
      if (sub) sub.textContent = `前に来た${md(prev)}より後の記録をまとめる`;
    }
    let cur = QUESTIONS[0];
    const promptFor = (q, via) => (HEAD + q.body).replace('{LLMS}', `${SITE}/${via === 'gemini' ? 'llms' : 'llms.txt'}?via=${via}`).replace('{SINCE}', since);
    const render = () => {
      for (const a of AIS) {
        const el = box.querySelector(`li[data-ai="${a.id}"] a`);
        if (!el) continue;
        el.dataset.ev = `TOPの楽しみ方:${cur.id}`;
        if (a.copy) el.dataset.copy = promptFor(cur, a.id);
        else el.href = a.url + encodeURIComponent(promptFor(cur, a.id));
      }
      const c = box.querySelector('li[data-ai="copy"] button');
      if (c) { c.dataset.copy = promptFor(cur, 'copy'); c.dataset.ev = `TOPの楽しみ方:${cur.id}:コピー`; }
    };
    render();
    const list = box.querySelector('.tg-ais'), msg = box.querySelector('.tg-msg');
    try {
      const last = localStorage.getItem(AI_KEY);
      const li = last && list.querySelector(`li[data-ai="${last}"]`);
      if (li && li !== list.firstElementChild) list.prepend(li);
      if (li) li.classList.add('tg-last');
    } catch { /* いつもの並び */ }
    box.querySelector('.tg-qs').addEventListener('click', (e) => {
      const b = e.target.closest('.tg-q');
      if (!b) return;
      box.querySelectorAll('.tg-q').forEach((x) => x.setAttribute('aria-checked', x === b ? 'true' : 'false'));
      cur = QUESTIONS.find((q) => q.id === b.dataset.q) || QUESTIONS[0];
      msg.textContent = '';
      box.querySelector('.tg-prompt').hidden = true;
      render();
    });
    list.addEventListener('click', async (e) => {
      const li = e.target.closest('li[data-ai]');
      if (!li) return;
      try { localStorage.setItem(AI_KEY, li.dataset.ai); } catch { /* 覚えられなくても開く */ }
      const a = e.target.closest('[data-copy]');
      if (!a) return;
      let ok = false;
      try { await navigator.clipboard.writeText(a.dataset.copy); ok = true; } catch { ok = false; }
      msg.textContent = ok ? '質問文をコピーしました。AI の入力欄に貼り付けてください。' : 'コピーできませんでした。下の質問文を選んでコピーしてください。';
      if (!ok) { const t = box.querySelector('.tg-prompt'); t.value = a.dataset.copy; t.hidden = false; t.select(); }
    });
  })();
</script>

<style>
  .tag-guide { max-width: 964px; margin: 0 auto 8px; border-radius: 8px; background: #fff; color: var(--ink); position: relative; overflow: hidden; isolation: isolate; }
  /* 閉じているあいだだけ、ごくたまに細い黒い帯が左から右へすっと通る（2026-11-03 エイイチの指示「ごくたまにふぁーっと黒に左右にスライドして一瞬色が切り替わる」→「もっとさりげない感じがいい」）。
     白い膜を difference で重ねると、重なった所だけ白黒が反転する。膜は帯の幅の2割ほどで、両端をぼかした細い帯にし、約1.1秒で通り抜ける。
     ページを開いて2.5秒後に1回、そのあとは14秒に1回。動きを減らす設定の人には出さない */
  .tag-guide:not([open])::after { content: ""; position: absolute; top: 0; bottom: 0; left: -24%; width: 20%; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 45%, #fff 55%, rgba(255,255,255,0)); mix-blend-mode: difference; pointer-events: none; animation: tg-wipe 14s cubic-bezier(.45,0,.25,1) 2.5s infinite; }
  @keyframes tg-wipe {
    0% { left: -24%; }
    8% { left: 104%; }
    100% { left: 104%; }
  }
  @media (prefers-reduced-motion: reduce) { .tag-guide:not([open])::after { animation: none; display: none; } }
  .tag-guide summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 16px 20px; cursor: pointer; list-style: none; border-radius: 8px; }
  .tag-guide summary::-webkit-details-marker { display: none; }
  .tag-guide summary:hover { background: #fafafa; }
  .tg-k { font: 700 16px/24px var(--sans); }
  .tg-t { font: 400 14px/22px var(--sans); color: var(--ink-2); }
  .tag-guide summary .ms { font-size: 22px; transition: transform .2s ease; }
  .tag-guide[open] summary .ms { transform: rotate(180deg); }
  .tg-body { padding: 4px 20px 20px; }
  .tg-step { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font: 600 14px/22px var(--sans); }
  .tg-step:first-child { margin-top: 4px; }
  .tg-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px/1 var(--sans); }
  .tg-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tg-q { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border: 0; border-radius: 4px; background: #f0f0f0; color: var(--ink); text-align: left; cursor: pointer; }
  .tg-q:hover { background: #e6e6e6; }
  .tg-q[aria-checked="true"] { background: var(--ink); color: #fff; }
  .tg-ql { font: 600 16px/24px var(--sans); }
  .tg-qs-sub { font: 400 12px/18px var(--sans); opacity: .75; }
  .tg-ais { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .tg-ais a, .tg-ais button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink); font: 600 14px/22px var(--sans); text-decoration: none; cursor: pointer; }
  .tg-ais a:hover, .tg-ais button:hover { background: var(--ink); color: #fff; }
  .tg-ais .ms { font-size: 18px; }
  .tg-an { font: 400 12px/18px var(--sans); opacity: .7; }
  .tg-last a::before { content: "前回"; padding: 0 6px; border: 1px solid currentColor; border-radius: 4px; font: 400 11px/18px var(--sans); }
  .tg-msg { margin: 8px 0 0; font: 400 13px/20px var(--sans); color: var(--ink-2); }
  .tg-msg:empty { display: none; }
  .tg-prompt { display: block; width: 100%; margin-top: 8px; min-height: 120px; font: 400 13px/20px var(--sans); box-sizing: border-box; }
  .tg-prompt[hidden] { display: none; }
  .tg-note { margin: 16px 0 0; font: 400 12px/18px var(--sans); color: var(--ink-3); }
  @media (max-width: 1023px) { .tag-guide { margin: 0 24px 8px; } }
  @media (max-width: 599px) {
    .tag-guide { margin: 0 12px 8px; }
    .tag-guide summary { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
    .tg-k { grid-column: 1; }
    .tg-t { grid-column: 1; font-size: 13px; line-height: 20px; }
    .tag-guide summary .ms { grid-column: 2; grid-row: 1 / span 2; }
    .tg-body { padding: 4px 16px 16px; }
    .tg-qs { grid-template-columns: 1fr; }
  }
</style>
