@extends('main')

@section('title', 'Sedang Dalam Perbaikan - Maintenance')

@section('content')

<style>
/* 1. WRAPPER UTAMA - Memaksa Layout Vertikal & Center */
.maint-page-wrapper {
width: 100%;
min-height: 85vh;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
background: radial-gradient(circle at center, #1a2035 0%, #0d1117 100%);
color: #fff;
position: relative;
overflow: hidden;
padding: 60px 20px;
text-align: center !important;
}

/* 2. GEAR ANIMATION BOX */
.gear-box {
    position: relative;
    z-index: 2;
    width: 150px;
    height: 150px;
    margin: 0 auto 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gear {
    position: absolute;
    color: #4cc9f0;
}

.gear-big {
    font-size: 8rem;
    animation: spin-right 10s linear infinite;
    opacity: 0.9;
    text-shadow: 0 0 20px rgba(76, 201, 240, 0.4);
}

.gear-small {
    font-size: 4rem;
    margin-top: 60px;
    margin-left: 70px;
    color: #f72585;
    animation: spin-left 6s linear infinite;
    opacity: 0.8;
    text-shadow: 0 0 15px rgba(247, 37, 133, 0.4);
}

@keyframes spin-right { 100% { transform: rotate(360deg); } }
@keyframes spin-left { 100% { transform: rotate(-360deg); } }

/* 3. STATUS BADGE */
.status-badge {
    background: rgba(67, 97, 238, 0.15);
    border: 1px solid rgba(67, 97, 238, 0.3);
    color: #4cc9f0;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    margin-bottom: 25px;
    backdrop-filter: blur(5px);
    z-index: 2;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #f72585;
    border-radius: 50%;
    margin-right: 10px;
    animation: pulse 1.5s infinite;
}

/* 4. TYPOGRAPHY */
.maint-title {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 800;
    margin-bottom: 15px;
    background: linear-gradient(to right, #fff, #a5b4fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
}

.maint-desc {
    color: #94a3b8;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto 30px auto;
    line-height: 1.7;
    z-index: 2;
}

/* 5. PROGRESS LOADER */
.progress-loader {
    width: 280px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    margin: 0 auto 40px auto;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.progress-bar-fill {
    position: absolute;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #4361ee, #4cc9f0);
    animation: loading 2s ease-in-out infinite;
}

@keyframes loading {
    0% { left: -40%; }
    100% { left: 100%; }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(247, 37, 133, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(247, 37, 133, 0); }
    100% { box-shadow: 0 0 0 0 rgba(247, 37, 133, 0); }
}

/* 6. BUTTONS */
.btn-action-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 2;
}


</style>

<div class="maint-page-wrapper">
<!-- Status Badge -->
<div class="status-badge">
<span class="status-dot"></span> System Maintenance
</div>

<!-- Gear Animation -->
<div class="gear-box">
    <i class="bi bi-gear-fill gear gear-big"></i>
    <i class="bi bi-gear-wide-connected gear gear-small"></i>
</div>

<!-- Main Content -->
<h1 class="maint-title">Kami Sedang Berbenah</h1>

<p class="maint-desc">
    Sistem sedang melakukan pembaruan rutin untuk meningkatkan performa pengiriman Anda. 
    Mohon maaf atas ketidaknyamanan ini, kami akan segera kembali online.
</p>

<!-- Loader -->
<div class="progress-loader">
    <div class="progress-bar-fill"></div>
</div>

<!-- Actions -->
<div class="btn-action-group">
    <a href="mailto:support@dinologistics.com" class="btn btn-outline-light rounded-pill px-4">
        <i class="bi bi-envelope me-2"></i> Hubungi Support
    </a>
    <button onclick="window.location.reload()" class="btn btn-primary rounded-pill px-4">
        <i class="bi bi-arrow-clockwise me-2"></i> Cek Status
    </button>
</div>


</div>

@endsection