---
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';
import riviere from '../assets/images/riviere.jpg';
import prairie from '../assets/images/prairie.jpg';

// Pour ajouter une photo : importer l'image et ajouter une ligne ici. C'est tout.
const photos = [
  { src: salon1, alt: 'Le salon', caption: 'Le salon' },
  { src: chambreRiviere1, alt: 'Chambre Rivière', caption: 'Chambre Rivière · 1 lit 140×190' },
  { src: terrasse, alt: 'La terrasse', caption: 'La terrasse' },
  { src: salon2, alt: 'Le salon', caption: 'Le salon' },
  { src: grenier, alt: 'Le grenier', caption: 'Le grenier' },
  { src: jardin, alt: 'Le jardin', caption: 'Le jardin' },
  { src: chambreTilleul, alt: 'Chambre Tilleul',   caption: 'Chambre Tilleul · 1 lit 140×190' },
  { src: riviere, alt: "L'Allier", caption: "L'Allier, à 100m" },
  { src: petiteChambre, alt: 'La petite chambre', caption: 'La petite chambre · 1 lit 90×190' },
  { src: hamac, alt: 'Espace détente', caption: 'Espace détente · Hamac' },
  { src: cecile, alt: 'Cécile', caption: 'Cécile sur son fauteuil, scrutant la nature…' },
];
---

<section id="gallery" class="py-16 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-md tracking-[0.3em]  text-primary mb-4 font-display">Galerie</span>
      <h2 class="font-display text-5xl font-light">Découvrez le lieu</h2>
    </div>

    <!-- CSS columns : les photos gardent leurs proportions naturelles,
         s'empilent automatiquement, aucun calcul de span nécessaire. -->
    <div class="columns-2 md:columns-3 gap-2">
      {photos.map((photo, i) => (
        <div
          class="break-inside-avoid mb-3 cursor-pointer group relative overflow-hidden rounded-sm shadow-lg border border-secondary"
          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-auto block 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="translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 text-white 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>