aspireves.org/src/pages/agenda/index.astro

---
import Layout from '../../layouts/Layout.astro';
import { Icon } from 'astro-icon/components';
import { fetchSpectacles, fetchAgenda } from '../../lib/storyblok';

const [spectacles, agenda] = await Promise.all([fetchSpectacles(), fetchAgenda()]);

const sortedAgenda = [...agenda].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
const now = new Date();
---

<Layout title="Agenda — Compagnie AspiRêves">
  <div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
    <!-- Background -->
    <div class="absolute top-1/2 left-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[120px] -translate-x-1/2"></div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <!-- Header -->
      <div class="animate-entrance text-center mb-12 md:mb-20">
        <h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">L'<span class="text-dream-coral italic">Agenda</span></h1>
        <p class="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
          Venez nous voir sur scène ! <br class="hidden sm:block" />Chaque date est une nouvelle aventure.
        </p>
      </div>

      <div class="space-y-6 md:space-y-10">
        {sortedAgenda.map((event, index) => {
          const spectacle = spectacles.find(s => s.id === event.spectacleId);
          const dateObj = new Date(event.date);
          const isPast = dateObj < now;

          return (
            <div
              class:list={[
                'fade-up group relative flex flex-col md:flex-row md:items-center gap-5 md:gap-8 p-5 md:p-6 rounded-[28px] md:rounded-[32px] border transition-all overflow-hidden',
                isPast
                  ? 'opacity-40 grayscale bg-night/5 border-transparent'
                  : 'bg-white border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 hover:scale-[1.01]',
              ]}
              style={`transition-delay: ${index * 0.1}s`}
            >
              <!-- Date -->
              <div class="flex-shrink-0 flex flex-col items-center justify-center w-16 h-24 md:w-20 md:h-28 rounded-xl md:rounded-2xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg">
                <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80">
                  {dateObj.toLocaleString('fr-FR', { month: 'short' })}
                </span>
                <span class="font-display text-3xl md:text-4xl leading-none">
                  {dateObj.getDate()}
                </span>
                <span class="font-sans text-[10px] md:text-xs font-bold opacity-60">
                  {dateObj.getFullYear()}
                </span>
              </div>

              <!-- Info Block -->
              <div class="flex-grow flex flex-col justify-center space-y-1.5 md:space-y-2">
                <div class="flex items-center gap-2">
                  {isPast && <span class="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>}
                </div>
                <h3 class="font-display text-xl md:text-3xl text-night leading-tight">{spectacle?.title}</h3>
                <div class="flex items-center gap-2 text-night/50 font-sans font-bold text-[10px] md:text-sm uppercase tracking-widest">
                  <Icon name="lucide:map-pin" size={14} class="text-dream-blue" />
                  <span>{event.location}</span>
                </div>
              </div>

              <!-- Action Block -->
              <div class="flex-shrink-0 flex items-center">
                {event.bookingLink ? (
                  <a
                    href={event.bookingLink}
                    target="_blank"
                    rel="noreferrer"
                    class="w-full md:w-auto flex items-center justify-center gap-3 bg-night text-cloud px-6 py-3 md:px-8 md:py-4 rounded-full font-sans font-bold text-sm uppercase tracking-widest hover:bg-night/80 transition-all hover:scale-105 shadow-lg shadow-night/20"
                  >
                    <Icon name="lucide:ticket" size={18} />
                    Réserver
                  </a>
                ) : (
                  <div class="w-full md:w-auto flex items-center justify-center gap-2 border-2 border-dashed border-night/10 text-night/30 px-6 py-3 md:px-8 md:py-4 rounded-full font-sans text-sm font-bold uppercase tracking-widest italic">
                    <Icon name="lucide:info" size={16} />
                    Sur place
                  </div>
                )}
              </div>

              <!-- Affiche -->
              {spectacle?.affiche && (
                <a href={`/spectacles/${spectacle.id}`} class="flex-shrink-0 order-first md:order-last">
                  <img
                    src={`${spectacle.affiche}/m/0x200`}
                    alt={`Affiche ${spectacle.title}`}
                    class="w-16 h-24 md:w-20 md:h-28 rounded-xl md:rounded-2xl shadow-md object-cover"
                    loading="lazy"
                  />
                </a>
              )}
            </div>
          );
        })}
      </div>

      {sortedAgenda.length === 0 && (
        <div class="text-center py-32 bg-white/50 rounded-[60px] border-4 border-dashed border-dream-blue/20">
          <p class="font-display text-3xl text-night/30 italic">Le nuage se prépare pour de nouveaux voyages...</p>
        </div>
      )}
    </div>
  </div>
</Layout>