---
import Layout from '../layouts/Layout.astro';
import { Icon } from 'astro-icon/components';
import { companyInfo } from '../data';
---

<Layout title="Ateliers Théâtre — Compagnie AspiRêves">
  <div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
    <!-- Background -->
    <div class="absolute top-1/4 right-0 w-[500px] h-[500px] bg-dream-pink/20 rounded-full filter blur-[120px] 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">
        <div class="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
          <Icon name="lucide:sparkles" size={16} />
          <span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Partage & Transmission</span>
        </div>
        <h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8 leading-tight">Ateliers <span class="text-dream-purple italic">Théâtre</span></h1>
        <p class="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
          La Compagnie AspiRêves propose des ateliers pour petits et grands, pour que vous aussi vous voliez sur votre petit nuage.
        </p>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16">
        <!-- Enfants & Ados -->
        <div class="fade-up bg-white p-8 md:p-12 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5">
          <div class="w-14 h-14 rounded-2xl bg-dream-purple/20 flex items-center justify-center text-dream-purple mb-8">
            <Icon name="lucide:users" size={28} />
          </div>
          <h2 class="font-display text-3xl md:text-4xl text-night mb-4">Enfants & Ados</h2>
          <p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Jeu, expression & créativité</p>
          <ul class="space-y-4 font-sans text-night/70 text-lg leading-relaxed">
            <li class="flex items-start gap-3">
              <span class="w-2 h-2 rounded-full bg-dream-purple mt-2.5 flex-shrink-0"></span>
              Développement de l'imagination
            </li>
            <li class="flex items-start gap-3">
              <span class="w-2 h-2 rounded-full bg-dream-purple mt-2.5 flex-shrink-0"></span>
              Expression corporelle et vocale
            </li>
            <li class="flex items-start gap-3">
              <span class="w-2 h-2 rounded-full bg-dream-purple mt-2.5 flex-shrink-0"></span>
              Confiance en soi et écoute
            </li>
            <li class="flex items-start gap-3">
              <span class="w-2 h-2 rounded-full bg-dream-purple mt-2.5 flex-shrink-0"></span>
              Jeux d'improvisation
            </li>
          </ul>
        </div>

        <!-- Adultes -->
        <div class="fade-up bg-white p-8 md:p-12 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5" style="transition-delay: 0.2s">
          <div class="w-14 h-14 rounded-2xl bg-dream-coral/20 flex items-center justify-center text-dream-coral mb-8">
            <Icon name="lucide:drama" size={28} />
          </div>
          <h2 class="font-display text-3xl md:text-4xl text-night mb-4">Adultes</h2>
          <p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Bienveillance & plaisir</p>
          <ul class="space-y-4 font-sans text-night/70 text-lg leading-relaxed">
            <li class="flex items-start gap-3">
              <span class="w-2 h-2 rounded-full bg-dream-coral mt-2.5 flex-shrink-0"></span>
              Mise en scène et jeu théâtral
            </li>
            <li class="flex items-start gap-3">
              <span class="w-2 h-2 rounded-full bg-dream-coral mt-2.5 flex-shrink-0"></span>
              Découverte du clown
            </li>
            <li class="flex items-start gap-3">
              <span class="w-2 h-2 rounded-full bg-dream-coral mt-2.5 flex-shrink-0"></span>
              Expression corporelle
            </li>
          </ul>
        </div>
      </div>

      <!-- Info cards -->
      <div class="fade-up mt-12 md:mt-16 grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8 max-w-3xl mx-auto">
        <div class="flex items-start gap-4 md:gap-5 p-5 md:p-6 rounded-2xl md:rounded-3xl bg-white shadow-xl shadow-night/5 border border-white">
          <div class="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-blue/20 flex items-center justify-center text-dream-blue flex-shrink-0">
            <Icon name="lucide:map-pin" size={24} />
          </div>
          <div>
            <h3 class="font-display text-lg md:text-xl text-night mb-1">Lieux d'intervention</h3>
            <p class="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Tarn (81) & Hérault (34)</p>
          </div>
        </div>

        <div class="flex items-start gap-4 md:gap-5 p-5 md:p-6 rounded-2xl md:rounded-3xl bg-white shadow-xl shadow-night/5 border border-white">
          <div class="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-pink/20 flex items-center justify-center text-dream-pink flex-shrink-0">
            <Icon name="lucide:hand" size={24} />
          </div>
          <div>
            <h3 class="font-display text-lg md:text-xl text-night mb-1">Plaquette</h3>
            <p class="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Sur demande</p>
          </div>
        </div>
      </div>

      <!-- CTA -->
      <div class="mt-12 md:mt-16 text-center">
        <a
          href={`mailto:${companyInfo.emails.ateliers}`}
          class="inline-flex items-center gap-4 bg-night text-cloud px-8 py-4 md:px-10 md:py-5 rounded-full font-sans font-bold tracking-widest uppercase text-sm hover:bg-night/90 transition-all hover:scale-105 shadow-xl shadow-night/20"
        >
          <Icon name="lucide:mail" size={20} />
          Nous contacter
        </a>
      </div>
    </div>

  </div>
</Layout>