@props([
    'title',
    'metaDescription' => null,
    'bannerImage' => '',
    'quoteUrl' => null,
    'quoteTarget' => null,
])

@php
    $metaDescription = $metaDescription ?: $title;
    $isRtl = app()->getLocale() === 'ar';
    $isExternalQuoteUrl = $quoteUrl
        && (str_starts_with($quoteUrl, 'http://') || str_starts_with($quoteUrl, 'https://'));

    $quoteTarget = $quoteTarget ?: ($isExternalQuoteUrl ? '_blank' : '_self');
@endphp

@section('title', $title .' - AL Buhaira National Insurance Company')
@section('meta_description', $metaDescription)

<div>

{{-- Banner --}}


<section class="bg-slate-50 pt-4">
    <div class="max-w-7xl mx-auto px-6">

        <div class="relative rounded-2xl overflow-visible bg-white">

            {{-- Background Shape --}}
            <div class="absolute inset-0 
                {{ $isRtl 
                    ? 'bg-gradient-to-l from-white/90 to-white/40' 
                    : 'bg-gradient-to-r from-white/90 to-white/40' }}">
            </div>

            <div class="relative flex items-center min-h-[170px] md:min-h-[180px] px-6 md:px-10">

                {{-- Content --}}
                <div class="z-10 max-w-lg">
                    <h1 class="text-2xl md:text-3xl font-bold text-slate-900">
                        {{ $title }}
                    </h1>

                    @if($quoteUrl)
                        <a href="{{ $quoteUrl }}"
                        target="{{ $quoteTarget }}"
                        @if($quoteTarget === '_blank') rel="noopener noreferrer" @endif
                        class="mt-4 inline-flex items-center gap-2 rounded-xl bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 transition">
                            {{ __('Get a Quote') }}
                        </a>
                    @endif
                </div>

                {{-- Car Image --}}
                <div class="absolute 
    {{ $isRtl ? 'left-4 md:left-10' : 'right-0 md:right-6' }}
    bottom-0
    h-[120px] md:h-[160px] lg:h-[180px]">

    <img 
        src="{{ $bannerImage ?? asset('assets/img/page-banner.png') }}"
        alt="{{ $title }}"
        class="h-full w-auto object-contain {{ $isRtl ? 'scale-x-[-1]' : '' }}"
    >
</div>
                

            </div>

        </div>

    </div>
</section>


{{-- Breadcrumb --}}
<div class="max-w-7xl mx-auto px-6 py-4">
    <x-breadcrumbs :items="[
        ['label' => __('header.home'), 'url' => localized_page_url()],
        ['label' => $title, 'url' => null],
    ]" />
</div>
{{-- Content --}}
<section class="bg-slate-50 pb-12">
    <div class="max-w-7xl mx-auto px-6">

        <div class="bg-white border border-slate-200 rounded-2xl p-8">

            <div class="prose prose-slate max-w-none">
                {{ $slot }}
            </div>

        </div>

    </div>
</section>

</div>