@extends('layouts.app')
@section('title', 'Erreur serveur')

@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 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-server" viewBox="0 0 16 16">
                        <path d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4V2.667z"/>
                        <path d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334a6.51 6.51 0 0 1-1.458.79C11.81 7.684 9.967 8 8 8c-1.966 0-3.809-.317-5.208-.876a6.508 6.508 0 0 1-1.458-.79z"/>
                        <path d="M14.667 11.668a6.51 6.51 0 0 1-1.458.789c-1.4.56-3.242.876-5.21.876-1.966 0-3.809-.316-5.208-.876a6.51 6.51 0 0 1-1.458-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667v-1.665z"/>
                    </svg>
                </div>
                <h1 class="display-1 fw-bold text-danger mb-3">500</h1>
                <h2 class="h4 text-muted mb-4">Erreur serveur</h2>
                <p class="mb-4">Une erreur interne s'est produite. Notre équipe technique a été notifiée.</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="{{ url()->previous() }}" class="gradient-outline px-4 py-2">
                        <i class="bi bi-arrow-left me-2"></i> Retour
                    </a>
                    <a href="{{ url('/') }}" class="gradient-btn px-4 py-2">
                        <i class="bi bi-house-door me-2"></i> Accueil
                    </a>
                    <a href="mailto:infos@africawebradio.bj" class="gradient-outline px-4 py-2">
                        <i class="bi bi-envelope me-2"></i> Support
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

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