{% extends "base.html" %}
{% load static %}
{% load humanize %}

{% block content %}
<div class="container my-5">

  <!-- Section 1 : Hero avec design moderne -->
  <section class="hero-section mb-5">
    <div class="hero-background"></div>
    <div class="hero-particles"></div>
    <div class="row align-items-center hero-content">
      <div class="col-md-6 text-center mb-4 mb-md-0">
        <a href="{% url 'restau:index' %}" class="logo-link">
          <div class="logo-container">
            <img src="{% static 'img/logo_sylla.jpg' %}" class="modern-logo" alt="Logo Sylla PLUS" loading="lazy">
            <div class="logo-glow"></div>
            <div class="logo-shine"></div>
          </div>
        </a>
      </div>
      <div class="col-md-6 ps-md-5">
        <div class="hero-text-container">
          <h1 class="hero-title mb-3">
            <span class="brand-highlight">Sylla <strong>PLUS</strong></span>
            <span class="subtitle">Restaurant & Traiteur</span>
          </h1>
          <p class="hero-text">
            Chez <strong>Sylla PLUS</strong>, nous vous offrons une <em>expérience culinaire unique</em>, entre tradition ivoirienne et modernité. 
            Nos plats sont préparés avec soin, à base d'ingrédients frais, pour satisfaire les fins gourmets comme les amateurs 
            de cuisine africaine authentique.
          </p>
          <div class="features-grid">
            <div class="feature-item">
              <div class="feature-icon">
                <i class="bi bi-truck"></i>
              </div>
              <span>Livraison rapide à Abidjan</span>
            </div>
            <div class="feature-item">
              <div class="feature-icon">
                <i class="bi bi-shop"></i>
              </div>
              <span>Cuisine 100% fraîche et locale</span>
            </div>
            <div class="feature-item">
              <div class="feature-icon">
                <i class="bi bi-headset"></i>
              </div>
              <span>Service client 7j/7</span>
            </div>
          </div>
          <div class="hero-actions mt-4">
            <a href="{% url 'restau:menu' %}" class="btn btn-primary me-2">
              <i class="bi bi-book me-1"></i> Voir le menu
            </a>
            <a href="#plats-jour" class="btn btn-outline-primary">
              <i class="bi bi-fire me-1"></i> Plats du jour
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section 2 : Carrousel des plats du jour -->
  <section id="plats-jour" class="mb-5">
    <div class="section-header mb-4">
      <div class="section-icon">
        <i class="bi bi-fire"></i>
      </div>
      <h2 class="section-title">Plats du jour</h2>
      <p class="section-subtitle">Découvrez nos spécialités du moment</p>
    </div>
    
    {% if plats_jour %}
    <div class="modern-carousel">
      <div class="carousel-track">
        {% for plat in plats_jour %}
          <div class="carousel-card">
            <div class="card-image">
              {% if plat.image %}
                <img src="{{ plat.image.url }}" alt="{{ plat.nom }}" loading="lazy">
              {% else %}
                <img src="{% static 'img/default-plat.jpg' %}" alt="Plat du jour" loading="lazy">
              {% endif %}
              <div class="card-badge">Du jour</div>
              <div class="card-overlay">
                <a href="{% url 'restau:ajouter' plat.id %}" class="btn btn-primary">
                  <i class="bi bi-plus-circle me-1"></i> Ajouter au panier
                </a>
              </div>
            </div>
            <div class="card-content">
              <h3 class="plat-title">{{ plat.nom }}</h3>
              <p class="plat-description">{{ plat.description|truncatewords:15 }}</p>
              <div class="card-footer">
                <p class="plat-price" style="font-size: 20px;">{{ plat.prix|intcomma }} FCFA</p>
                <div class="plat-actions">
                  <a href="{% url 'restau:ajouter' plat.id %}" class="btn btn-sm btn-primary" style="font-size: 12px; font-weight: bold;">
                    Commander
                  </a>
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
      <div class="carousel-nav">
        <button class="carousel-prev" aria-label="Précédent">
          <i class="bi bi-chevron-left"></i>
        </button>
        <button class="carousel-next" aria-label="Suivant">
          <i class="bi bi-chevron-right"></i>
        </button>
      </div>
    </div>
    {% else %}
      <div class="empty-state">
        <i class="bi bi-emoji-frown"></i>
        <p>Aucun plat du jour disponible actuellement.</p>
      </div>
    {% endif %}
  </section>


  <!-- Section 4 : QR Code -->
  <section class="qr-section">
    <div class="section-header mb-4">
      <div class="section-icon">
        <i class="bi bi-phone"></i>
      </div>
      <h2 class="section-title">Menu Digital</h2>
      <p class="section-subtitle">Scannez pour accéder à notre menu complet</p>
    </div>
    
    <div class="qr-container">
      <div class="qr-card">
        <div class="qr-image">
          <a href="{% url 'restau:menu' %}">
            <img src="{% static 'img/frame.png' %}" alt="QR Code du menu Sylla PLUS" loading="lazy">
            <div class="qr-hover-effect">
              <i class="bi bi-arrow-up-right"></i>
            </div>
          </a>
        </div>
        <div class="qr-content">
          <h3>Accédez à notre menu en ligne</h3>
          <p>Scannez ce QR code avec votre smartphone pour consulter notre menu complet, disponible 24h/24.</p>
          <div class="qr-actions">
            <a href="{% url 'restau:menu' %}" class="btn btn-outline-primary">
              <i class="bi bi-phone me-1"></i> Voir le menu
            </a>
            <div class="qr-apps">
              <span>Scanner avec:</span>
              <div class="app-icons">
                <i class="bi bi-camera"></i>
                <i class="bi bi-qr-code-scan"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</div>
{% endblock %}

