@if(app()->environment('demo'))
    @php
        $lastRefreshed    = cache('demo_last_refreshed');
        $resetHours       = (int) env('DEMO_RESET_HOURS', 24);
        $nextResetAt      = $lastRefreshed ? $lastRefreshed->copy()->addHours($resetHours) : null;
        $nextResetIso     = $nextResetAt ? $nextResetAt->toIso8601String() : null;
        $lastRefreshedStr = $lastRefreshed ? $lastRefreshed->diffForHumans() : 'recently';
    @endphp
    <div id="demo-bar" class="w-full bg-amber-500 text-white text-sm py-2 px-4 flex items-center justify-between gap-4 flex-wrap z-50">
        <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 110 20A10 10 0 0112 2z"/>
            </svg>
            <span>
                <strong>Demo Mode</strong> — This is a demo environment. Data was last reset <strong>{{ $lastRefreshedStr }}</strong>.
                @if($nextResetAt)
                    Next automatic reset in <strong id="demo-countdown" data-reset="{{ $nextResetIso }}">—</strong>.
                @else
                    Resets automatically every <strong>{{ $resetHours }}</strong> hours.
                @endif
            </span>
        </div>
        <div class="flex items-center gap-3 shrink-0">
            <span class="opacity-75 text-xs hidden sm:inline">Credentials: customer@demo.com / pro@demo.com &nbsp;|&nbsp; password: demo1234</span>
            <button onclick="document.getElementById('demo-bar').remove()" class="opacity-75 hover:opacity-100 transition-opacity" aria-label="Dismiss">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
    </div>
    <script>
        (function () {
            var el = document.getElementById('demo-countdown');
            if (!el) return;
            var resetAt = new Date(el.dataset.reset);
            function tick() {
                var diff = Math.max(0, Math.floor((resetAt - Date.now()) / 1000));
                if (diff === 0) { el.textContent = 'any moment'; return; }
                var h = Math.floor(diff / 3600), m = Math.floor((diff % 3600) / 60), s = diff % 60;
                el.textContent = (h ? h + 'h ' : '') + (m ? m + 'm ' : '') + s + 's';
                setTimeout(tick, 1000);
            }
            tick();
        })();
    </script>
@endif