@aware(['page'])
<div class="bg-black">
    <div class="theme-max-w mx-auto px-5 my-10">
        <div class="py-10 w-full items-center">
            <div class="text-center">
                <div class="text-center text-white text-4xl tracking-[24.40px] md:text-6xl md:tracking-[38.40px] relative z-10">{{$title}}</div>
                <video id="heroVideo" class="w-full -mt-4 md:-mt-6 z-9" loop playsinline>
                    <source src="{{asset('storage/'.$video)}}" type="video/mp4">
                </video>
                <button onclick="playVideo()" class="text-center my-8 px-6 py-3 border border-white text-white uppercase text-base hover:bg-white hover:text-black transition">{{$buttonText}}</button>
            </div>

            <div class="w-full flex flex-col items-center pb-3">
                <div class="w-full h-px bg-white mb-4"></div>
                <div class="w-full flex justify-between items-center text-white px-4 sm:px-8 text-xs sm:text-sm">
                    <div>{{$copyright}}</div>
                    <div class="flex space-x-4">
                        @foreach($socialmedia as $media)
                            <a href="{{$media['link']}}" target="_blank" class=" hover:text-blue-600">
                                <i class="{{$media['media']}} fa-lg"></i>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('inlinescript')
<script>
    function playVideo() {
        const video = document.getElementById("heroVideo");
        video.muted = false;
        video.play().catch(err => {
            alert("Your browser prevented auto-play with sound. Click the video to play manually.");
        });

        // Optional: Pause video on tab switch
        document.addEventListener("visibilitychange", () => {
            if (document.hidden) video.pause();
        });

        // Optional: Stop video on unload
        window.addEventListener("beforeunload", () => {
            video.pause();
        });
    }
</script>
@endpush