{{-- Hero Section Template 1 --}}
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
    @if ($event->image)
        <div class="absolute inset-0">
            <img src="{{ Storage::url($event->image) }}" alt="{{ $event->title }}" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-r from-black/70 via-black/50 to-black/30"></div>
        </div>
    @else
        <div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900"></div>
    @endif

    <div class="relative z-10 container mx-auto px-6 py-20">
        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div class="text-white">
                    <!-- Badge organisateur -->
                    @if ($event->organizer)
                        <div class="mb-6">
                            <span class="inline-flex items-center px-4 py-2 bg-white/20 backdrop-blur-sm text-white rounded-full text-sm font-medium border border-white/30">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                                Organisé par {{ $event->organizer->company_name ?: $event->organizer->name }}
                            </span>
                        </div>
                    @endif

                    <!-- Titre principal -->
                    <h1 class="text-5xl lg:text-7xl font-bold mb-6 leading-tight">
                        {{ $event->title }}
                    </h1>

                    <!-- Sous-titre -->
                    @if ($event->subtitle)
                        <p class="text-xl lg:text-2xl mb-8 text-blue-100 font-light">
                            {{ $event->subtitle }}
                        </p>
                    @endif

                    <!-- Description -->
                    <p class="text-lg mb-8 text-blue-100 leading-relaxed max-w-2xl">
                        {!! Str::limit(strip_tags($event->description), 150) !!}
                    </p>

                    <!-- Date et lieu -->
                    <div class="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 mb-8">
                        <!-- Date -->
                        <div class="flex items-center">
                            <div class="rounded-full bg-white/10 p-2 mr-3">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <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"></path>
                                </svg>
                            </div>
                            <div>
                                <span class="block text-sm text-blue-200">Date</span>
                                <span class="font-medium">
                                    @if($event->start_date->format('Y-m-d') == $event->end_date->format('Y-m-d'))
                                        {{ $event->start_date->format('d M Y') }}
                                    @else
                                        {{ $event->start_date->format('d') }} - {{ $event->end_date->format('d M Y') }}
                                    @endif
                                </span>
                            </div>
                        </div>
                        
                        <!-- Lieu -->
                        @if($event->location)
                            <div class="flex items-center">
                                <div class="rounded-full bg-white/10 p-2 mr-3">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <span class="block text-sm text-blue-200">Lieu</span>
                                    <span class="font-medium">{{ $event->location }}</span>
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Call to action -->
                    <div class="flex flex-wrap gap-4">
                        <a href="#register" class="px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-300 flex items-center">
                            <span>S'inscrire maintenant</span>
                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                            </svg>
                        </a>
                        
                        <a href="#schedule" class="px-8 py-4 bg-transparent hover:bg-white/10 text-white border border-white/30 font-medium rounded-lg transition duration-300">
                            Voir le programme
                        </a>
                    </div>
                </div>
                
                <!-- Image du héros (visible seulement sur grand écran) -->
                @if($event->hero_image)
                    <div class="hidden lg:block relative">
                        <img src="{{ Storage::url($event->hero_image) }}" alt="{{ $event->title }}" class="w-full h-auto rounded-lg shadow-2xl transform rotate-2 hover:rotate-0 transition duration-500">
                        <div class="absolute inset-0 rounded-lg shadow-inner"></div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>