@extends('layouts.frontend')

@section('title', '503 - Service Unavailable')

@section('content')
<section class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
            <!-- Error Icon -->
            <div class="mb-8">
                <i class="fas fa-tools text-9xl text-orange-600"></i>
            </div>

            <!-- Error Code -->
            <h1 class="text-8xl font-bold text-gray-800 mb-4">503</h1>

            <!-- Error Message -->
            <h2 class="text-3xl font-semibold text-gray-700 mb-6">Service Unavailable</h2>

            <p class="text-xl text-gray-600 mb-8">
                We're currently performing maintenance. We'll be back shortly!
            </p>

            <!-- Maintenance Animation -->
            <div class="mb-8">
                <div class="inline-block">
                    <div class="flex items-center space-x-2">
                        <div class="w-4 h-4 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0s;"></div>
                        <div class="w-4 h-4 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.1s;">
                        </div>
                        <div class="w-4 h-4 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.2s;">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Button -->
            <div class="mb-8">
                <button onclick="location.reload()"
                    class="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition inline-flex items-center justify-center">
                    <i class="fas fa-redo mr-2"></i>
                    Refresh Page
                </button>
            </div>

            <!-- Additional Info -->
            <div class="mt-12 pt-8 border-t border-gray-300">
                <p class="text-gray-600 mb-4">
                    Expected downtime: Less than 30 minutes
                </p>
                <p class="text-gray-600">
                    For urgent inquiries, please contact us via WhatsApp:
                    <a href="https://wa.me/821032662956" target="_blank"
                        class="text-green-600 hover:text-green-800 font-semibold inline-flex items-center">
                        <i class="fab fa-whatsapp mr-1"></i>
                        +82 1021533894
                    </a>
                </p>
            </div>
        </div>
    </div>
</section>
@endsection