@props(['title', 'subtitle', 'image' => 'images/hero.png', 'height' => 'h-[700px]'])

<section class="relative {{ $height }} flex items-center overflow-hidden bg-gray-900 group">
    <!-- Background Image with Parallax-like effect -->
    <div class="absolute inset-0 bg-cover bg-center transition-transform duration-1000 group-hover:scale-105" style="background-image: url('{{ asset($image) }}');">
        <div class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-transparent"></div>
    </div>
    
    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-3xl space-y-6">
            <span class="inline-block px-4 py-1.5 bg-[#CC2128] text-white text-xs font-bold uppercase tracking-widest animate-pulse">
                Safety First. Quality Always.
            </span>
            <h1 class="text-5xl md:text-7xl font-black text-white leading-tight">
                {!! $title !!}
            </h1>
            <p class="text-lg text-gray-200 font-medium max-w-xl leading-relaxed">
                {{ $subtitle }}
            </p>
            <div class="flex flex-wrap gap-4 pt-4">
                <a href="{{ route('contact') }}" class="px-10 py-4 bg-[#CC2128] text-white font-bold uppercase tracking-widest text-sm hover:bg-[#A81B21] transition-all transform hover:-translate-y-1 shadow-2xl shadow-red-500/20">
                    Get a Free Quote
                </a>
                <a href="{{ route('services.index') }}" class="px-10 py-4 border-2 border-white text-white font-bold uppercase tracking-widest text-sm hover:bg-white hover:text-black transition-all transform hover:-translate-y-1">
                    Our Services
                </a>
            </div>
        </div>
    </div>

    <!-- Decorative Element -->
    <div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-gray-100 to-transparent"></div>
</section>