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

<div class="relative pt-32 pb-8 md:pt-48 md:pb-12 overflow-hidden border-b border-white/5 bg-zinc-950/50">
    <!-- Cinematic Background Glow -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-r from-pink-500/10 via-emerald-500/10 to-pink-500/10 rounded-full blur-[120px] -z-10"></div>
    
    <div class="container mx-auto px-4 lg:px-8 max-w-7xl relative z-10" 
         x-init="gsap.from($el, { y: 20, opacity: 0, duration: 1, ease: 'power3.out' })">
        
        <!-- Breadcrumbs -->
        @if($breadcrumb)
            <nav class="flex items-center gap-2 mb-8" aria-label="Breadcrumb">
                <a href="/" class="text-[10px] font-bold tracking-widest text-zinc-500 uppercase hover:text-pink-500 transition-colors">Home</a>
                <svg class="w-3 h-3 text-zinc-800" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                <span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">{{ $breadcrumb }}</span>
            </nav>
        @endif

        <div class="max-w-3xl">
            <h1 class="text-4xl md:text-6xl lg:text-7xl font-black tracking-tighter text-white mb-6 leading-[0.9]">
                {{ $title }}
            </h1>
            
            @if($subtitle)
                <p class="text-zinc-400 text-lg md:text-xl leading-relaxed font-medium">
                    {{ $subtitle }}
                </p>
            @endif
        </div>
    </div>
</div>