{{-- Page Header Component --}}
@props(['title', 'subtitle' => null, 'breadcrumbs' => [], 'image' => null])

<div class="px-8 md:px-16 lg:px-24">
    <div class="relative rounded-xl overflow-hidden" style="height: 280px;">
        {{-- Background Image --}}
        <div class="absolute inset-0 bg-cover bg-center"
             style="background-image: url('{{ $image ?? asset('images/campus-bg.jpg') }}');">
        </div>

        {{-- Green overlay --}}
        <div class="absolute inset-0 bg-gradient-to-r from-[#1a6e3c] to-[#145530]" style="opacity: 1;"></div>

        {{-- Content centered --}}
        <div class="relative z-10 flex flex-col items-center justify-center h-full px-8 text-center">
            @if(count($breadcrumbs) > 0)
            <nav class="mb-3 text-sm">
                <a href="{{ route('home') }}" class="text-white/60 hover:text-white transition">Home</a>
                @foreach($breadcrumbs as $label => $url)
                    <span class="text-white/40 mx-2">/</span>
                    @if($url)
                        <a href="{{ $url }}" class="text-white/60 hover:text-white transition">{{ $label }}</a>
                    @else
                        <span class="text-white/90 font-semibold">{{ $label }}</span>
                    @endif
                @endforeach
            </nav>
            @endif

            <h1 class="text-4xl md:text-5xl font-black text-white tracking-wide uppercase leading-tight drop-shadow-lg">
                {{ $title }}
            </h1>

            @if($subtitle)
            <p class="text-white/70 text-lg mt-3 max-w-2xl">{{ $subtitle }}</p>
            @endif
        </div>
    </div>
</div>