@if (request('source') !== 'app')
    @php
        $androidAppUrl = '#';
        $iosAppUrl = '#';
        $userAgent = strtolower(request()->userAgent() ?? '');
        $isIosDevice = str_contains($userAgent, 'iphone') || str_contains($userAgent, 'ipad') || str_contains($userAgent, 'ipod');
        $appDownloadUrl = $isIosDevice ? $iosAppUrl : $androidAppUrl;
    @endphp

    <div class="app-download-banner" id="appDownloadBanner">
        <button class="app-download-close" type="button" aria-label="Close app download banner" data-app-download-close>
            <span class="material-symbols-outlined" aria-hidden="true">close</span>
        </button>

        <img class="app-download-logo" src="{{ asset('images/Fily-logo.png') }}" alt="Fily">

        <div class="app-download-copy">
            <strong>Fily is better on app</strong>
            <span class="app-download-meta">
                <span>4.6</span>
                <span class="material-symbols-outlined app-download-star" aria-hidden="true">star</span>
                <span class="app-download-divider"></span>
                <span class="app-download-meta-text">Fast listings</span>
            </span>
        </div>

        <a class="app-download-action" href="{{ $appDownloadUrl }}">Use the App</a>
    </div>

    @once
        <script>
            (() => {
                const banner = document.getElementById('appDownloadBanner');

                if (!banner) {
                    return;
                }

                const setBannerOffset = () => {
                    document.documentElement.style.setProperty('--app-download-banner-height', `${banner.offsetHeight}px`);
                };

                localStorage.removeItem('hideAppDownloadBanner');
                setBannerOffset();
                window.addEventListener('resize', setBannerOffset);

                banner.querySelector('[data-app-download-close]')?.addEventListener('click', () => {
                    window.removeEventListener('resize', setBannerOffset);
                    document.documentElement.style.setProperty('--app-download-banner-height', '0px');
                    banner.remove();
                });
            })();
        </script>
    @endonce
@endif