@extends('layouts.guest')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-boulanger-orange to-orange-600 px-4">
    <div class="max-w-md w-full bg-white rounded-2xl shadow-2xl p-8 text-center">
        <div class="mb-6">
            <img src="{{ asset('images/logos/Bbloc_Seul_Orange_RVB.svg') }}"
                 alt="Boulanger"
                 class="w-20 h-20 mx-auto mb-4">
        </div>

        <h1 class="text-2xl font-display font-bold text-boulanger-dark mb-2">
            Hors ligne
        </h1>

        <p class="text-boulanger-gray mb-6">
            Vous n'êtes pas connecté à Internet. Certaines fonctionnalités sont limitées.
        </p>

        <div class="bg-gray-50 rounded-xl p-4 mb-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 mx-auto text-gray-300 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
            </svg>
            <p class="text-sm text-gray-600">
                Vérifiez votre connexion WiFi ou réseau mobile
            </p>
        </div>

        <button onclick="window.location.reload()"
                class="w-full bg-boulanger-orange text-white font-semibold py-3 rounded-xl hover:bg-orange-600 transition">
            Réessayer
        </button>

        <p class="text-xs text-gray-400 mt-4">
            Les pages déjà visitées peuvent être disponibles en cache
        </p>
    </div>
</div>
@endsection