@extends('layouts.welcome')
@section('title', 'Page non trouvée')

@section('content')
<div class="container">
    <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-md-8 text-center">
            <div class="error-container bg-white p-5 border-0 rounded-4 shadow-lg">
                <div class="error-icon mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#dc3545" class="bi bi-exclamation-octagon" viewBox="0 0 16 16">
                        <path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.457A.5.5 0 0 1 0 11.104V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1z"/>
                        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                    </svg>
                </div>
                <h1 class="display-1 fw-bold text-danger mb-3">404</h1>
                <h2 class="h4 text-muted mb-4">Page non trouvée</h2>
                <p class="mb-4">La page que vous recherchez a peut-être été supprimée ou est temporairement indisponible.</p>
                <a href="{{ url('/') }}" class="gradient-btn px-4 py-2">
                    <i class="bi bi-house-door me-2"></i> Retour à l'accueil
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .min-vh-100 {
        min-height: 100vh;
    }
    .error-container {
        max-width: 500px;
        margin: 0 auto;
    }
</style>
@endsection