@props(['is_gallery' => null])

{{-- <!-- HERO BANNER -->
<div class="hero-banner position-relative">
    <figure class="overflow-hidden position-relative h-100 banner-figure">
        <img src={{ $image }} class="w-100 h-100 object-fit-cover" alt="{{ $title }}" />
    </figure>
    <div class="position-absolute start-0 top-0 w-100 h-100 d-flex flex-column justify-content-end">
        <div class="container page-hero-container">
            <h1 class="page-header secondary-font-color">
                @php
                    $words = explode(' ', $title);

                    if (count($words) > 1) {
                        $words[1] = '<span class="page-header primary-color">' . $words[1] . '</span>';
                    }

                    echo implode(' ', $words);
                @endphp
            </h1>

        </div>
    </div>
</div> --}}

<section class="hero-section position-relative">
    <!-- Main background image -->
    <div class="hero-bg" style="background-image: url({{ $page->cover_image->getPath() }});"></div>

    {{-- <img src="{{ $page->cover_image->getPath() }}" alt="{{ $page->title }}" loading="lazy" class="hero-bg"> --}}

    <!-- Content overlay -->
    <div class="container position-relative text-white py-5" style="z-index: 2;">
        <div class="row">
            <div class="container position-relative text-white min-vh-100 d-flex align-items-center" style="z-index: 2;">
                <div class="row justify-content-center w-100 py-5">
                    <div class="col-lg-8 text-center">
                        <h1 class="display-4 fw-bold mb-3">{!! $page->short_title !!}</h1>
                        @if (isset($page->short_description))
                            <p class="lead mb-4">{!! $page->short_description !!}</p>
                        @elseif(isset($page->description))
                            <p class="lead mb-4">{!! $page->description !!}</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Thumbnail selector at bottom right -->
    @if ($is_gallery)
        <div class="thumbnail-selector position-absolute bottom-0 end-0 p-3" style="z-index: 3;">
            <div class="d-flex gap-2">

                @foreach ($page->gallery_image->where('on_cover')->take(4) as $gallery)
                    <div class="thumbnail-item" data-bg="{{ $gallery->getPath() }}">
                        <img src="{{ $gallery->getPath() }}" class="img-thumbnail" alt="{{ $gallery->alt }}"
                            loading="lazy">
                    </div>
                @endforeach

            </div>
        </div>
    @endif
</section>