<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site în Mentenanță - {{ config('app.name') }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center">
    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden">
            <!-- Header cu gradient -->
            <div class="bg-gradient-to-r from-orange-500 to-red-500 p-8 text-center">
                <div class="inline-flex items-center justify-center w-24 h-24 bg-white/20 rounded-full mb-4 animate-pulse">
                    <i class="fas fa-tools text-white text-5xl"></i>
                </div>
                <h1 class="text-4xl font-bold text-white mb-2">
                    Site în Mentenanță
                </h1>
                <p class="text-orange-100 text-lg">
                    Revenim în curând!
                </p>
            </div>

            <!-- Content -->
            <div class="p-8 text-center">
                <div class="mb-6">
                    <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">
                        {{ $message ?? 'Site-ul este temporar indisponibil din cauza lucrărilor de mentenanță.' }}
                    </p>
                    <p class="text-gray-600 dark:text-gray-400">
                        Ne cerem scuze pentru inconvenient. Lucrăm pentru a îmbunătăți experiența ta.
                    </p>
                </div>

                <!-- Animated Icon -->
                <div class="flex justify-center items-center space-x-4 my-8">
                    <div class="w-3 h-3 bg-orange-500 rounded-full animate-bounce" style="animation-delay: 0s;"></div>
                    <div class="w-3 h-3 bg-orange-500 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
                    <div class="w-3 h-3 bg-orange-500 rounded-full animate-bounce" style="animation-delay: 0.4s;"></div>
                </div>

                <!-- Info Cards -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <i class="fas fa-clock text-orange-500 text-2xl mb-2"></i>
                        <p class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Estimare</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Câteva minute</p>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <i class="fas fa-shield-alt text-orange-500 text-2xl mb-2"></i>
                        <p class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Securitate</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Datele sunt în siguranță</p>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <i class="fas fa-rocket text-orange-500 text-2xl mb-2"></i>
                        <p class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Îmbunătățiri</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">Performanță sporită</p>
                    </div>
                </div>

                <!-- Contact Info -->
                <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        <i class="fas fa-envelope mr-2 text-orange-500"></i>
                        Pentru urgențe:
                        <a href="mailto:{{ setting('contact_email', config('mail.from.address')) }}" class="text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300 font-semibold">
                            {{ setting('contact_email', config('mail.from.address')) }}
                        </a>
                    </p>
                </div>

                <!-- Refresh Button -->
                <div class="mt-6">
                    <button onclick="location.reload()" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-semibold rounded-lg shadow-lg transition transform hover:scale-105">
                        <i class="fas fa-sync-alt mr-2"></i>
                        Reîncearcă
                    </button>
                </div>
            </div>

            <!-- Footer -->
            <div class="bg-gray-50 dark:bg-gray-900 px-8 py-4 text-center">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    &copy; {{ date('Y') }} {{ config('app.name') }}. Toate drepturile rezervate.
                </p>
            </div>
        </div>
    </div>

    <!-- Auto-refresh script (optional) -->
    <script>
        // Auto-refresh la fiecare 30 secunde pentru a verifica dacă mentenanța s-a terminat
        setTimeout(function() {
            location.reload();
        }, 30000);
    </script>
</body>
</html>