{% block extra_styles %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet">
<style>
:root {
  --primary-color: #e41b1b;
  --primary-dark: #c01717;
  --primary-light: #fdf2f2;
  --secondary-color: #f8f9fa;
  --text-color: #333;
  --text-light: #6c757d;
  --border-radius: 20px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.12);
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --gradient: linear-gradient(135deg, #e41b1b 0%, #ff6b6b 100%);
  --gradient-light: linear-gradient(135deg, rgba(228,27,27,0.1) 0%, rgba(255,107,107,0.1) 100%);
}

/* Section Hero améliorée */
.hero-section {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--border-radius);
  margin-bottom: 5rem;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(228,27,27,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.5;
}

.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(228, 27, 27, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(228, 27, 27, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 40% 80%, rgba(228, 27, 27, 0.1) 0%, transparent 20%);
  animation: float 20s infinite linear;
}

@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-20px) rotate(360deg); }
}

.hero-content {
  position: relative;
  z-index: 2;
}

.logo-container {
  position: relative;
  display: inline-block;
}

.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: var(--gradient);
  border-radius: 50%;
  filter: blur(25px);
  opacity: 0.3;
  z-index: -1;
  animation: pulse 3s infinite alternate;
}

.logo-shine {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%);
  border-radius: var(--border-radius);
  z-index: 1;
  pointer-events: none;
}

@keyframes pulse {
  0% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.05); }
}

.modern-logo {
  width: 300px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.logo-link:hover .modern-logo {
  transform: translateY(-8px) scale(1.03);
  box-shadow: var(--shadow-hover);
}

.hero-text-container {
  background: rgba(255, 255, 255, 0.85);
  padding: 2.5rem;
  border-radius: var(--border-radius);
  backdrop-filter: blur(15px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.brand-highlight {
  display: block;
  line-height: 1.1;
}

.subtitle {
  font-size: 1.4rem;
  color: var(--text-light);
  font-weight: 400;
  display: block;
  margin-top: 0.5rem;
}

.hero-text {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-color);
  margin-bottom: 1.5rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 12px;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(228, 27, 27, 0.1);
}

.feature-item:hover {
  background: white;
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(228, 27, 27, 0.2);
}

.feature-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 1.3rem;
  transition: var(--transition);
}

.feature-item:hover .feature-icon {
  background: var(--gradient);
  color: white;
  transform: rotate(10deg) scale(1.1);
}

.hero-actions .btn {
  padding: 0.85rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient);
  border: none;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--gradient);
  border-color: transparent;
  color: white;
  transform: translateY(-3px);
}

/* Section Headers améliorés */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}

.section-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--primary-color);
  font-size: 2rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.section-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient);
  opacity: 0;
  transition: var(--transition);
}

.section-icon:hover::before {
  opacity: 1;
}

.section-icon:hover {
  color: white;
  transform: translateY(-5px) rotate(5deg);
}

.section-icon i {
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-color);
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--gradient);
  border-radius: 3px;
}

.section-subtitle {
  color: var(--text-light);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 1rem auto 0;
}

/* Modern Carousel amélioré */
.modern-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  min-width: 320px;
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  position: relative;
  transform-style: preserve-3d;
}

.carousel-card:hover {
  transform: translateY(-10px) rotateX(5deg);
  box-shadow: var(--shadow-hover);
}

.card-image {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.carousel-card:hover .card-image img {
  transform: scale(1.1);
}

.card-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--gradient);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
}

.carousel-card:hover .card-overlay {
  opacity: 1;
}

.card-content {
  padding: 1.8rem;
}

.plat-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.plat-description {
  color: var(--text-light);
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plat-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
}

.plat-actions .btn {
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
}

.carousel-prev, .carousel-next {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  border: none;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: var(--transition);
  color: var(--primary-color);
  font-size: 1.2rem;
}

.carousel-prev:hover, .carousel-next:hover {
  background: var(--primary-color);
  color: white;
  transform: scale(1.1);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-light);
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.empty-state i {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
  opacity: 0.5;
}

/* Gallery améliorée */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.8rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
}

.gallery-item:hover {
  transform: translateY(-8px) rotateX(5deg);
  box-shadow: var(--shadow-hover);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  color: white;
  font-size: 2.5rem;
  transform: scale(0.8);
  transition: var(--transition);
}

