@props([
    'title',
    'subtitle' => null,
    'meta' => null,
    'image' => null,
    'compact' => false,
])

<header class="page-header {{ $compact ? 'page-header-compact' : '' }}">
    <div class="container mx-auto px-4">
        @if($image)
            <!-- Header mit Bild -->
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div>
                    @if($meta)
                        <div class="mb-4">
                            {{ $meta }}
                        </div>
                    @endif
                    
                    <h1 class="page-header-title">{{ $title }}</h1>
                    
                    @if($subtitle)
                        <p class="page-header-subtitle">{{ $subtitle }}</p>
                    @endif
                </div>
                
                <div class="relative h-64 md:h-80 rounded-xl overflow-hidden">
                    <img src="{{ $image }}" alt="{{ $title }}" class="w-full h-full object-cover">
                </div>
            </div>
        @else
            <!-- Header ohne Bild -->
            <div class="max-w-4xl">
                @if($meta)
                    <div class="mb-4">
                        {{ $meta }}
                    </div>
                @endif
                
                <h1 class="page-header-title">{{ $title }}</h1>
                
                @if($subtitle)
                    <p class="page-header-subtitle">{{ $subtitle }}</p>
                @endif
            </div>
        @endif
    </div>
</header>