sauvagerie/pages/index.vue

<template>
  <PageMeta
      title="La Sauvagerie - Location de vacances"
      description="Maison de vacances pour 6 personnes à proximité de la mer en Normandie"
  />

  <div class="rental-container">
    <!-- Main Image Section -->
    <div class="main-image-container">
      <v-img
        src="/images/photos/IMG_2216.min.JPG"
        alt="La Sauvagerie - Vue principale"
        cover
        eager
        height="500"
        class="main-image rounded-lg"
        :loading="loading"
        @click="selectImage('/images/photos/IMG_2216.min.png')"
        @load="onImageLoad"
        @error="onImageError"
        style="cursor: pointer;"
      ></v-img>
    </div>

    <!-- Thumbnails Section -->
    <div class="thumbnails-container mt-4">
      <v-row>
        <v-col v-for="(image, index) in thumbnailImages" :key="index" cols="12" sm="6" md="3">
          <v-img
            :src="image.src"
            :alt="image.alt"
            height="150"
            cover
            eager
            class="thumbnail rounded-lg"
            @click="selectImage(image.src)"
            @load="onImageLoad"
            @error="onImageError"
          ></v-img>
        </v-col>
      </v-row>
    </div>

    <!-- Description Section -->
    <div class="description-container mt-8">
      <h2>Bienvenue à La Sauvagerie</h2>
      <v-card class="pa-4">
        <p class="text-body-1">
          Bienvenue à la Sauvagerie, maison de vacances de 95m², idéale pour des séjours en famille ou entre amis. 
          Située dans un cadre verdoyant et paisible, cette maison offre trois chambres pouvant accueillir jusqu'à six personnes. 
          Profitez de la tranquillité ambiante, et de la proximité d'une voie pédestre et cyclable qui vous mènera facilement 
          aux commerces du bourg à 1,5 km, ou à la plage et la mer à seulement 3 km.
        </p>
      </v-card>
    </div>

    <!-- Features Summary Section -->
    <div class="features-container mt-8">
      <h2>Caractéristiques</h2>
      <v-row>
        <v-col cols="12" md="6">
          <v-card class="pa-4 h-100">
            <h3 class="text-h6 mb-4">Informations générales</h3>
            <ul class="feature-list">
              <li>Maison de vacances pour 6 personnes</li>
              <li>Location semaine du samedi au samedi, 700€ la semaine</li>
              <li>Arrivée entre 17h et 19h, départ avant midi</li>
              <li>Surface: 95m²</li>
              <li>2 places de parking</li>
            </ul>
          </v-card>
        </v-col>
        <v-col cols="12" md="6">
          <v-card class="pa-4 h-100">
            <h3 class="text-h6 mb-4">Équipements</h3>
            <ul class="feature-list">
              <li>3 chambres (capacité 6 personnes)</li>
              <li>1 salle de bain avec douche</li>
              <li>2 WC</li>
              <li>Salon / cuisine équipée</li>
              <li>Terrasse en bois fermée de 30m²</li>
              <li>Électroménager complet (lave-linge, lave-vaisselle, etc.)</li>
            </ul>
          </v-card>
        </v-col>
      </v-row>
    </div>

    <!-- Location Section -->
    <div class="location-container mt-8">
      <h2>Situation</h2>
      <v-card class="pa-4">
        <ul class="feature-list">
          <li>Accès à la mer à 3 km</li>
          <li>Commerces du bourg à 1,5 km</li>
          <li>Voie pédestre et cyclable à proximité</li>
          <li>Cadre verdoyant et paisible</li>
        </ul>
      </v-card>
    </div>

    <!-- Contact Section -->
    <div class="contact-container mt-8">
      <h2>Contact</h2>
      <v-card class="pa-4">
        <Contact />
      </v-card>
    </div>

    <!-- Image Modal -->
    <v-dialog v-model="showImageModal" max-width="90vw" content-class="image-modal-dialog">
      <v-card class="image-modal-card">
        <v-btn icon class="close-btn" @click="showImageModal = false">
          <v-icon>fas fa-times</v-icon>
        </v-btn>
        <v-card-text class="text-center pa-0">
          <v-img
            :src="selectedImageSrc"
            class="enlarged-image"
            :loading="loading"
            cover
          >
            <template v-slot:placeholder>
              <div class="d-flex align-center justify-center" style="height: 300px;">
                <v-progress-circular indeterminate color="primary"></v-progress-circular>
              </div>
            </template>
          </v-img>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import { useDisplay, useTheme } from 'vuetify'
import type { Ref } from '@vue/reactivity'
import { ref } from 'vue'

const i18n = useI18n()
const theme = useTheme()

// Variables de débogage
const showDebug = ref(true)
const loading = ref(true)
const imageErrors = ref<string[]>([])
const imagesLoaded = ref<string[]>([])

// Variables for image modal
const showImageModal = ref(false)
const selectedImageSrc = ref('')

// List of thumbnail images
const thumbnailImages = ref([
  { src: '/images/photos/IMG_2216.min.JPG', alt: 'Vue principale' },
  { src: '/images/photos/IMG_2217.min.JPG', alt: 'Vue extérieure' },
  { src: '/images/photos/IMG_2219.min.JPG', alt: 'Intérieur' },
  { src: '/images/photos/IMG_2220.min.JPG', alt: 'Intérieur' },
  { src: '/images/photos/IMG_2222.min.JPG', alt: 'Intérieur' },
  { src: '/images/photos/IMG_2223.min.JPG', alt: 'Intérieur' },
  { src: '/images/photos/IMG_2224.min.JPG', alt: 'Intérieur' },
  { src: '/images/photos/IMG_2225.min.JPG', alt: 'Intérieur' },
])

// Function to select an image and show it in the modal
const selectImage = (src: string) => {
  console.log('Selected image:', src)
  selectedImageSrc.value = src
  showImageModal.value = true
}

// Fonctions de débogage
const onImageLoad = (event: Event) => {
  const target = event.target as HTMLImageElement
  console.log('✅ Image chargée:', target.src)
  imagesLoaded.value.push(target.src)
  loading.value = false
}

const onImageError = (event: Event) => {
  const target = event.target as HTMLImageElement
  console.error('❌ Erreur image:', target.src)
  imageErrors.value.push(target.src)
  loading.value = false
}

// Masquer le debug après 10 secondes
setTimeout(() => {
  showDebug.value = false
}, 10000)

</script>

<style scoped lang="scss">
.rental-container {
  max-width: 1200px;
  margin: 0 auto;
}

.main-image {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.01);
  }
}

.thumbnail {
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;

  &:hover {
    transform: scale(1.05);
  }
}

.feature-list {
  list-style-type: none;
  padding-left: 0;

  li {
    padding: 8px 0;
    position: relative;
    padding-left: 24px;

    &:before {
      content: "•";
      color: rgb(var(--v-theme-primary));
      position: absolute;
      left: 0;
    }
  }
}

h2 {
  color: rgb(var(--v-theme-primary));
  font-weight: 600;
}

h3 {
  color: rgb(var(--v-theme-primary));
}

.enlarged-image {
  border-radius: 0;
  margin: 0 auto;
  max-height: 90vh;
  width: auto;
}

.image-modal-dialog {
  background: rgba(0, 0, 0, 0.2);
}

.image-modal-card {
  background: transparent;
  box-shadow: none;
  position: relative;
  overflow: visible;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  transition: background-color 0.2s;

  &:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
</style>