---
import Layout from '../../layouts/Layout.astro';
import SiteHeader from '../../components/SiteHeader.astro';
import SiteFooter from '../../components/SiteFooter.astro';
import { SITE } from '../../data/site';
import { PHOTOS, COLLECTIONS } from '../../data/photos';

const base = import.meta.env.BASE_URL;
---

<Layout
  title="Photo Stories"
  description={`Photo collections and series by ${SITE.name} — sustained documentary work across Asia and beyond.`}
>
  <SiteHeader />

  <main id="main-content" class="pt-14">
    <div class="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto">
        <div class="mb-12">
          <a href={base} class="eyebrow hover:text-ink transition-colors mb-4 inline-block">
            ← All Work
          </a>
          <h1 class="text-3xl sm:text-4xl font-bold text-ink mt-4">Photo Stories</h1>
          <p class="text-ink-secondary mt-3 max-w-xl leading-relaxed">
            Each series documents a sustained engagement with a particular place or light condition — days, not hours.
          </p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {COLLECTIONS.map((col) => {
            const heroPhoto = PHOTOS.find((p) => p.id === col.heroPhotoId)!;
            return (
              <a
                href={`${base}stories/${col.slug}/`}
                class="group block"
                aria-label={`View collection: ${col.title}`}
              >
                <div class="aspect-[3/2] overflow-hidden bg-gray-100 rounded-lg mb-4">
                  <img
                    src={heroPhoto.src}
                    alt={heroPhoto.alt}
                    width={heroPhoto.width}
                    height={heroPhoto.height}
                    loading="lazy"
                    decoding="async"
                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
                  />
                </div>
                <p class="eyebrow mb-1">{col.year} · {col.location}</p>
                <h2 class="font-bold text-ink text-xl group-hover:text-accent transition-colors">{col.title}</h2>
                <p class="text-sm text-ink-secondary mt-1 leading-relaxed line-clamp-2">{col.description}</p>
                <p class="text-sm text-ink-secondary mt-2">{col.photoIds.length} photographs</p>
              </a>
            );
          })}
        </div>
      </div>
    </div>
  </main>

  <SiteFooter />
</Layout>
