---
import BaseLayout from "../layouts/BaseLayout.astro";
import { galleryIntro, photoTopics } from "../data/photos";
import { featuredMessage, messages, messagesIntro } from "../data/messages";
import { people, peopleIntro } from "../data/people";
import { site, stats } from "../data/site";
import { timeline, timelineIntro } from "../data/timeline";

const previewTimeline = timeline.slice(0, 4);
const previewPhotoTopics = photoTopics.slice(0, 4);
const previewPeople = people.slice(0, 6);
---

<BaseLayout title={site.title}>
  <section
    id="top"
    class="hero"
    style={`--hero-image: url("${site.heroImage}")`}
  >
    <div class="hero-content">
      <p class="eyebrow">{site.anniversary}</p>
      <h1>{site.title}</h1>
      <p>{site.subtitle}</p>
      <div class="hero-actions">
        <a class="button primary" href="/timeline/">翻开回忆</a>
        <a class="button" href="/messages/">写一句话</a>
      </div>
    </div>
  </section>

  <aside class="stats" aria-label="纪念数据">
    {
      stats.map((item) => (
        <div class="stat">
          <strong>{item.value}</strong>
          <span>{item.label}</span>
        </div>
      ))
    }
  </aside>

  <main>
    <section id="timeline">
      <div class="section-inner">
        <div class="section-title">
          <h2>{timelineIntro.title}</h2>
          <p>{timelineIntro.text}</p>
        </div>

        <div class="timeline">
          {
            previewTimeline.map((moment) => (
              <article class="moment">
                <time>{moment.date}</time>
                <div>
                  <h3>{moment.title}</h3>
                  <p>{moment.text}</p>
                </div>
              </article>
            ))
          }
        </div>

        <a class="section-link" href="/timeline/">查看完整时间线</a>
      </div>
    </section>

    <section id="gallery" class="gallery-band">
      <div class="section-inner">
        <div class="section-title">
          <h2>{galleryIntro.title}</h2>
          <p>{galleryIntro.text}</p>
        </div>

        <div class="photo-grid">
          {
            previewPhotoTopics.map((topic) => (
              <a
                class="photo-card topic-card"
                href={`/gallery/${topic.slug}/`}
                style={topic.cover ? `--photo-image: url("${topic.cover}")` : ""}
              >
                <div>
                  <strong>{topic.title}</strong>
                  <span>{topic.text}</span>
                </div>
              </a>
            ))
          }
        </div>

        <a class="section-link" href="/gallery/">查看全部照片</a>
      </div>
    </section>

    <section id="people">
      <div class="section-inner">
        <div class="section-title">
          <h2>{peopleIntro.title}</h2>
          <p>{peopleIntro.text}</p>
        </div>

        <div class="people-grid">
          {
            previewPeople.map((person) => (
              <article class="person">
                <div class="avatar">{person.initial}</div>
                <h3>
                  {person.name} · {person.location}
                </h3>
                <p>{person.text}</p>
              </article>
            ))
          }
        </div>

        <a class="section-link" href="/people/">查看所有同学</a>
      </div>
    </section>

    <section id="messages" class="gallery-band">
      <div class="section-inner">
        <div class="section-title">
          <h2>{messagesIntro.title}</h2>
          <p>{messagesIntro.text}</p>
        </div>

        <div class="message-wall">
          <article class="message featured">
            <p>“{featuredMessage.text}”</p>
            <cite>{featuredMessage.author}</cite>
          </article>
          <div class="small-messages">
            {
              messages.slice(0, 2).map((message) => (
                <article class="message">
                  <h3>{message.title}</h3>
                  <p>{message.text}</p>
                </article>
              ))
            }
          </div>
        </div>

        <a class="section-link" href="/messages/">查看全部留言</a>
      </div>
    </section>

    <section class="ending">
      <div class="section-inner">
        <h2>下一次见面，我们再补一张合照</h2>
        <p>
          这个网站会继续长大：添上真实照片、真实名字、真实留言，然后成为属于我们班的一本电子纪念册。
        </p>
      </div>
    </section>
  </main>
</BaseLayout>