@extends('layouts.app')

@section('title', 'Sin conexión — OnAPB')

@section('content')
<div class="d-flex align-items-center justify-content-center" style="min-height: 70vh;">
    <div class="text-center px-4">
        <div class="mb-4" style="font-size: 5rem;">🏀</div>
        <h1 class="fw-bold display-5">Sin conexión</h1>
        <p class="text-muted mt-3 mb-4 fs-5">
            Parece que no tenés internet en este momento.<br>
            Algunas páginas pueden estar disponibles en caché.
        </p>
        <div class="d-flex gap-3 justify-content-center flex-wrap">
            <button onclick="window.location.reload()" class="btn btn-primary btn-lg px-5">
                <i class="bi bi-arrow-clockwise me-2"></i>Reintentar
            </button>
            <a href="/" class="btn btn-outline-secondary btn-lg px-5">
                <i class="bi bi-house me-2"></i>Inicio
            </a>
        </div>
        <p class="text-muted small mt-4">
            Si venías a ver resultados o tu QR, probá volviendo cuando tengas conexión.
        </p>
    </div>
</div>
@endsection