@extends('errors.layout')

@section('title', 'Erreur serveur')
@section('code', '500')

@section('content')
    <div class="mb-6 flex justify-center">
        <div class="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center text-blue-500 ring-8 ring-blue-50/50">
            <i data-lucide="wrench" class="w-10 h-10"></i>
        </div>
    </div>

    <h1 class="text-3xl font-display font-bold text-boulanger-dark mb-3">
        Petit problème technique
    </h1>

    <p class="text-gray-600 mb-8 leading-relaxed">
        Aïe, une erreur inattendue s'est produite en rayon.
        Nos équipes techniques ont été notifiées et sont sur le coup !
    </p>

    <div class="flex flex-col gap-3">
        <button onclick="window.location.reload()" class="w-full inline-flex justify-center items-center px-6 py-3 bg-boulanger-orange border border-transparent rounded-full font-display font-semibold text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-boulanger-orange shadow-lg shadow-orange-200 transition transform hover:scale-[1.02]">
            <i data-lucide="refresh-cw" class="w-4 h-4 mr-2"></i>
            Réessayer
        </button>
        
        <a href="{{ url('/') }}" class="w-full inline-flex justify-center items-center px-6 py-3 bg-white border border-gray-200 rounded-full font-display font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 focus:outline-none transition">
            Retour à l'accueil
        </a>
    </div>
@endsection