{% extends "layouts/base.html" %}
{% load static %}

{% block title %}Accueil - {{ site_config.name|default:"Golden Night Awards" }}{% endblock %}

{% block extra_head %}
<!-- Google Fonts & base styles -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  /* ----- Animations & Effets Golden Night ----- */
  @keyframes floatParticle {
    0% { transform: translateY(0px) scale(1); opacity: 0.2; }
    50% { transform: translateY(-35px) scale(1.15); opacity: 0.5; }
    100% { transform: translateY(0px) scale(1); opacity: 0.2; }
  }
  
  @keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes softGlow {
    0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.1); }
    50% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }
    100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.1); }
  }

  @keyframes pulseEmerald {
    0%, 100% { opacity: 1; background-color: #059669; box-shadow: 0 0 5px #10b981; }
    50% { opacity: 0.7; background-color: #047857; box-shadow: 0 0 12px #34d399; }
  }
  
  .hero-gold-overlay {
    background: radial-gradient(circle at 30% 40%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 240, 150, 0.06) 0%, transparent 60%);
  }
  
  .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 215, 0, 0.45);
    border-radius: 50%;
    filter: blur(2.5px);
    animation: floatParticle 9s infinite ease-in-out;
  }
  
  .event-card {
    background: linear-gradient(145deg, #0c0c0e 0%, #141416 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    animation: fadeInUp 0.7s forwards;
    opacity: 0; /* starting state for animation */
    box-shadow: 0 15px 25px -8px rgba(0, 0, 0, 0.8);
  }
  
  .event-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(255, 215, 0, 0.8);
    box-shadow: 0 30px 40px -12px #000000, 0 0 25px rgba(212, 175, 55, 0.35);
  }
  
  .badge-open {
    background: linear-gradient(145deg, #0B3B2A 0%, #1A4D3A 100%);
    border-left: 5px solid #D4AF37;
    color: #E2F2E9;
  }
  
  .badge-upcoming {
    background: #1C1C2A;
    border-left: 5px solid #B8860B;
    color: #E8D5A8;
  }
  
  .badge-closed {
    background: #121826;
    border-left: 5px solid #9CA3AF;
    color: #D1D5DB;
  }
  
  .logo-ring {
    border: 2.5px solid #D4AF37;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
  }
  
  .empty-curtain {
    background: rgba(10, 10, 12, 0.8);
    backdrop-filter: blur(12px);
    border: 1px dashed #D4AF37;
  }
  
  .button-glow {
    transition: all 0.3s;
  }
  .event-card:hover .button-glow {
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.15), rgba(184, 134, 11, 0.05));
  }

  /* clamp fonts */
  .title-clamp {
    font-size: clamp(2.2rem, 8vw, 4.5rem);
  }
</style>
{% endblock %}