.gallery-item:hover .gallery-overlay i {
  transform: scale(1);
}

/* Video Items */
.video-item .video-thumbnail {
  position: relative;
  cursor: pointer;
  height: 100%;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--primary-color);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  transition: var(--transition);
  opacity: 0.9;
  box-shadow: var(--shadow);
}

.video-play-btn:hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--primary-dark);
}

/* QR Section améliorée */
.qr-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 5rem 1rem;
  border-radius: var(--border-radius);
  margin-top: 5rem;
  position: relative;
  overflow: hidden;
}

.qr-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"><defs><pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="1" fill="rgba(228,27,27,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
  opacity: 0.5;
}

.qr-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.qr-card {
  display: flex;
  align-items: center;
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  transform-style: preserve-3d;
}

.qr-card:hover {
  transform: translateY(-8px) rotateX(5deg);
  box-shadow: var(--shadow-hover);
}

.qr-image {
  flex: 0 0 280px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.qr-image img {
  width: 100%;
  border-radius: 12px;
  transition: var(--transition);
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}

.qr-hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.5rem;
  transition: var(--transition);
  z-index: 3;
  border-radius: 12px;
}

.qr-image:hover .qr-hover-effect {
  opacity: 0.9;
}

.qr-image:hover img {
  transform: scale(1.05);
}

.qr-content {
  flex: 1;
  padding: 2.5rem;
}

.qr-content h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.qr-content p {
  color: var(--text-light);
  margin-bottom: 2rem;
  line-height: 1.6;
  font-size: 1.05rem;
}

.qr-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.qr-apps {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-light);
  font-size: 0.95rem;
}

.app-icons {
  display: flex;
  gap: 0.8rem;
}

.app-icons i {
  font-size: 1.3rem;
  transition: var(--transition);
}

.app-icons i:hover {
  color: var(--primary-color);
  transform: translateY(-3px);
}

/* Modal Styles */
.modal-content {
  border: none;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}

.modal-header {
  border-bottom: 1px solid #dee2e6;
  padding: 1.2rem 1.8rem;
  background: var(--primary-light);
}

.modal-title {
  font-weight: 600;
  color: var(--primary-color);
}

/* Animations au défilement */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design amélioré */
@media (max-width: 992px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .qr-card {
    flex-direction: column;
    text-align: center;
  }
  
  .qr-image {
    flex: 0 0 auto;
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 3rem 0;
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-text-container {
    padding: 2rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .carousel-card {
    min-width: 280px;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  
  .qr-actions {
    justify-content: center;
  }
  
  .carousel-nav {
    display: none;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .section-icon {
    width: 70px;
    height: 70px;
    font-size: 1.8rem;
  }
}

@media (max-width: 576px) {
  .hero-section {
    padding: 2rem 0;
  }
  
  .modern-logo {
    width: 220px;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .section-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}
</style>
{% endblock %}

{% block extra_scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
<script>
  // Configuration Lightbox
  lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true,
    'imageFadeDuration': 300,
    'positionFromTop': 100
  });

  // Navigation du carrousel
  document.addEventListener('DOMContentLoaded', function() {
    const track = document.querySelector('.carousel-track');
    const prevBtn = document.querySelector('.carousel-prev');
    const nextBtn = document.querySelector('.carousel-next');
    
    if (prevBtn && nextBtn && track) {
      const cardWidth = document.querySelector('.carousel-card').offsetWidth + 24; // 24px pour le gap
      
      prevBtn.addEventListener('click', () => {
        track.scrollBy({ left: -cardWidth * 2, behavior: 'smooth' });
      });
      
      nextBtn.addEventListener('click', () => {
        track.scrollBy({ left: cardWidth * 2, behavior: 'smooth' });
      });
    }

    // Initialisation Bootstrap pour les modals
    const videoModal = document.getElementById('videoModal');
    if (videoModal) {
      const bsModal = new bootstrap.Modal(videoModal);
      
      // Détection des erreurs de chargement vidéo
      const videoElement = document.getElementById('local-video');
      if (videoElement) {
        videoElement.addEventListener('error', function(e) {
          console.error('Erreur de chargement de la vidéo:', e);
          // Afficher un message d'erreur
          videoElement.innerHTML = '<p style="color: white; text-align: center; padding: 2rem;">Erreur de chargement de la vidéo. Vérifiez le chemin du fichier.</p>';
        });
        
        videoElement.addEventListener('loadeddata', function() {
          console.log('Vidéo chargée avec succès');
        });
      }
    }

    // Nettoyer la vidéo à la fermeture
    if (videoModal) {
      videoModal.addEventListener('hidden.bs.modal', () => {
        const vid = document.getElementById('local-video');
        if (vid) {
          vid.pause(); 
          vid.currentTime = 0;
        }
      });
    }

    // Animation au défilement
    const observerOptions = {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, observerOptions);

    // Observer les sections pour l'animation
    document.querySelectorAll('section').forEach(section => {
      observer.observe(section);
    });
  });
</script>
{% endblock %}