@extends('layouts.public-layout')

@section('title', 'Maintenance en cours - 503')

@section('content')
    <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 py-16">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <!-- Maintenance Icon -->
            <div class="mb-8">
                <div class="inline-flex items-center justify-center w-32 h-32 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 shadow-2xl mb-6 animate-pulse">
                    <i class="fas fa-tools text-white text-6xl"></i>
                </div>
            </div>

            <!-- Error Code -->
            <h1 class="text-9xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-indigo-500 to-blue-600 mb-4">
                503
            </h1>

            <!-- Error Title -->
            <h2 class="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
                Maintenance en cours
            </h2>

            <!-- Error Message -->
            <p class="text-xl text-slate-600 mb-8 max-w-2xl mx-auto leading-relaxed">
                Nous effectuons actuellement une maintenance pour améliorer nos services.
                Le site sera de nouveau accessible très bientôt.
            </p>

            <!-- Countdown or Expected Time -->
            <div class="inline-block bg-white px-8 py-6 rounded-xl shadow-lg border-2 border-blue-200 mb-12">
                <p class="text-sm text-slate-600 mb-2 font-medium">Durée estimée</p>
                <p class="text-3xl font-bold text-blue-600">
                    <i class="fas fa-clock mr-2"></i>
                    Quelques minutes
                </p>
            </div>

            <!-- Info Box -->
            <div class="bg-white rounded-xl shadow-lg p-8 max-w-2xl mx-auto border-t-4 border-blue-500">
                <h3 class="text-2xl font-bold text-slate-900 mb-6 flex items-center justify-center gap-2">
                    <i class="fas fa-info-circle text-blue-600"></i>
                    Pendant ce temps...
                </h3>
                <div class="grid md:grid-cols-2 gap-6 text-left">
                    <div class="flex items-start gap-3">
                        <div class="bg-blue-100 p-3 rounded-lg">
                            <i class="fas fa-coffee text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-slate-900 mb-1">Prenez une pause</h4>
                            <p class="text-sm text-slate-600">Profitez-en pour vous détendre un moment</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="bg-blue-100 p-3 rounded-lg">
                            <i class="fas fa-share-alt text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-slate-900 mb-1">Suivez-nous</h4>
                            <p class="text-sm text-slate-600">Consultez nos réseaux sociaux</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="bg-blue-100 p-3 rounded-lg">
                            <i class="fas fa-bell text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-slate-900 mb-1">Restez informé</h4>
                            <p class="text-sm text-slate-600">Nous vous notifierons dès que c'est prêt</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="bg-blue-100 p-3 rounded-lg">
                            <i class="fas fa-heart text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h4 class="font-bold text-slate-900 mb-1">Merci</h4>
                            <p class="text-sm text-slate-600">Votre patience est appréciée</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Auto Refresh Notice -->
            <div class="mt-8 text-sm text-slate-500">
                <i class="fas fa-sync-alt mr-2"></i>
                Cette page se rafraîchira automatiquement toutes les 30 secondes
            </div>
        </div>
    </section>

    @push('scripts')
    <script>
        // Auto refresh every 30 seconds
        setTimeout(function() {
            location.reload();
        }, 30000);
    </script>
    @endpush
@endsection