---
import BaseLayout from "../layouts/BaseLayout.astro";
import { people, peopleIntro } from "../data/people";
import { site } from "../data/site";
---

<BaseLayout title={`${peopleIntro.title} · ${site.className}`}>
  <main class="page-main">
    <section class="page-hero">
      <div class="section-inner">
        <a class="back-link" href="/">返回首页</a>
        <p class="eyebrow">Classmates</p>
        <h1>{peopleIntro.title}</h1>
        <p>{peopleIntro.text}</p>
      </div>
    </section>

    <section>
      <div class="section-inner">
        <aside class="data-guide" aria-labelledby="people-data-guide-title">
          <div>
            <p class="eyebrow">Data Guide</p>
            <h2 id="people-data-guide-title">修改或添加同学数据</h2>
            <p>
              所有同学卡片都来自 <code>src/data/people.ts</code>。修改已有同学时，直接编辑对应对象；添加新同学时，复制一个对象并更换
              <code>slug</code>、<code>name</code>、<code>location</code>、<code>school</code>、<code>direction</code>
              等字段。
            </p>
          </div>
          <ol>
            <li><strong>自动提交：</strong>也可以在 GitHub 新建“更新「如今的我们」”issue，填完表单后会自动创建一个更新数据的 PR。</li>
            <li><strong>照片：</strong><code>photo</code> 可留空；如需放照片，将图片放入 <code>public</code> 后填写以 <code>/</code> 开头的路径。</li>
            <li><strong>关键词：</strong><code>keywords</code> 是数组，建议保留 1 到 3 个短词，列表页和个人页都会显示。</li>
            <li><strong>个人页：</strong><code>currentStatus</code>、<code>highlight</code>、<code>toPastSelf</code>、<code>favoriteMemory</code> 和 <code>messageToClass</code> 会生成详情内容。</li>
          </ol>
        </aside>

        <div class="people-grid page-grid">
          {
            people.map((person) => (
              <a class="person person-link" href={`/people/${person.slug}/`}>
                <div class="person-photo" style={person.photo ? `--person-photo: url("${person.photo}")` : ""}>
                  <span>{person.initial}</span>
                </div>
                <div class="person-body">
                  <h3>
                    {person.name} · {person.location}
                  </h3>
                  <div class="person-meta">
                    <span>{person.school}</span>
                    <span>{person.direction}</span>
                  </div>
                  <div class="keyword-row">
                    {person.keywords.map((keyword) => <span>{keyword}</span>)}
                  </div>
                  <p>{person.text}</p>
                </div>
              </a>
            ))
          }
        </div>
      </div>
    </section>
  </main>
</BaseLayout>
