@props(['title', 'subtitle' => null, 'backUrl' => null, 'actionButton' => null])

<!-- Hero Header -->
<div class="gradient-bg text-white py-12 px-6">
    <div class="max-w-6xl mx-auto">
        <div class="flex items-center justify-between">
            <div class="animate-fade-in flex items-center">
                <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4 p-2">
                    <img src="{{ asset('esmt-logo.png') }}" alt="ESMT Berlin" class="w-full h-full object-contain">
                </div>
                <div>
                    <h1 class="text-3xl md:text-4xl font-bold mb-2">{{ $title }}</h1>
                    @if($subtitle)
                        <p class="text-lg opacity-90">{{ $subtitle }}</p>
                    @endif
                </div>
            </div>
            <div class="animate-fade-in flex items-center space-x-3">
                @if($actionButton)
                    {{ $actionButton }}
                @endif
                @if($backUrl)
                    <a href="{{ $backUrl }}" class="glass px-4 py-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
                        ← Back
                    </a>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
    .gradient-bg { background: linear-gradient(135deg, #001E4E 0%, #03318C 100%); }
    .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
    .animate-fade-in { animation: fadeIn 0.6s ease-out; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>