---
// 課題地図のトップ（/issues）
import IssuesLayout from '../layouts/IssuesLayout.astro';
import IssueCard from '../components/issues/IssueCard.astro';
import NewsList from '../components/issues/NewsList.astro';
import { allIssues, CATEGORIES, REGULATIONS, SOURCES, NEWS, LAST_CHECKED, ISSUES_TITLE, jdate } from '../lib/issues';
import { SITE, PUBLISHER } from '../lib/seo';

const issues = await allIssues();
const title = Object.fromEntries(issues.map((i) => [i.data.slug, i.data.title]));
const top3 = issues.slice(0, 3);
// 「まず読む3つ」のアイコン（Material Symbols）。課題を入れ替えたらここも直す
const ICON: Record<string, string> = {
  'caregiving-robot-adoption': 'elderly',
  'real-robot-data-scarcity': 'database',
  'motion-portability': 'sync_alt',
};
// 「まず読む3つ」の写真（R2 の住所）。3枚そろったら3つとも入れる。1つでも空ならアイコンで出す
const PHOTO: Record<string, string> = {
  'caregiving-robot-adoption': '/media/issues-top3-caregiving.jpg',
  'real-robot-data-scarcity': '/media/issues-top3-data.jpg',
  'motion-portability': '/media/issues-top3-motion.jpg',
};
const usePhoto = top3.every((i) => PHOTO[i.data.slug]);
const nSources = SOURCES.reduce((n, g) => n + g.items.length, 0);
const description = '放置すればフィジカルAI・ロボティクスの社会実装そのものが頓挫する構造的な課題を、技術・制度・体験の3つの視点を横断して抽出・整理した課題地図。週1回、最近の動きを出典つきで更新しています。';
const jsonLd = {
  '@context': 'https://schema.org', '@type': 'CollectionPage', name: ISSUES_TITLE, description,
  url: SITE + '/issues', inLanguage: 'ja', publisher: PUBLISHER,
  hasPart: issues.map((i) => ({ '@type': 'Article', headline: i.data.title, url: `${SITE}/issues/${i.data.slug}` })),
};
---
<IssuesLayout title={`${ISSUES_TITLE} | Pixels to Motors`} description={description} path="/issues" current="top" jsonLd={jsonLd}>
  <section class="ihero">
    <p class="ihero-k">課題地図</p>
    <h1 class="ihero-h">{ISSUES_TITLE}</h1>
    <p class="ihero-lead">放っておくと、ロボットが現場に入る前に止まってしまう課題を{issues.length}件に整理しました。<br />まず読むなら、この3つです。</p>
    <ol class="top3">
      {top3.map((i) => (
        <li>
          <a class="t3" href={`/issues/${i.data.slug}`}>
            {usePhoto
              ? <span class="t3-ph"><img src={PHOTO[i.data.slug]} alt="" loading="eager" width="1200" height="750" /></span>
              : <span class="t3-ic"><i class="ms">{ICON[i.data.slug] ?? 'help'}</i></span>}
            <span class="t3-title">{i.data.title}</span>
            <span class="t3-sum">{i.data.summary}</span>
            <span class="t3-meta">緊急度 {i.data.urgency}・深刻度 {i.data.severity}<i class="ms">arrow_forward</i></span>
          </a>
        </li>
      ))}
    </ol>
    <div class="ihero-cta">
      <a class="ibtn" href="#all">{issues.length}件すべてを見る<i class="ms">arrow_downward</i></a>
    </div>
    <p class="ihero-upd">{CATEGORIES.length}分類・{nSources}出典。{LAST_CHECKED ? `最近の動きを最後に調べた日：${jdate(LAST_CHECKED)}（週1回）` : '最近の動きは週1回調べて更新します'}</p>
  </section>

  <section class="ipanel" id="news">
    <h2 class="ih2">最近の動き</h2>
    <p class="idesc">各課題に関わる規制・研究・事業の新しい動きを、週1回、出典つきで足しています。要約は出典の言い回しを使わずに書いています。</p>
    {NEWS.length > 0
      ? <><NewsList items={NEWS.slice(0, 6)} /><p class="more"><a class="ibtn ibtn-line" href="/issues/updates">すべての動きと更新履歴<i class="ms">arrow_forward</i></a></p></>
      : <p class="empty">最初の調査の結果を待っています。見つかった動きはここに載ります。</p>}
  </section>

  <section class="ipanel" id="categories">
    <h2 class="ih2">9つの分類</h2>
    <p class="idesc">社会実装を一つのシステムとして見て、課題を9つの分類に分けています。</p>
    <div class="igrid">
      {CATEGORIES.map((c) => {
        const n = issues.filter((i) => i.data.category_slug === c.slug).length;
        return (
          <a class="cbox" href={`/issues/category/${c.slug}`}>
            <h3>{c.name}<span>{n}件</span></h3>
            <p>{c.desc}</p>
          </a>
        );
      })}
    </div>
  </section>

  <section class="ipanel" id="regulations">
    <h2 class="ih2">社会実装で論点となる規制・制度</h2>
    <p class="idesc">構造課題の背景で、改正・整備の是非が議論されている主な規制・制度を、中立に整理した索引です。詳しい論点は関連する課題のページをご覧ください。</p>
    <div class="regs">
      {REGULATIONS.map((r) => (
        <div class="reg">
          <div class="reg-top"><h3>{r.name}</h3><span class="reg-st">{r.status}{r.needs_check && <em>要確認</em>}</span></div>
          <p>{r.desc}</p>
          <p class="reg-meta"><span>関連課題</span>{r.issues.map((s) => <a href={`/issues/${s}`}>{title[s] ?? s}</a>)}</p>
          <p class="reg-meta"><span>出典</span>{r.source}</p>
        </div>
      ))}
    </div>
  </section>

  <section class="ipanel" id="all">
    <h2 class="ih2">すべての課題（{issues.length}件）</h2>
    <p class="idesc">深刻度・緊急度の高い順に並べています。カードの点数はどちらも5段階です。課題どうしのつながりは<a class="ilink" href="/issues/map">課題マップ</a>でたどれます。</p>
    <div class="igrid">{issues.map((i) => <IssueCard issue={i} />)}</div>
  </section>

  <section class="ipanel" id="about">
    <h2 class="ih2">この課題地図について</h2>
    <ul class="about">
      <li><b>生成AIによる制作・評価版です。</b>本文・図・ページのもとになるデータは生成AIが作成し、人が点検しています。誤りや古い情報を含む可能性があります。</li>
      <li><b>特定のメーカー・エコシステムの立場はとりません。</b>「人とロボットが共存する社会の持続可能性と体験の質を、長期にわたって維持・向上できるか」を判断軸に課題を選び、緊急度と深刻度で優先度を示しています。賛否が分かれる論点は結論を断定せず、対立軸と出典を併記します。</li>
      <li><b>中立を志向しますが、完全な無偏りは保証できません。</b>事実・解釈・提案を分け、トレードオフや反対論も併記するよう努めています。</li>
      <li><b>週1回、自動で調べています。</b>最近の動き（出典つき）はそのまま追加し、点数・規制の状態・本文の書き換えは人が確認してから反映します。経緯は<a href="/issues/updates">更新履歴</a>に残しています。</li>
    </ul>
  </section>
