@php
    $section_content = (array) ($section_content ?? []);
    $header_title = $section_content['title'] ?? ($service->metaData->H1 ?? $service->title);
    $header_description = $section_content['short_description'] ?? $service->short_description;
    $header_image_primary = $section_content['image_primary'] ?? null;
    $header_image_secondary = $section_content['image_secondary'] ?? null;
    $header_cta_buttons = is_array($section_content['cta_buttons'] ?? null) ? $section_content['cta_buttons'] : [];
    $upload_base = asset((config('paths.upload', 'assets/uploads')) . '/service-landing');
    $primary_image_src = $header_image_primary ? ($upload_base . '/' . $header_image_primary) : $service->getBannerFile();
    $secondary_image_src = $header_image_secondary ? ($upload_base . '/' . $header_image_secondary) : $service->getIconFile();
@endphp

<header>
    <div class="container">
        <div class="row mx-0 mt-lg-5 mt-0 pt-lg-5 pt-0 w-100 align-items-center">
            <div class="col-lg-7 mt-lg-0 mt-3 col-12 p-2">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a class="choral-filter font-14" href="{{route('site.home')}}">
                                <img width="12" src="{{asset('assets/site/img/bread-home.svg')}}" alt="خانه">
                                خانه
                            </a>
                        </li>
                        <li class="breadcrumb-item choral-filter"><a class="font-14" href="">
                                خدمات
                            </a></li>
                        <li class="breadcrumb-item active mint-green font-14" aria-current="page">
                            {{@$service->title}}
                        </li>
                    </ol>
                </nav>
                <h1 class="font-30 extra-bold dark-gray my-3">
                    {{ $header_title }}
                </h1>
                <p class="lh-lg Charcoal-gray light mb-3">
                    {{ $header_description }}
                </p>
                <div class="d-flex justify-content-start gap-2">
                    @if(count($header_cta_buttons) > 0)
                        @foreach($header_cta_buttons as $button)
                            <a class="first-page-btn-component text-white main-radius {{ ($button['color'] ?? 'green') === 'black' ? 'btn-dark-gray' : 'btn-mint-green' }}"
                               href="{{ $button['link'] ?? '#' }}">
                                {{ $button['text'] ?? '' }}
                            </a>
                        @endforeach
                    @else
                        <a class="first-page-btn-component text-white main-radius btn-mint-green"
                           href="{{route('panel.order.create',$service->id)}}">سفارش {{$service->title}}
                        </a>
                        <a class="first-page-btn-component text-white main-radius btn-dark-gray"
                           href="{{route('site.contactUs')}}">
                            تماس با مشاور
                        </a>
                    @endif
                </div>
            </div>
            <div
                class="col-lg-5 col-12 order-lg-0 order-first mt-lg-0 mt-5 mx-auto text-center position-relative p-2 ps-5">
                <img class="w-100 position-relative z-2 section-animation" src="{{ $primary_image_src }}"
                     alt="{{ $service->title}}">
                @if($secondary_image_src)
                    <img class="position-absolute cube-1 head-animation" data-aos="flip-right" data-aos-duration="800"
                         src="{{ $secondary_image_src }}" alt="{{ $service->title}}">
                @endif
            </div>
        </div>
    </div>
</header>