<video
    id="heroVideo"
    class="w-full h-auto object-cover cursor-pointer"
    muted
    loop
    playsinline
    webkit-playsinline
    preload="auto"
>
    <!-- MOBILE -->
    <source
        src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/video/ef-mobile-video-revised.mp4"
        type="video/mp4"
        media="(max-width: 767px)"
    >

    <!-- DESKTOP / TAB -->
    <source
        src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/video/ef-video.mp4"
        type="video/mp4"
        media="(min-width: 768px)"
    >
</video>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const video = document.getElementById("heroVideo");

    if (video) {
        video.muted = true;
        video.play().catch(() => {
            // Safari fallback on first user interaction
            document.body.addEventListener("touchstart", () => {
                video.play();
            }, { once: true });
        });
    }
});
</script>
<?php /**PATH /home/eggfirst/public_html/resources/views/components/hero.blade.php ENDPATH**/ ?>