---
import { Image } from 'astro:assets';
import salon1 from '../assets/images/salon_1.jpg';
import salon2 from '../assets/images/salon_2.jpg';
import chambreRiviere1 from '../assets/images/chambre_riviere_1.jpg';
import chambreTilleul from '../assets/images/chambre_tilleul.jpg';
import petiteChambre from '../assets/images/petite_chambre.jpg';
import grenier from '../assets/images/grenier.jpg';
import cecile from '../assets/images/cecile.jpg';
import hamac from '../assets/images/hamac.jpg';
import terrasse from '../assets/images/terrasse.jpg';
import jardin from '../assets/images/jardin.jpg';

// Chaque photo a ses classes de span écrites en dur (Tailwind ne détecte pas les classes dynamiques)
const photos = [
  { src: salon1,          alt: 'Le salon',            caption: 'Le salon',                                      cls: 'col-span-1 h-44 md:col-span-2 md:row-span-2 md:h-auto' },
  { src: salon2,          alt: 'Le salon',            caption: 'Le salon',                                      cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
  { src: chambreRiviere1, alt: 'Chambre Rivière',     caption: 'Chambre Rivière · 1 lit 140×190',              cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
  { src: chambreTilleul,  alt: 'Chambre Tilleul',     caption: 'Chambre Tilleul · 1 lit 140×190',              cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
  { src: petiteChambre,   alt: 'La petite chambre',   caption: 'La petite chambre · 1 lit 90×190',             cls: 'col-span-2 h-44 md:col-span-2 md:row-span-1 md:h-auto' },
  { src: grenier,         alt: 'Le grenier',           caption: 'Le grenier',                                    cls: 'col-span-1 h-44 md:col-span-1 md:row-span-2 md:h-auto' },
  { src: terrasse,        alt: 'La terrasse',          caption: 'La terrasse',                                   cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
  { src: jardin,          alt: 'Le jardin',             caption: 'Le jardin',                                    cls: 'col-span-1 h-44 md:col-span-1 md:row-span-1 md:h-auto' },
  { src: hamac,           alt: 'Espace détente',        caption: 'Espace détente · Hamac',                      cls: 'col-span-2 h-44 md:col-span-2 md:row-span-1 md:h-auto' },
  { src: cecile,          alt: 'Cécile',               caption: 'Cécile sur son fauteuil, scrutant la nature…', cls: 'col-span-2 h-48 md:col-span-3 md:row-span-1 md:h-auto' },
];
---

<section id="gallery" class="py-32 scroll-mt-20 bg-gradient-to-b from-[#f7f3e8] via-[#f2efdf] to-[#e4ecd2] border-y border-[#d9d2c3]/70">
  <div class="max-w-6xl mx-auto px-6">

    <div class="mb-14 text-center">
      <span class="block text-xs tracking-[0.3em] uppercase text-primary mb-4">Galerie</span>
      <h2 class="font-serif text-5xl font-light">Découvrez le lieu</h2>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:auto-rows-[200px] grid-flow-dense">
      {photos.map((photo, i) => (
        <div
          class:list={[
            "overflow-hidden cursor-pointer group relative",
            photo.cls,
          ]}
          data-lightbox={i}
          data-caption={photo.caption}
          role="button"
          tabindex="0"
          aria-label={`Voir en grand : ${photo.alt}`}
        >
          <Image
            src={photo.src}
            alt={photo.alt}
            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 pointer-events-none"
          />
          <div class="absolute inset-0 bg-dark/0 group-hover:bg-dark/30 transition-colors duration-300 flex items-end">
            <span class="text-white/0 group-hover:text-white/90 transition-colors duration-300 text-xs tracking-[0.15em] uppercase px-4 pb-4">
              {photo.caption}
            </span>
          </div>
        </div>
      ))}
    </div>

  </div>
</section>

<!-- Lightbox -->
<div
  id="lightbox"
  class="fixed inset-0 z-50 bg-black/90 items-center justify-center"
  style="display:none"
  aria-hidden="true"
  role="dialog"
  aria-modal="true"
  aria-label="Visionneuse de photos"
>
  <button
    id="lb-close"
    class="absolute top-5 right-6 text-white/60 hover:text-white text-4xl font-light leading-none transition-colors"
    aria-label="Fermer"
  >×</button>

  <button
    id="lb-prev"
    class="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 text-white/60 hover:text-white text-6xl font-light leading-none transition-colors px-2"
    aria-label="Photo précédente"
  >‹</button>

  <div class="flex flex-col items-center max-w-5xl w-full mx-auto px-20">
    <img id="lb-img" src="" alt="" class="max-h-[80vh] max-w-full object-contain" />
    <p id="lb-caption" class="mt-5 text-white/50 text-xs tracking-[0.25em] uppercase"></p>
  </div>

  <button
    id="lb-next"
    class="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 text-white/60 hover:text-white text-6xl font-light leading-none transition-colors px-2"
    aria-label="Photo suivante"
  >›</button>
</div>

<script>
  var lightbox = document.getElementById('lightbox');
  var lbImg    = document.getElementById('lb-img');
  var lbCap    = document.getElementById('lb-caption');
  var lbClose  = document.getElementById('lb-close');
  var lbPrev   = document.getElementById('lb-prev');
  var lbNext   = document.getElementById('lb-next');
  var items    = Array.from(document.querySelectorAll('[data-lightbox]'));
  var current  = 0;

  function showAt(i) {
    current = ((i % items.length) + items.length) % items.length;
    var wrapper = items[current];
    var img = wrapper.querySelector('img');
    lbImg.src = img.currentSrc || img.src;
    lbImg.alt = img.alt;
    lbCap.textContent = wrapper.dataset.caption || '';
  }

  function openAt(i) {
    showAt(i);
    lightbox.style.display = 'flex';
    lightbox.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
    lbClose.focus();
  }

  function closeLightbox() {
    lightbox.style.display = 'none';
    lightbox.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
  }

  items.forEach(function(el, i) {
    el.addEventListener('click', function() { openAt(i); });
    el.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openAt(i); }
    });
  });

  lbClose.addEventListener('click', closeLightbox);
  lbPrev.addEventListener('click', function() { showAt(current - 1); });
  lbNext.addEventListener('click', function() { showAt(current + 1); });
  lightbox.addEventListener('click', function(e) { if (e.target === lightbox) closeLightbox(); });

  document.addEventListener('keydown', function(e) {
    if (lightbox.style.display === 'none') return;
    if (e.key === 'Escape')      closeLightbox();
    if (e.key === 'ArrowLeft')   showAt(current - 1);
    if (e.key === 'ArrowRight')  showAt(current + 1);
  });
</script>