@props([
    'title',
    'subtitle' => '',
    'description' => '',
    'backgroundImage' => 'images/hero-bg.jpg',
    'overlayOpacity' => '0.7',
    'titleSize' => 'text-4xl md:text-6xl lg:text-7xl',
    'centered' => true
])

<section class="relative py-20 lg:py-32 overflow-hidden">
    <!-- Image de fond -->
    <div class="absolute inset-0">
        <img src="{{ asset($backgroundImage) }}" alt="" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-black" style="opacity: {{ $overlayOpacity }}"></div>
    </div>
    
    <!-- Effets visuels -->
    <div class="absolute inset-0">
        <div class="absolute top-20 left-10 w-80 h-80 bg-brand-red rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow"></div>
        <div class="absolute top-40 right-10 w-80 h-80 bg-gray-600 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow" style="animation-delay: 2s"></div>
        <div class="absolute bottom-20 left-20 w-80 h-80 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse-slow" style="animation-delay: 4s"></div>
    </div>
    
    <!-- Lignes de connexion -->
    <div class="absolute inset-0 overflow-hidden">
        <svg class="absolute top-1/4 left-1/4 w-1/2 h-1/2 text-brand-red opacity-30" viewBox="0 0 100 100">
            <path d="M10,10 Q50,5 90,10 Q95,50 90,90 Q50,95 10,90 Q5,50 10,10" stroke="currentColor" stroke-width="0.5" fill="none" class="animate-draw"/>
        </svg>
    </div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
        <div class="{{ $centered ? 'text-center' : '' }}">
            <h1 class="{{ $titleSize }} font-black mb-8 bg-gradient-to-r from-brand-red via-white to-white bg-clip-text text-transparent animate-gradient-flow">
                {!! $title !!}
            </h1>
            
            @if($subtitle)
                <div class="text-2xl md:text-3xl font-bold text-white mb-8">
                    {!! $subtitle !!}
                </div>
            @endif
            
            @if($description)
                <div class="text-xl md:text-2xl text-gray-300 max-w-5xl {{ $centered ? 'mx-auto' : '' }} leading-relaxed font-medium content-spacing">
                    {!! $description !!}
                </div>
            @endif
            
            {{ $slot }}
        </div>
    </div>
</section>

<style>
@keyframes gradient-flow {
    0%, 100% {
        background-size: 200% 200%;
        background-position: left center;
    }
    50% {
        background-size: 200% 200%;
        background-position: right center;
    }
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.05);
    }
}

@keyframes draw {
    0% {
        stroke-dasharray: 0 100;
    }
    100% {
        stroke-dasharray: 100 0;
    }
}

.animate-gradient-flow {
    animation: gradient-flow 4s ease infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

.animate-draw {
    stroke-dasharray: 100;
    animation: draw 8s ease-in-out infinite;
}
</style>