@props(['variant' => '1'])
@php
    $embed = \App\Services\PublicSiteMediaService::videoEmbedUrl($hotel->public_site_hero_video_url);
@endphp
<div class="ph-hero ph-hero--v{{ e($variant) }}">
    <div class="ph-media">
        @if($hotel->public_hero_video_file_url)
            <video
                class="ph-vid"
                data-ph-hero-video
                src="{{ $hotel->public_hero_video_file_url }}"
                autoplay
                muted
                loop
                playsinline
                webkit-playsinline
                preload="auto"
            ></video>
        @elseif($embed)
            <div class="ph-embed-wrap">
                <iframe class="ph-embed" src="{{ e($embed) }}" title="Background video" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
            </div>
        @elseif($hotel->public_hero_image_url)
            <img class="ph-img" src="{{ $hotel->public_hero_image_url }}" alt="{{ e($hotel->name) }}" width="1920" height="1080" fetchpriority="high" decoding="async">
        @else
            <div class="ph-fallback" style="background: linear-gradient(160deg, var(--site-primary, #0f172a) 0%, #020617 100%); min-height:100%; min-width:100%;"></div>
        @endif
    </div>
    <div class="ph-dim" aria-hidden="true"></div>
</div>
@once
    @push('head')
        <script>
            (function () {
                document.addEventListener('DOMContentLoaded', function () {
                    var v = document.querySelector('.ph-hero [data-ph-hero-video]');
                    if (!v || v.tagName !== 'VIDEO') return;
                    v.muted = true;
                    v.setAttribute('muted', '');
                    v.loop = true;
                    v.playsInline = true;
                    function play() {
                        v.play().catch(function () {});
                    }
                    v.addEventListener('loadeddata', play);
                    v.addEventListener('pause', function () {
                        if (!v.ended && document.visibilityState === 'visible') play();
                    });
                    document.addEventListener('visibilitychange', function () {
                        if (document.visibilityState === 'visible') play();
                    });
                    play();
                });
            })();
        </script>
    @endpush
@endonce