@extends('layouts.layout')

@section('title', 'Página no encontrada')

@section('body')
    <div class="h-full flex flex-col items-center justify-center">
        

        <!-- SVG de error 404 -->
        <svg class="w-32 h-32 text-purple-200 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>

        <!-- Mensaje de error -->
        <h1 style="font-size: 55px" class="font-bold text-purple-800 mb-1">404</h1>
        <p class="text-lg text-purple-700 mb-5">Lo sentimos, la página que estás buscando no existe.</p>
        <p class="text-sm text-purple-600 mt-1">Redirigiendo al inicio en <span id="countdown">5</span> segundos...</p>

        <!-- Botón para volver al inicio -->
        <a href="{{ url('/') }}" class="px-6 mt-5 py-3 bg-purple-200 text-white font-semibold rounded-lg hover:bg-purple-700 transition duration-300">
            Volver al inicio
        </a>
    </div>

    <script>
        // Contador regresivo y redirección
        let timeLeft = 5;
        const countdownElement = document.getElementById('countdown');
        
        const countdown = setInterval(() => {
            timeLeft--;
            countdownElement.textContent = timeLeft;
            
            if (timeLeft <= 0) {
                clearInterval(countdown);
                window.location.href = '{{ url("/") }}';
            }
        }, 1000);
    </script>
@endsection