@props([
    'title' => '',
    'image' => asset('modules/frontend/images/bg/bg-image-section-01.png'),
    'showGlow' => true,
    'gradientId' => null,
    'showButton' => false,
    'buttonLabel' => 'View More',
    'buttonUrl' => '#',
    'buttonOpenInNewTab' => false,
])

@php
    $heroCtaFlag = filter_var($showButton, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
    if ($heroCtaFlag === null) {
        $heroCtaFlag = (bool) $showButton;
    }
    $heroCtaHref = trim((string) $buttonUrl);
    $heroCtaVisible = $heroCtaFlag && $heroCtaHref !== '' && $heroCtaHref !== '#';
    $heroOpenNewTab = filter_var($buttonOpenInNewTab, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
    if ($heroOpenNewTab === null) {
        $heroOpenNewTab = (bool) $buttonOpenInNewTab;
    }
@endphp

{{-- Hero Section --}}
<section class="relative pt-28 pb-16 md:pt-36 md:pb-24">
    @if ($image)
        <div class="absolute inset-0">
            <img src="{{ $image }}" alt="" class="w-full h-full object-cover opacity-40">
            <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/5 to-black"></div>
        </div>
    @endif
    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold uppercase tracking-wider text-white mb-8">{!! _html($title) !!}</h1>
        @if (isset($slot) && trim($slot) !== '')
            <div class="text-gray-300 text-sm md:text-base leading-relaxed space-y-4">
                {{ $slot }}
            </div>
        @endif
        @if ($heroCtaVisible)
            <a
                href="{{ $heroCtaHref }}"
                @if ($heroOpenNewTab) target="_blank" rel="noopener noreferrer" @endif
                class="inline-flex items-center gap-2 bg-le-primary hover:bg-le-primary/80 transition-colors text-white rounded-full px-8 py-3 text-sm font-medium mt-5"
            >
                {{ $buttonLabel }} <i class="ph ph-caret-right"></i>
            </a>
        @endif
    </div>
</section>