@props([
    'title' => '',
    'subtitle' => '',
    'backgroundImage' => null,
    'ctaButtons' => []
])

<section class="relative min-h-[500px] flex items-center justify-center overflow-hidden">
    <!-- Background -->
    @if($backgroundImage)
        <div 
            class="absolute inset-0 bg-cover bg-center bg-no-repeat"
            style="background-image: url('{{ $backgroundImage }}');"
        ></div>
        <!-- Glassmorphism Overlay -->
        <div class="absolute inset-0 bg-black/30 backdrop-blur-sm"></div>
    @else
        <!-- Gradient Background -->
        <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700"></div>
        <!-- Glassmorphism Overlay -->
        <div class="absolute inset-0 bg-black/10 backdrop-blur-sm"></div>
    @endif

    <!-- Content -->
    <div class="relative z-10 container mx-auto px-6 text-center text-white">
        @if($title)
            <h1 class="text-5xl md:text-6xl font-bold mb-4 drop-shadow-lg">
                {{ $title }}
            </h1>
        @endif

        @if($subtitle)
            <p class="text-xl md:text-2xl mb-8 text-white/90 max-w-3xl mx-auto">
                {{ $subtitle }}
            </p>
        @endif

        <!-- CTA Buttons -->
        @if(count($ctaButtons) > 0)
            <div class="flex flex-wrap justify-center gap-4">
                @foreach($ctaButtons as $button)
                    @php
                        $style = $button['style'] ?? 'primary';
                        $classes = match($style) {
                            'primary' => 'px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200',
                            'secondary' => 'px-6 py-3 bg-white text-blue-600 rounded-lg hover:bg-gray-100 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200',
                            'outline' => 'px-6 py-3 border-2 border-white text-white rounded-lg hover:bg-white hover:text-blue-600 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200',
                            default => 'px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200'
                        };
                    @endphp
                    
                    <a 
                        href="{{ route($button['route']) }}" 
                        class="{{ $classes }}"
                    >
                        @if(isset($button['icon']))
                            <i class="fa-solid {{ $button['icon'] }} mr-2"></i>
                        @endif
                        {{ $button['label'] }}
                    </a>
                @endforeach
            </div>
        @endif

        <!-- Slot for additional content -->
        {{ $slot }}
    </div>

    <!-- Decorative Elements -->
    <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-white dark:from-gray-900 to-transparent"></div>
</section>
