{{-- Premium Footer --}}
<footer class="premium-footer">
    <div class="footer-container">
        {{-- Left Section --}}
        <div class="footer-left">
            <div class="footer-brand">
                <div class="footer-logo">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 10a2 2 0 100-4 2 2 0 000 4z"/>
                        <path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM3 12c0 2.09.713 4.014 1.908 5.542A8.986 8.986 0 0112.065 14a8.984 8.984 0 017.092 3.458A8.991 8.991 0 003 12zm9 9a8.963 8.963 0 01-5.672-2.012A6.992 6.992 0 0112.065 16a6.991 6.991 0 015.689 2.92A8.964 8.964 0 0112 21z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class="footer-brand-text">
                    <span class="brand-name">Presensi Admin</span>
                    <span class="brand-version">v1.0.0</span>
                </div>
            </div>
        </div>

        {{-- Center Section --}}
        <div class="footer-center">
            <div class="footer-stats">
                <div class="footer-stat">
                    <span class="stat-label">GPS-Based</span>
                    <span class="stat-badge">Attendance System</span>
                </div>
            </div>
        </div>

        {{-- Right Section --}}
        <div class="footer-right">
            <span class="copyright">&copy; {{ date('Y') }} All rights reserved</span>
            <span class="footer-divider">•</span>
            <span class="powered-by">Powered by Laravel & Filament</span>
        </div>
    </div>
</footer>

<style>
.premium-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.75rem 1.5rem;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.03);
}

.dark .premium-footer {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
}

/* Left Section */
.footer-left {
    flex: 1;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.footer-logo {
    width: 1.75rem;
    height: 1.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.footer-logo svg {
    width: 1rem;
    height: 1rem;
    color: white;
}

.footer-brand-text {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.brand-name {
    font-size: 0.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-version {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 0.25rem;
}

/* Center Section */
.footer-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.footer-stats {
    display: flex;
    gap: 1rem;
}

.footer-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.stat-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

/* Right Section */
.footer-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.copyright {
    font-size: 0.75rem;
    color: #64748b;
}

.footer-divider {
    color: #cbd5e1;
}

.powered-by {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-center {
        display: none;
    }
}

@media (max-width: 768px) {
    .premium-footer {
        padding: 0.625rem 1rem;
    }

    .footer-right {
        display: none;
    }

    .footer-brand-text {
        flex-direction: column;
        gap: 0;
    }
}
</style>