---
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, SERVICES } from '../data/site';
import { PHOTOS, COLLECTIONS, GALLERY_PHOTOS } from '../data/photos';

const base = import.meta.env.BASE_URL;
const hero = PHOTOS.find((p) => p.id === 'hero')!;

const jsonLd = {
  '@context': 'https://schema.org',
  '@graph': [
    {
      '@type': 'Person',
      name: SITE.name,
      jobTitle: SITE.role,
      url: SITE.url,
      email: SITE.email,
      image: `${SITE.url}og-image.png`,
      sameAs: [SITE.socials.linkedin, SITE.socials.instagram, SITE.socials.github],
      description: SITE.description,
    },
    {
      '@type': 'ImageGallery',
      name: `Selected Work — ${SITE.name} Photography`,
      description: SITE.tagline,
      url: SITE.url,
      creator: {
        '@type': 'Person',
        name: SITE.name,
      },
    },
  ],
};
---

<Layout>
  <SiteHeader />

  <main id="main-content">
    <!-- Hero — full-bleed photo with overlay -->
    <section
      id="hero"
      class="relative h-screen min-h-[600px] max-h-[900px] overflow-hidden"
      aria-label="Hero"
    >
      <img
        src={hero.src}
        alt={hero.alt}
        width={hero.width}
        height={hero.height}
        loading="eager"
        fetchpriority="high"
        decoding="sync"
        class="absolute inset-0 w-full h-full object-cover"
      />
      <!-- Dark gradient for text legibility -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

      <div class="absolute bottom-0 left-0 right-0 p-6 sm:p-10 lg:p-16">
        <div class="max-w-7xl mx-auto">
          <p class="eyebrow text-white/70 mb-3">{SITE.role} · {SITE.location}</p>
          <h1 class="text-4xl sm:text-5xl lg:text-7xl font-bold text-white leading-tight mb-4">
            {SITE.name}
          </h1>
          <p class="text-white/80 text-lg sm:text-xl max-w-2xl mb-8 leading-relaxed">
            {SITE.tagline}
          </p>
          <div class="flex flex-wrap gap-3">
            <a
              href="#work"
              class="inline-flex items-center gap-2 bg-white text-ink font-medium px-6 py-3 rounded-full hover:bg-gray-100 transition-colors text-sm"
            >
              View Work
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <polyline points="19 12 12 19 5 12"></polyline>
              </svg>
            </a>
            <a
              href={`mailto:${SITE.email}`}
              class="inline-flex items-center gap-2 bg-accent text-white font-medium px-6 py-3 rounded-full hover:bg-accent-dark transition-colors text-sm"
            >
              Available for hire
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Gallery Section -->
    <section id="work" class="py-16 sm:py-24 px-4 sm:px-6 lg:px-8" aria-labelledby="work-heading">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-10">
          <div>
            <p class="eyebrow mb-2">Portfolio</p>
            <h2 id="work-heading" class="text-2xl sm:text-3xl font-bold text-ink">Selected Work</h2>
          </div>
          <p class="text-sm text-ink-secondary">{GALLERY_PHOTOS.length} photographs</p>
        </div>

        <!-- Collection filter tabs -->
        <div class="flex flex-wrap gap-2 mb-6" role="tablist" aria-label="Filter by collection">
          <button
            class="gallery-filter-btn active text-sm font-medium px-4 py-2 rounded-full border transition-colors"
            data-filter="all"
            role="tab"
            aria-selected="true"
          >
            All
          </button>
          {COLLECTIONS.map((col) => (
            <button
              class="gallery-filter-btn text-sm font-medium px-4 py-2 rounded-full border transition-colors"
              data-filter={col.slug}
              role="tab"
              aria-selected="false"
            >
              {col.title}
            </button>
          ))}
          <button
            class="gallery-filter-btn text-sm font-medium px-4 py-2 rounded-full border transition-colors"
            data-filter="uncollected"
            role="tab"
            aria-selected="false"
          >
            Other
          </button>
        </div>

        <!-- The gallery grid -->
        <div id="gallery-wrapper">
          <GalleryGrid photos={GALLERY_PHOTOS} />
        </div>
      </div>
    </section>

    <!-- Stories / Collections -->
    <section id="stories" class="py-16 sm:py-24 bg-gray-50 px-4 sm:px-6 lg:px-8" aria-labelledby="stories-heading">
      <div class="max-w-7xl mx-auto">
        <div class="mb-10">
          <p class="eyebrow mb-2">Collections</p>
          <h2 id="stories-heading" class="text-2xl sm:text-3xl font-bold text-ink">Photo Stories</h2>
          <p class="text-ink-secondary mt-2 max-w-xl">Each series is a sustained engagement with a place — days, not hours.</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {COLLECTIONS.map((col) => {
            const heroPhoto = PHOTOS.find((p) => p.id === col.heroPhotoId)!;
            return (
              <a
                href={`${base}stories/${col.slug}/`}
                class="group block overflow-hidden rounded-lg bg-white border border-gray-200 hover:border-accent transition-colors"
                aria-label={`View collection: ${col.title}`}
              >
                <div class="aspect-[4/3] overflow-hidden">
                  <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>
                <div class="p-5">
                  <p class="eyebrow mb-1">{col.year} · {col.location}</p>
                  <h3 class="font-bold text-ink text-lg group-hover:text-accent transition-colors">{col.title}</h3>
                  <p class="text-sm text-ink-secondary mt-1">{col.photoIds.length} photographs</p>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>

    <!-- About -->
    <section id="about" class="py-16 sm:py-24 px-4 sm:px-6 lg:px-8" aria-labelledby="about-heading">
      <div class="max-w-7xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-start">
          <div>
            <p class="eyebrow mb-2">About</p>
            <h2 id="about-heading" class="text-2xl sm:text-3xl font-bold text-ink mb-6">A way of seeing</h2>
            <div class="space-y-5 text-ink-secondary leading-relaxed">
              <p>
                I'm Allan Ninal — a travel and documentary photographer working across Southeast Asia and beyond. I started with a point-and-shoot and a seat on overnight buses; now I carry two bodies and a notebook, but the questions are the same.
              </p>
              <p>
                My work is about paying attention in a particular way. Not the decisive moment — that phrase has done too much work. More like: the moment before the obvious thing happens, or the moment after, when the light has shifted and everyone else has looked away.
              </p>
              <p>
                I work alone and slowly. I prefer dawn to any other time of day. I am particularly interested in water — rivers, coastlines, rain — and what light does when it hits a surface it wasn't designed for.
              </p>
            </div>

            <div class="mt-8 grid grid-cols-2 gap-4">
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-2xl font-bold text-ink">8+</p>
                <p class="text-sm text-ink-secondary mt-0.5">Years shooting</p>
              </div>
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-2xl font-bold text-ink">24+</p>
                <p class="text-sm text-ink-secondary mt-0.5">Countries</p>
              </div>
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-2xl font-bold text-ink">3</p>
                <p class="text-sm text-ink-secondary mt-0.5">Active collections</p>
              </div>
              <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-2xl font-bold text-ink">∞</p>
                <p class="text-sm text-ink-secondary mt-0.5">Early mornings</p>
              </div>
            </div>
          </div>

          <!-- Services -->
          <div id="services" aria-labelledby="services-heading">
            <p class="eyebrow mb-2">Services</p>
            <h2 id="services-heading" class="text-2xl sm:text-3xl font-bold text-ink mb-6">Specialties</h2>
            <div class="space-y-5">
              {SERVICES.map((s, i) => (
                <div class="border-b border-gray-200 pb-5 last:border-0">
                  <div class="flex items-start gap-3">
                    <span class="text-xs font-medium text-ink-secondary tabular-nums mt-0.5 shrink-0">0{i + 1}</span>
                    <div>
                      <h3 class="font-bold text-ink mb-1">{s.label}</h3>
                      <p class="text-sm text-ink-secondary leading-relaxed">{s.description}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Availability band -->
    <div
      id="availability"
      class="bg-ink py-10 px-4 sm:px-6 lg:px-8 text-center"
      aria-label="Availability status"
    >
      <div class="max-w-3xl mx-auto">
        <p class="eyebrow text-white/50 mb-3">Status</p>
        <p class="text-white text-xl sm:text-2xl font-bold">{SITE.availability}</p>
        <p class="text-white/60 text-sm mt-2">Accepting editorial, commercial, and travel assignments</p>
      </div>
    </div>

    <!-- Contact -->
    <section id="contact" class="py-16 sm:py-24 px-4 sm:px-6 lg:px-8" aria-labelledby="contact-heading">
      <div class="max-w-3xl mx-auto text-center">
        <p class="eyebrow mb-3">Contact</p>
        <h2 id="contact-heading" class="text-3xl sm:text-4xl lg:text-5xl font-bold text-ink mb-6">
          Let's work together.
        </h2>
        <p class="text-ink-secondary leading-relaxed mb-10 max-w-xl mx-auto">
          Available for editorial and commercial assignments, licensing inquiries, and print sales. Response within 48 hours.
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
          <a
            href={SITE.socials.linkedin}
            class="inline-flex items-center gap-2 bg-accent text-white font-medium px-8 py-3.5 rounded-full hover:bg-accent-dark transition-colors"
            rel="noopener noreferrer"
            target="_blank"
          >
            Connect on LinkedIn
          </a>
          <a
            href={`mailto:${SITE.email}`}
            class="inline-flex items-center gap-2 border border-gray-300 text-ink font-medium px-8 py-3.5 rounded-full hover:border-gray-400 transition-colors"
          >
            Send an email
          </a>
        </div>

        <div class="flex items-center justify-center gap-6">
          <a
            href={SITE.socials.instagram}
            class="text-sm text-ink-secondary hover:text-ink transition-colors"
            rel="noopener noreferrer"
            target="_blank"
            aria-label="Instagram profile"
          >
            Instagram
          </a>
          <a
            href={SITE.socials.github}
            class="text-sm text-ink-secondary hover:text-ink transition-colors"
            rel="noopener noreferrer"
            target="_blank"
            aria-label="GitHub profile"
          >
            GitHub
          </a>
          <a
            href={SITE.socials.kofi}
            class="text-sm text-ink-secondary hover:text-ink transition-colors"
            rel="noopener noreferrer"
            target="_blank"
            aria-label="Support on Ko-fi"
          >
            Ko-fi
          </a>
        </div>
      </div>
    </section>
  </main>

  <SiteFooter />
</Layout>

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

<!-- Gallery filter script -->
<script>
  const filterBtns = document.querySelectorAll<HTMLButtonElement>('.gallery-filter-btn');
  const gridEl = document.getElementById('gallery-grid');

  if (gridEl && filterBtns.length > 0) {
    const items = Array.from(gridEl.querySelectorAll<HTMLElement>('[data-lightbox-src]'));

    // Build a map: photo src → collection slug
    // We'll use the data attributes on the parent to find the collection
    // Items are rendered in order matching GALLERY_PHOTOS; we read collection from data
    // Since GalleryGrid doesn't emit collection data, we must match by photo order
    // Let's add data-collection attributes via a different approach
    // For now, store the collection info via index matching GALLERY_PHOTOS array order

    // Simpler: we stored photos in a known order in GALLERY_PHOTOS.
    // But GalleryGrid doesn't output collection. Let's use photo captions as the key.
    // The caption contains collection info for collection photos, nothing for uncollected.

    // Re-approach: add data-collection to items via the component.
    // Since we already shipped GalleryGrid without it, let's filter by index:
    // We know GALLERY_PHOTOS order: [ascona-01, ascona-02, ascona-03, tokyo-01, tokyo-02, tokyo-03, borneo-01, borneo-02, borneo-03, extra-01..extra-07]
    const collectionMap = [
      'ascona-coast', 'ascona-coast', 'ascona-coast',
      'tokyo-light-studies', 'tokyo-light-studies', 'tokyo-light-studies',
      'rivers-of-borneo', 'rivers-of-borneo', 'rivers-of-borneo',
      null, null, null, null, null, null, null,
    ];

    filterBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const filter = btn.dataset.filter ?? 'all';

        filterBtns.forEach((b) => {
          b.classList.remove('active', 'bg-ink', 'text-white', 'border-ink');
          b.classList.add('border-gray-200', 'text-ink-secondary');
          b.setAttribute('aria-selected', 'false');
        });
        btn.classList.add('active', 'bg-ink', 'text-white', 'border-ink');
        btn.classList.remove('border-gray-200', 'text-ink-secondary');
        btn.setAttribute('aria-selected', 'true');

        items.forEach((item, idx) => {
          const col = collectionMap[idx] ?? null;
          if (filter === 'all') {
            item.style.display = '';
          } else if (filter === 'uncollected') {
            item.style.display = col === null ? '' : 'none';
          } else {
            item.style.display = col === filter ? '' : 'none';
          }
        });
      });
    });

    // Init active state on All button
    const allBtn = document.querySelector<HTMLButtonElement>('[data-filter="all"]');
    allBtn?.classList.add('bg-ink', 'text-white', 'border-ink');
    allBtn?.classList.remove('border-gray-200', 'text-ink-secondary');
  }
</script>