{% block content %}
<div class="relative min-h-screen bg-[#050505] text-gray-100 font-['Montserrat']" style="font-family: 'Montserrat', sans-serif;">
  
  <!-- Particules d'or flottantes (effet visuel) -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="particle" style="top: 12%; left: 6%; animation-delay: 0s;"></div>
    <div class="particle" style="top: 40%; left: 88%; animation-delay: 2.2s; width: 8px; height: 8px;"></div>
    <div class="particle" style="top: 68%; left: 18%; animation-delay: 1.4s; opacity: 0.35;"></div>
    <div class="particle" style="top: 82%; left: 70%; animation-delay: 3.5s; width: 11px; height: 11px;"></div>
    <div class="particle" style="top: 22%; left: 50%; animation-delay: 5.1s; opacity: 0.3;"></div>
    <div class="particle" style="top: 60%; left: 78%; animation-delay: 6.7s; width: 5px; height: 5px;"></div>
    <div class="particle" style="top: 75%; left: 35%; animation-delay: 7.9s; width: 7px; height: 7px;"></div>
  </div>

  <!-- Hero Section Majestic -->
  <section class="relative pt-24 pb-16 md:pt-32 md:pb-24 px-4 hero-gold-overlay">
    <div class="max-w-5xl mx-auto text-center">
      <h1 class="font-['Cinzel'] title-clamp font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-200 drop-shadow-[0_6px_15px_rgba(212,175,55,0.4)] mb-6 leading-tight">
        Célébrons l'Excellence Universitaire
      </h1>
      <p class="text-lg md:text-xl text-gray-300/90 font-light max-w-3xl mx-auto leading-relaxed tracking-wide px-2">
        Découvrez les nommés et faites entendre votre voix pour les leaders de demain.
      </p>
      <div class="mt-10 w-28 h-[2.5px] bg-gradient-to-r from-transparent via-amber-400 to-transparent mx-auto"></div>
    </div>
  </section>

  <!-- Grille d'Événements -->
  <section class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-28">
    {% if events %}
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
        {% for event in events %}
          {% if now < event.date_debut %}
            {% with status="upcoming" %}
              {# Carte événement (upcoming) #}
              <div class="event-card rounded-2xl overflow-hidden flex flex-col h-full" style="animation-fill-mode: forwards;">
                <!-- Header avec logo -->
                <div class="relative pt-8 pb-4 px-6 flex justify-center bg-gradient-to-b from-black/40 to-transparent">
                  <div class="w-28 h-28 md:w-32 md:h-32 rounded-full logo-ring p-1 bg-[#1A1A1A] shadow-xl">
                    {% if event.logo %}
                      <img src="{{ event.logo.url }}" alt="{{ event.titre }}" class="w-full h-full object-cover rounded-full">
                    {% else %}
                      <div class="w-full h-full rounded-full bg-gradient-to-br from-amber-800/40 to-stone-900 flex items-center justify-center">
                        <span class="text-4xl font-['Cinzel'] text-amber-400/70">{{ event.titre|slice:":1"|upper }}</span>
                      </div>
                    {% endif %}
                  </div>
                </div>
                <!-- Corps -->
                <div class="px-6 pb-5 flex-1 flex flex-col">
                  <h3 class="font-['Cinzel'] text-xl md:text-2xl font-semibold text-white mb-3 tracking-wide leading-tight">
                    {{ event.titre }}
                  </h3>
                  <p class="text-gray-400 text-sm mb-4 line-clamp-3 min-h-[4.5rem]">
                    {{ event.description|truncatewords:25|default:"Un événement prestigieux célébrant les talents exceptionnels." }}
                  </p>
                  <div class="mt-auto space-y-1 text-xs font-medium">
                    <div class="flex items-center text-gray-400">
                      <svg class="w-4 h-4 mr-2 text-amber-500/80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                      <span>Ouverture : <time datetime="{{ event.date_debut|date:'c' }}">{{ event.date_debut|date:"d M Y, H:i" }}</time></span>
                    </div>
                    <div class="flex items-center text-gray-400">
                      <svg class="w-4 h-4 mr-2 text-amber-500/80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                      <span>Clôture : <time datetime="{{ event.date_fin|date:'c' }}">{{ event.date_fin|date:"d M Y, H:i" }}</time></span>
                    </div>
                  </div>
                  <div class="mt-5">
                    <div class="badge-upcoming py-2 px-4 rounded-r-full -ml-6 inline-flex items-center text-sm font-semibold tracking-wider shadow-md">
                      <span class="w-2 h-2 rounded-full bg-amber-300/70 mr-2"></span>
                      BIENTÔT DISPONIBLE
                    </div>
                  </div>
                </div>
                <div class="px-6 pb-6 pt-2">
                  <a href="{% url 'awards_vitrine:event_detail' event.id %}" 
                     class="button-glow block w-full text-center py-3 bg-gradient-to-r from-amber-700/20 to-amber-800/10 border border-amber-500/40 hover:border-amber-400 rounded-lg font-medium tracking-wider text-amber-200 hover:text-amber-100 transition-all duration-300 text-sm uppercase">
                    Prévisualiser <span class="inline-block ml-2 transition-transform">→</span>
                  </a>
                </div>
              </div>
            {% endwith %}
          {% elif now <= event.date_fin %}
            {% with status="open" %}
              <div class="event-card rounded-2xl overflow-hidden flex flex-col h-full" style="animation-fill-mode: forwards;">
                <div class="relative pt-8 pb-4 px-6 flex justify-center bg-gradient-to-b from-black/40 to-transparent">
                  <div class="w-28 h-28 md:w-32 md:h-32 rounded-full logo-ring p-1 bg-[#1A1A1A] shadow-xl">
                    {% if event.logo %}
                      <img src="{{ event.logo.url }}" alt="{{ event.titre }}" class="w-full h-full object-cover rounded-full">
                    {% else %}
                      <div class="w-full h-full rounded-full bg-gradient-to-br from-amber-800/40 to-stone-900 flex items-center justify-center">
                        <span class="text-4xl font-['Cinzel'] text-amber-400/70">{{ event.titre|slice:":1"|upper }}</span>
                      </div>
                    {% endif %}
                  </div>
                </div>
                <div class="px-6 pb-5 flex-1 flex flex-col">
                  <h3 class="font-['Cinzel'] text-xl md:text-2xl font-semibold text-white mb-3 tracking-wide leading-tight">
                    {{ event.titre }}
                  </h3>
                  <p class="text-gray-400 text-sm mb-4 line-clamp-3 min-h-[4.5rem]">
                    {{ event.description|truncatewords:25|default:"Un événement prestigieux célébrant les talents exceptionnels." }}
                  </p>
                  <div class="mt-auto space-y-1 text-xs font-medium">
                    <div class="flex items-center text-gray-400">
                      <svg class="w-4 h-4 mr-2 text-amber-500/80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                      <span>Ouverture : <time datetime="{{ event.date_debut|date:'c' }}">{{ event.date_debut|date:"d M Y, H:i" }}</time></span>
                    </div>
                    <div class="flex items-center text-gray-400">
                      <svg class="w-4 h-4 mr-2 text-amber-500/80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                      <span>Clôture : <time datetime="{{ event.date_fin|date:'c' }}">{{ event.date_fin|date:"d M Y, H:i" }}</time></span>
                    </div>
                  </div>
                  <div class="mt-5">
                    <div class="badge-open py-2 px-4 rounded-r-full -ml-6 inline-flex items-center text-sm font-semibold tracking-wider shadow-md">
                      <span class="w-2.5 h-2.5 rounded-full mr-2" style="animation: pulseEmerald 1.8s infinite;"></span>
                      SÉANCE DE VOTE OUVERTE
                    </div>
                  </div>
                </div>
                <div class="px-6 pb-6 pt-2">
                  <a href="{% url 'awards_vitrine:event_detail' event.id %}" 
                     class="button-glow block w-full text-center py-3 bg-gradient-to-r from-amber-700/20 to-amber-800/10 border border-amber-500/40 hover:border-amber-400 rounded-lg font-medium tracking-wider text-amber-200 hover:text-amber-100 transition-all duration-300 text-sm uppercase">
                    Voter maintenant <span class="inline-block ml-2 transition-transform">→</span>
                  </a>
                </div>
              </div>
            {% endwith %}
          {% else %}
            {% with status="closed" %}
              <div class="event-card rounded-2xl overflow-hidden flex flex-col h-full" style="animation-fill-mode: forwards;">
                <div class="relative pt-8 pb-4 px-6 flex justify-center bg-gradient-to-b from-black/40 to-transparent">
                  <div class="w-28 h-28 md:w-32 md:h-32 rounded-full logo-ring p-1 bg-[#1A1A1A] shadow-xl">
                    {% if event.logo %}
                      <img src="{{ event.logo.url }}" alt="{{ event.titre }}" class="w-full h-full object-cover rounded-full">
                    {% else %}
                      <div class="w-full h-full rounded-full bg-gradient-to-br from-amber-800/40 to-stone-900 flex items-center justify-center">
                        <span class="text-4xl font-['Cinzel'] text-amber-400/70">{{ event.titre|slice:":1"|upper }}</span>
                      </div>
                    {% endif %}
                  </div>
                </div>
                <div class="px-6 pb-5 flex-1 flex flex-col">
                  <h3 class="font-['Cinzel'] text-xl md:text-2xl font-semibold text-white mb-3 tracking-wide leading-tight">
                    {{ event.titre }}
                  </h3>
                  <p class="text-gray-400 text-sm mb-4 line-clamp-3 min-h-[4.5rem]">
                    {{ event.description|truncatewords:25|default:"Un événement prestigieux célébrant les talents exceptionnels." }}
                  </p>
                  <div class="mt-auto space-y-1 text-xs font-medium">
                    <div class="flex items-center text-gray-400">
                      <svg class="w-4 h-4 mr-2 text-amber-500/80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                      <span>Ouverture : <time datetime="{{ event.date_debut|date:'c' }}">{{ event.date_debut|date:"d M Y, H:i" }}</time></span>
                    </div>
                    <div class="flex items-center text-gray-400">
                      <svg class="w-4 h-4 mr-2 text-amber-500/80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                      <span>Clôture : <time datetime="{{ event.date_fin|date:'c' }}">{{ event.date_fin|date:"d M Y, H:i" }}</time></span>
                    </div>
                  </div>
                  <div class="mt-5">
                    <div class="badge-closed py-2 px-4 rounded-r-full -ml-6 inline-flex items-center text-sm font-semibold tracking-wider shadow-md">
                      <span class="w-2 h-2 rounded-full bg-blue-300/60 mr-2"></span>
                      RÉSULTATS DISPONIBLES
                    </div>
                  </div>
                </div>
                <div class="px-6 pb-6 pt-2">
                  <a href="{% url 'awards_vitrine:results' event.id %}" 
                     class="button-glow block w-full text-center py-3 bg-gradient-to-r from-gray-700/20 to-gray-800/10 border border-gray-500/40 hover:border-gray-400 rounded-lg font-medium tracking-wider text-gray-300 hover:text-gray-100 transition-all duration-300 text-sm uppercase">
                    Voir les résultats <span class="inline-block ml-2 transition-transform">→</span>
                  </a>
                </div>
              </div>
            {% endwith %}
          {% endif %}
        {% endfor %}
      </div>
    {% else %}
      <!-- État vide -->
      <div class="empty-curtain rounded-2xl p-12 md:p-16 text-center max-w-2xl mx-auto">
        <div class="text-6xl mb-6">🎭</div>
        <h3 class="font-['Cinzel'] text-2xl md:text-3xl text-amber-200/80 mb-3">Le rideau est levé</h3>
        <p class="text-gray-400 text-lg">Mais aucun scrutin n'est ouvert pour l'instant.<br>Revenez bientôt pour célébrer l'excellence.</p>
        <div class="mt-8 w-16 h-[1px] bg-amber-600/50 mx-auto"></div>
      </div>
    {% endif %}
  </section>
</div>

<!-- Script pour les délais d'animation stagger (micro‑interaction) -->
<script>
  (function() {
    const cards = document.querySelectorAll('.event-card');
    cards.forEach((card, index) => {
      const delay = index * 100; // 100ms stagger
      card.style.animationDelay = `${delay}ms`;
    });
  })();
</script>
{% endblock content %}