@aware(['page'])
<div class="home-hero theme-bg-blue">
    <div class="theme-max-w mx-auto px-5">
        <div class="relative">
            <div class="mb-20 text-white lg:h-[600px] grid lg:grid-cols-2 items-center gap-8 lg:gap-12">

                <!-- Text Section -->
                <div class="text-center lg:text-left">
                    <h1 class="text-3xl lg:text-4xl tracking-wide mb-6" style="line-height: 60px;">
                        {{$title}}
                    </h1>
                    <p class="text-base lg:text-lg leading-relaxed mb-8 tracking-normal">
                        {{$description}}
                    </p>
                    <div class="flex flex-col sm:flex-row justify-center lg:justify-start gap-4">
                        <a href="{{$link1}}" class="border-2 bg-white text-black px-6 py-3">{{$buttontext1}}</a>
                        <a href="{{$link2}}" class="border-2 px-6 py-3">{{$buttontext2}}</a>
                    </div>
                </div>

                <!-- Image Section with Grid -->
                <div class="grid justify-center lg:justify-end h-full">
                    <div class="relative grid items-end justify-center w-full h-full">
{{--                        <img src="" data-src="{{asset('storage/'.$image)}}" alt="Hero Image" class="lazy w-full h-[600px] object-cover rounded-md col-start-1 row-start-1" />--}}
                        <video class="w-full h-[600px] object-cover col-start-1 row-start-1" loop autoplay muted playsinline>
                            <source src="{{asset('storage/'.$video)}}" type="video/mp4" class="">
                        </video>

                        <!-- Scroll Down Button - Positioned over the image at bottom-center -->
                        <div class="col-start-1 row-start-1 flex justify-center items-end pb-8 mb-3 z-10">
                            <a href="#" onclick="scrollBy600px(event)" class="w-16 h-16 rounded-full border-2 border-white bg-transparent flex items-center justify-center text-white text-xl focus:outline-none focus:ring-2 focus:ring-white transition duration-200" aria-label="Scroll down">
                                <i class="fa-solid fa-arrow-down-long"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('inlinescript')
        <script>
            function scrollBy600px(e) {
                e.preventDefault();
                window.scrollBy({
                    top: 500,
                    left: 0,
                    behavior: 'smooth'
                });
            }
        </script>
    @endpush
</div>