---
import BaseLayout from "../layouts/BaseLayout.astro";
import { galleryIntro, photoTopics } from "../data/photos";
import { site } from "../data/site";
---

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

    <section class="gallery-band">
      <div class="section-inner">
        <div class="photo-grid page-grid">
          {
            photoTopics.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>
      </div>
    </section>
  </main>
</BaseLayout>
