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

export function getStaticPaths() {
  return COLLECTIONS.map((col) => ({
    params: { slug: col.slug },
    props: { collection: col },
  }));
}

const { collection } = Astro.props;
const base = import.meta.env.BASE_URL;

const collectionPhotos = collection.photoIds
  .map((id: string) => PHOTOS.find((p) => p.id === id))
  .filter(Boolean) as typeof PHOTOS;

const heroPhoto = PHOTOS.find((p) => p.id === collection.heroPhotoId)!;

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'ImageGallery',
  name: `${collection.title} — ${SITE.name} Photography`,
  description: collection.description,
  url: `${SITE.url}stories/${collection.slug}/`,
  creator: {
    '@type': 'Person',
    name: SITE.name,
  },
  dateCreated: collection.year,
  locationCreated: {
    '@type': 'Place',
    name: collection.location,
  },
};
---

<Layout
  title={collection.title}
  description={`${collection.title} — ${collection.description.slice(0, 120)}`}
>
  <SiteHeader />

  <main id="main-content" class="pt-14">
    <!-- Collection hero -->
    <div class="relative h-72 sm:h-96 overflow-hidden">
      <img
        src={heroPhoto.src}
        alt={heroPhoto.alt}
        width={heroPhoto.width}
        height={heroPhoto.height}
        loading="eager"
        fetchpriority="high"
        decoding="sync"
        class="absolute inset-0 w-full h-full object-cover"
      />
      <div class="absolute inset-0 bg-black/50"></div>
      <div class="absolute bottom-0 left-0 right-0 p-6 sm:p-10">
        <div class="max-w-7xl mx-auto">
          <p class="eyebrow text-white/70 mb-2">{collection.year} · {collection.location}</p>
          <h1 class="text-2xl sm:text-4xl font-bold text-white">{collection.title}</h1>
        </div>
      </div>
    </div>

    <div class="py-12 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto">
        <!-- Nav + description -->
        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-6 mb-10">
          <div class="max-w-2xl">
            <p class="text-ink-secondary leading-relaxed">{collection.description}</p>
          </div>
          <a
            href={`${base}stories/`}
            class="shrink-0 text-sm text-ink-secondary hover:text-ink transition-colors font-medium"
            aria-label="Back to all stories"
          >
            ← All Stories
          </a>
        </div>

        <!-- Photo grid with lightbox -->
        <section aria-label={`Photos from ${collection.title}`}>
          <GalleryGrid photos={collectionPhotos} />
        </section>

        <!-- Collection navigation -->
        <nav
          class="mt-16 pt-8 border-t border-gray-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"
          aria-label="Collection navigation"
        >
          {(() => {
            const idx = COLLECTIONS.findIndex((c) => c.slug === collection.slug);
            const prev = COLLECTIONS[idx - 1];
            const next = COLLECTIONS[idx + 1];
            return (
              <>
                {prev ? (
                  <a href={`${base}stories/${prev.slug}/`} class="group flex flex-col gap-0.5">
                    <span class="eyebrow group-hover:text-ink transition-colors">← Previous</span>
                    <span class="font-medium text-ink text-sm group-hover:text-accent transition-colors">{prev.title}</span>
                  </a>
                ) : <div />}
                {next ? (
                  <a href={`${base}stories/${next.slug}/`} class="group flex flex-col gap-0.5 text-right sm:text-right">
                    <span class="eyebrow group-hover:text-ink transition-colors">Next →</span>
                    <span class="font-medium text-ink text-sm group-hover:text-accent transition-colors">{next.title}</span>
                  </a>
                ) : <div />}
              </>
            );
          })()}
        </nav>
      </div>
    </div>
  </main>

  <SiteFooter />
</Layout>

<script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
