@props(['title', 'image' => 'images/hero.png'])

<section class="relative h-[450px] flex items-center bg-gray-900 overflow-hidden">
    <!-- Background with Overlay -->
    <div class="absolute inset-0 bg-cover bg-center transition-transform duration-1000" style="background-image: url('{{ asset($image) }}');">
        <div class="absolute inset-0 bg-gradient-to-r from-[#1A1A1A]/95 via-[#1A1A1A]/80 to-transparent"></div>
    </div>
    
    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-4xl reveal">
            <!-- Animated Title -->
            <div class="flex items-center space-x-4 mb-6">
                <div class="w-12 h-1 bg-[#CC2128]"></div>
                <span class="text-[#CC2128] font-bold uppercase tracking-[0.4em] text-xs">AHE</span>
            </div>
            
            <h1 class="text-5xl md:text-7xl font-black text-white uppercase tracking-tight leading-none mb-8">
                {{ $title }}
            </h1>

            <!-- Modern Breadcrumb Path -->
            <nav class="flex items-center space-x-3 text-sm font-bold uppercase tracking-widest">
                <a href="{{ route('home') }}" class="text-gray-400 hover:text-[#CC2128] transition-colors flex items-center">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                    Home
                </a>
                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                <span class="text-white border-b-2 border-[#CC2128] pb-1">{{ $title }}</span>
            </nav>
        </div>
    </div>

    <!-- Background Decorative Text -->
    <div class="absolute -bottom-10 -right-20 text-[180px] font-black text-white/5 uppercase select-none pointer-events-none tracking-tighter">
        {{ $title }}
    </div>
</section>