---
import { Image } from 'astro:assets';
import g1 from '../assets/images/gallery_1.jpg';
import g2 from '../assets/images/gallery_2.jpg';
import g3 from '../assets/images/gallery_3.jpg';
import g4 from '../assets/images/gallery_4.jpg';
import g5 from '../assets/images/gallery_5.jpg';
import g6 from '../assets/images/gallery_6.jpg';
import g7 from '../assets/images/gallery_7.jpg';

const photos = [
  { src: g1, alt: 'Le gîte' },
  { src: g2, alt: 'Chambre' },
  { src: g3, alt: 'Cuisine' },
  { src: g4, alt: 'Salon' },
  { src: g5, alt: 'Extérieur' },
  { src: g6, alt: 'Rivière' },
  { src: g7, alt: 'Vue panoramique' },
];
---

<section id="gallery" class="py-32 scroll-mt-20">
  <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-4">
      {photos.map((photo, i) => (
        <div class:list={["overflow-hidden rounded-sm", i === 6 ? "col-span-2 md:col-span-1" : ""]}>
          <Image
            src={photo.src}
            alt={photo.alt}
            class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500"
          />
        </div>
      ))}
    </div>

  </div>
</section>