@extends('layouts.app')

@section('title', 'Offline Mode | Kevron Suites')

@section('content')
<section class="section-soft-blue min-h-[70vh] flex items-center justify-center py-16">
    <div class="max-w-md w-full px-4 text-center">
        
        <div class="card-luxury p-8 md:p-12 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm relative overflow-hidden">
            <div class="absolute top-0 left-0 right-0 h-1 bg-amber-500"></div>
            
            <div class="w-16 h-16 bg-blue-50 dark:bg-blue-950/40 text-blue-900 dark:text-cyan-400 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.022a1.5 1.5 0 0 1-.24 1.84l-1.913 1.913a8.25 8.25 0 0 1-1.117-10.608m13.774 1.628a8.25 8.25 0 0 1-1.117 10.608l-1.913-1.913a1.5 1.5 0 0 1-.24-1.84m-9.723-3.07a3 3 0 0 0 4.243 0m-4.243 0a1.5 1.5 0 0 1 0-2.122m4.243 0a1.5 1.5 0 0 1 0 2.122m-5.477-2.904a6 6 0 0 1 7.712 0m-7.712 0a1.5 1.5 0 0 1 0-2.123m7.712 0a1.5 1.5 0 0 1 0 2.123" />
                </svg>
            </div>
            
            <h1 class="text-base md:text-lg font-normal text-slate-900 dark:text-white mb-4 uppercase tracking-wider">
                Connection Interrupted
            </h1>
            
            <p class="text-xs text-slate-500 dark:text-slate-400 font-semibold leading-relaxed mb-6">
                You are currently browsing Kevron Suites and Apartments offline. Your PWA digital key, local concierge directions, and checked reservation receipts remain active and accessible offline.
            </p>

            <div class="bg-slate-50 dark:bg-slate-800/40 border border-slate-100 dark:border-slate-800 rounded p-4 text-left text-[11px] font-semibold space-y-2 mb-8">
                <span class="block text-slate-900 dark:text-white font-bold text-xs uppercase tracking-wider pb-1 border-b border-slate-100 dark:border-slate-800">Concierge Desk Hotline</span>
                <div class="flex justify-between">
                    <span class="text-slate-400">Reception Frontdesk</span>
                    <span class="text-slate-800 dark:text-slate-200 font-bold">+234 (0) 803 000 1111</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Emergency Smart Security</span>
                    <span class="text-slate-800 dark:text-slate-200 font-bold">+234 (0) 803 000 2222</span>
                </div>
            </div>
            
            <div class="space-y-4">
                <button onclick="window.location.reload()" 
                        class="btn-pill btn-primary w-full py-3 text-xs uppercase tracking-wider font-bold">
                    Retry Connection
                </button>
                <a href="{{ route('home') }}" class="btn-pill btn-outline-gold w-full py-3 text-xs uppercase tracking-wider font-bold">
                    Return Home
                </a>
            </div>
        </div>
        
    </div>
</section>
@endsection