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

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

const spectacles = await fetchSpectacles();
const jeunePublic = spectacles.filter(s => s.category === 'jeune-public' && !s.retired);
const toutPublic = spectacles.filter(s => s.category === 'tout-public' && !s.retired);
const retraites = spectacles.filter(s => s.retired);
---

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

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <!-- Header -->
      <div class="animate-entrance text-center mb-16 md:mb-24">
        <h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">Nos <span class="text-dream-purple italic">Spectacles</span></h1>
        <p class="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
          Des bulles de poésie et d'humour pour s'évader, <br class="hidden sm:block" />apprendre et grandir ensemble.
        </p>
      </div>

      <!-- Jeune Public -->
      {jeunePublic.length > 0 && (
        <div class="mb-24 md:mb-40">
          <div class="text-center mb-12 md:mb-16">
            <h2 class="font-display text-3xl md:text-5xl text-night">Jeune Public</h2>
            <div class="w-16 h-1.5 bg-gradient-to-r from-dream-purple to-dream-blue mx-auto mt-4 rounded-full"></div>
          </div>
          <div class="space-y-24 md:space-y-40">
            {jeunePublic.map((spectacle, index) => (
              <div
                {...storyblokEditable(spectacle._blok)}
                class:list={[
                  'fade-up flex flex-col items-center gap-10 md:gap-16',
                  index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row',
                ]}
              >
                <!-- Image -->
                <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
                  <div class="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
                  <div class="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
                  <div class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
                    <img
                      src={spectacle.image}
                      alt={spectacle.title}
                      class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
                      referrerpolicy="no-referrer"
                    />
                    <div class="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  </div>
                </a>

                <!-- Content -->
                <div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
                  <div class="flex items-center justify-center md:justify-start gap-3">
                    <div class="h-px w-8 md:w-12 bg-dream-coral"></div>
                    <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
                  </div>
                  <h2 class="font-display text-4xl md:text-6xl text-night">{spectacle.title}</h2>
                  <div class="flex flex-wrap justify-center md:justify-start gap-3 md:gap-4">
                    <div class="flex items-center gap-2 bg-dream-blue/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold">
                      <Icon name="lucide:users" size={16} class="text-dream-blue" />
                      <span>{spectacle.age}</span>
                    </div>
                    {spectacle.duration && (
                      <div class="flex items-center gap-2 bg-dream-pink/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold">
                        <Icon name="lucide:clock" size={16} class="text-dream-pink" />
                        <span>{spectacle.duration}</span>
                      </div>
                    )}
                  </div>
                  {spectacle.summary && (
                    <p class="font-sans text-lg md:text-xl text-night/70 leading-relaxed whitespace-pre-line">{spectacle.summary}</p>
                  )}
                  <div class="pt-4 md:pt-8 flex flex-wrap justify-center md:justify-start gap-4 md:gap-6">
                    <a
                      href={`/spectacles/${spectacle.id}/`}
                      class="w-full sm:w-auto bg-night text-cloud px-8 py-4 md:px-10 md:py-4 rounded-full font-sans font-bold tracking-wide hover:bg-night/90 transition-all hover:scale-105 shadow-lg shadow-night/20 text-center"
                    >
                      Découvrir
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      <!-- Tout Public -->
      {toutPublic.length > 0 && (
        <div class="mb-24 md:mb-40">
          <div class="text-center mb-12 md:mb-16">
            <h2 class="font-display text-3xl md:text-5xl text-night">Tout Public</h2>
            <div class="w-16 h-1.5 bg-gradient-to-r from-dream-purple to-dream-blue mx-auto mt-4 rounded-full"></div>
          </div>
          <div class="space-y-24 md:space-y-40">
            {toutPublic.map((spectacle, index) => {
              const globalIndex = jeunePublic.length + index;
              return (
                <div
                  {...storyblokEditable(spectacle._blok)}
                  class:list={[
                    'fade-up flex flex-col items-center gap-10 md:gap-16',
                    globalIndex % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row',
                  ]}
                >
                  <!-- Image -->
                  <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
                    <div class="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
                    <div class="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
                    <div class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
                      <img
                        src={spectacle.image}
                        alt={spectacle.title}
                        class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
                        referrerpolicy="no-referrer"
                      />
                      <div class="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    </div>
                  </a>

                  <!-- Content -->
                  <div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
                    <div class="flex items-center justify-center md:justify-start gap-3">
                      <div class="h-px w-8 md:w-12 bg-dream-coral"></div>
                      <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
                    </div>
                    <h2 class="font-display text-4xl md:text-6xl text-night">{spectacle.title}</h2>
                    <div class="flex flex-wrap justify-center md:justify-start gap-3 md:gap-4">
                      <div class="flex items-center gap-2 bg-dream-blue/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold">
                        <Icon name="lucide:users" size={16} class="text-dream-blue" />
                        <span>{spectacle.age}</span>
                      </div>
                      {spectacle.duration && (
                        <div class="flex items-center gap-2 bg-dream-pink/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold">
                          <Icon name="lucide:clock" size={16} class="text-dream-pink" />
                          <span>{spectacle.duration}</span>
                        </div>
                      )}
                    </div>
                    {spectacle.summary && (
                      <p class="font-sans text-lg md:text-xl text-night/70 leading-relaxed">{spectacle.summary}</p>
                    )}
                    <div class="pt-4 md:pt-8 flex flex-wrap justify-center md:justify-start gap-4 md:gap-6">
                      <a
                        href={`/spectacles/${spectacle.id}/`}
                        class="w-full sm:w-auto bg-night text-cloud px-8 py-4 md:px-10 md:py-4 rounded-full font-sans font-bold tracking-wide hover:bg-night/90 transition-all hover:scale-105 shadow-lg shadow-night/20 text-center"
                      >
                        Découvrir
                      </a>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      <!-- Retraités -->
      {retraites.length > 0 && (
        <div class="mt-24 md:mt-40">
          <div class="text-center mb-12 md:mb-16">
            <h2 class="font-display text-2xl md:text-4xl text-night/40">Spectacles Retraités</h2>
            <div class="w-12 h-1 bg-night/10 mx-auto mt-4 rounded-full"></div>
          </div>
          <div class="space-y-16 md:space-y-24 opacity-60">
            {retraites.map((spectacle, index) => (
              <div
                {...storyblokEditable(spectacle._blok)}
                class:list={[
                  'fade-up flex flex-col items-center gap-10 md:gap-16',
                  index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row',
                ]}
              >
                <a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
                  <div class="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
                  <div class="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
                  <div class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
                    <img
                      src={spectacle.image}
                      alt={spectacle.title}
                      class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
                      referrerpolicy="no-referrer"
                    />
                    <div class="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  </div>
                </a>
                <div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
                  <div class="flex items-center justify-center md:justify-start gap-3">
                    <div class="h-px w-8 md:w-12 bg-dream-coral"></div>
                    <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
                  </div>
                  <h2 class="font-display text-4xl md:text-6xl text-night">{spectacle.title}</h2>
                  <div class="flex flex-wrap justify-center md:justify-start gap-3 md:gap-4">
                    <div class="flex items-center gap-2 bg-dream-blue/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold">
                      <Icon name="lucide:users" size={16} class="text-dream-blue" />
                      <span>{spectacle.age}</span>
                    </div>
                  </div>
                  {spectacle.summary && (
                    <p class="font-sans text-lg md:text-xl text-night/70 leading-relaxed whitespace-pre-line">{spectacle.summary}</p>
                  )}
                  <div class="pt-4 md:pt-8 flex flex-wrap justify-center md:justify-start gap-4 md:gap-6">
                    <a
                      href={`/spectacles/${spectacle.id}/`}
                      class="w-full sm:w-auto bg-night text-cloud px-8 py-4 md:px-10 md:py-4 rounded-full font-sans font-bold tracking-wide hover:bg-night/90 transition-all hover:scale-105 shadow-lg shadow-night/20 text-center"
                    >
                      Découvrir
                    </a>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>

  </div>
</Layout>