</IssuesLayout>

<style>
  .ihero { padding: 48px 0 8px; }
  .ihero-k { margin: 0; font: 500 13px/20px var(--sans); color: var(--ink-3); }
  .ihero-h { margin: 8px 0 16px; font: 600 36px/1.4 var(--sans); max-width: 900px; }
  .ihero-lead { margin: 0; font: 400 17px/2 var(--sans); max-width: 820px; }
  .ihero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .ihero-upd { margin: 16px 0 0; font: 400 12px/18px var(--sans); color: var(--ink-3); }
  .top3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0 0; padding: 0; }
  .t3 { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; background: #fff; border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,.08); transition: box-shadow .15s; }
  .t3:hover { box-shadow: 0 8px 24px rgba(0,0,0,.16); }
  .t3:hover .t3-title { text-decoration: underline; }
  .t3-ph { display: block; margin: -24px -24px 6px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px 8px 0 0; background: #eee; }
  .t3-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .t3-ic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--dark, #222); }
  .t3-ic .ms { font-size: 28px; color: #fff; }
  .t3-title { font: 600 20px/1.5 var(--sans); color: var(--ink); }
  .t3-sum { font: 400 14px/1.8 var(--sans); color: var(--ink-2); }
  .t3-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid #eee;
    font: 400 12px/20px var(--sans); color: var(--ink-3); }
  .t3-meta .ms { font-size: 20px; color: var(--ink); }
  .ilink { text-decoration: underline; color: var(--ink); }
  .more { margin: 24px 0 0; }
  .empty { margin: 0; padding: 20px; border-radius: 8px; background: #f5f5f5; font: 400 14px/1.8 var(--sans); color: var(--ink-3); }

  .cbox { display: flex; flex-direction: column; padding: 20px; border: 1px solid #e3e3e3; border-radius: 8px; transition: border-color .15s; }
  .cbox:hover { border-color: var(--ink); }
  .cbox h3 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; font: 600 16px/1.5 var(--sans); }
  .cbox h3 span { font: 400 12px/24px var(--sans); color: var(--ink-3); white-space: nowrap; }
  .cbox p { margin: 0; font: 400 13px/1.7 var(--sans); color: var(--ink-2); }

  .regs { display: flex; flex-direction: column; gap: 16px; }
  .reg { padding: 20px; border: 1px solid #e3e3e3; border-radius: 8px; }
  .reg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; }
  .reg h3 { margin: 0; font: 600 16px/1.6 var(--sans); }
  .reg-st { font: 400 12px/1.6 var(--sans); padding: 2px 8px; border-radius: 4px; background: #f0f0f0; color: var(--ink-2); }
  .reg-st em { font-style: normal; margin-left: 6px; color: var(--ink); font-weight: 600; }
  .reg p { margin: 8px 0 0; font: 400 14px/1.8 var(--sans); color: var(--ink-2); }
  .reg .reg-meta { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .reg-meta span { color: var(--ink-3); }
  .reg-meta a { text-decoration: underline; color: var(--ink); }

  .about { margin: 0; padding-left: 1.2em; }
  .about li { margin: 0 0 12px; font: 400 15px/1.9 var(--sans); color: var(--ink-2); }
  .about b { color: var(--ink); font-weight: 600; }
  .about a { text-decoration: underline; }
  @media (max-width: 899px) and (min-width: 600px) {
    .top3 { grid-template-columns: 1fr; }
  }
  @media (max-width: 599px) {
    .ihero { padding-top: 32px; }
    .ihero-h { font-size: 26px; }
    .ihero-lead { font-size: 15px; }
    .top3 { grid-template-columns: 1fr; }
    .t3 { padding: 18px 20px; gap: 6px; }
    .t3-ph + .t3-title { margin-top: 0; }
    .t3:has(.t3-ph) { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; row-gap: 4px; padding: 14px; align-items: start; }
    .t3:has(.t3-ph) .t3-ph { grid-row: 1 / span 3; margin: 0; width: 96px; aspect-ratio: 1; border-radius: 6px; }
    .t3:has(.t3-ph) .t3-meta { grid-column: 2; padding-top: 8px; }
    .t3-ic { width: 40px; height: 40px; }
    .t3-ic .ms { font-size: 24px; }
    .t3-title { font-size: 17px; }
    .t3-sum { font-size: 13px; line-height: 1.7; }
    .top3 { gap: 12px; margin-top: 24px; }
  }
</style>
