@extends('errors.layout')

@section('title', 'Mode Maintenance')
@section('body-class', 'error-maintenance')

@section('content')
<div class="error-container">
    <div class="error-icon">
        <i class="fas fa-cog fa-spin"></i>
    </div>
    
    <div class="error-code">
        <i class="fas fa-wrench"></i>
    </div>
    
    <h1 class="error-title">Sedang Maintenance</h1>
    
    <p class="error-message">
        Sistem sedang dalam mode maintenance untuk meningkatkan kualitas layanan. 
        Kami akan segera kembali. Terima kasih atas kesabaran Anda.
    </p>
    
    <div class="error-actions">
        <a href="javascript:location.reload()" class="btn-primary-custom">
            <i class="fas fa-redo"></i>
            Coba Lagi
        </a>
        <a href="https://wa.me/6281117042204" target="_blank" class="btn-outline-custom">
            <i class="fab fa-whatsapp"></i>
            Hubungi Support
        </a>
    </div>
</div>

<style>
    .error-maintenance .error-icon {
        background-color: #E3F2FD;
        color: #2196F3;
    }
    
    .error-maintenance .error-code {
        font-size: 4rem;
        color: var(--blue-primary);
    }
    
    .error-maintenance .error-icon .fa-spin {
        animation: fa-spin 2s infinite linear;
    }
    
    @media (max-width: 767.98px) {
        .error-maintenance .error-code {
            font-size: 3rem;
        }
    }
</style>
@endsection