@props([
    'badge' => '',
    'badgeIcon' => null, // example: 'building-columns'
    'title' => '',
    'description' => '',
    'gradient' => 'from-slate-950 via-primary-900 to-gray-950',
])

<section class="relative bg-linear-to-br {{ $gradient }} dark:from-gray-900 dark:via-primary-900 dark:to-black overflow-hidden">
    
   <div class="pt-30 md:pt-40 pb-12">
     <!-- Background Effects -->
    <div class="absolute inset-0">
        <div class="absolute inset-0 opacity-10">
            <div 
                class="absolute top-0 left-0 w-full h-full"
                style="background-image: radial-gradient(circle at 25% 25%, #ffffff 1px, transparent 1px), radial-gradient(circle at 75% 75%, #ffffff 1px, transparent 1px); background-size: 60px 60px; animation: float 20s ease-in-out infinite;">
            </div>
        </div>

        <div class="absolute top-20 left-20 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-20 right-20 w-80 h-80 bg-teal-500/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
    </div>
    
    <!-- Content -->
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">

            @if($badge)
                <div class="inline-flex items-center px-4 py-2 bg-white/10 backdrop-blur-sm text-white/90 rounded-full text-sm font-semibold mb-6 border border-white/20">
                    
                    @if($badgeIcon)
                        <x-dynamic-component 
                            :component="'flux::icon.' . $badgeIcon" 
                            class="w-5 h-5 flex-none mr-2" 
                        />
                    @endif

                    {{ $badge }}
                </div>
            @endif

            @if($title)
                <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-4">
                    {{ $title }}
                </h1>
            @endif

            @if($description)
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    {{ $description }}
                </p>
            @endif

        </div>
    </div>

   </div>
</section>
