<!-- Footer Lengkap -->
<footer style="background: #0a3d91; color: #fff; margin-top: 60px;">
    <!-- Main Footer Content -->
    <div style="padding: 50px 20px 30px;">
        <div style="max-width: 1200px; margin: 0 auto;">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px;">

                <!-- Kolom 1: Tentang BPM ATK -->
                <div>
                    <h3 style="color: #ffd700; margin-bottom: 20px; font-size: 1.4rem; font-weight: bold;">Politeknik ATK Yogyakarta</h3>
                    <p style="line-height: 1.6; margin-bottom: 15px; opacity: 0.9;">
                        Politeknik ATK Yogyakarta berkomitmen untuk memberikan layanan pendidikan vokasi berkualitas tinggi melalui sistem penjaminan mutu yang komprehensif dan terintegrasi.
                    </p>
                    <div style="display: flex; gap: 15px;">
                        <a href="#" style="color: #fff; font-size: 1.5rem; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                            <i class="fab fa-facebook"></i>
                        </a>
                        <a href="#" style="color: #fff; font-size: 1.5rem; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" style="color: #fff; font-size: 1.5rem; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" style="color: #fff; font-size: 1.5rem; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>

                <!-- Kolom 2: Link Cepat -->
                <div>
                    <h3 style="color: #ffd700; margin-bottom: 20px; font-size: 1.4rem; font-weight: bold;">Link Cepat</h3>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="margin-bottom: 10px;">
                            <a href="{{ route('home') }}" style="color: #fff; text-decoration: none; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                                <i class="fas fa-home" style="margin-right: 8px;"></i>Beranda
                            </a>
                        </li>
                        <li style="margin-bottom: 10px;">
                            <a href="{{ route('profil') }}" style="color: #fff; text-decoration: none; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                                <i class="fas fa-user-circle" style="margin-right: 8px;"></i>Tentang Kami
                            </a>
                        </li>
                        <!-- <li style="margin-bottom: 10px;">
                            <a href="{{ route('layanan') }}" style="color: #fff; text-decoration: none; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                                <i class="fas fa-concierge-bell" style="margin-right: 8px;"></i>Layanan
                            </a> -->
                        </li>
                        <li style="margin-bottom: 10px;">
                            <a href="{{ route('artikel') }}" style="color: #fff; text-decoration: none; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                                <i class="fas fa-newspaper" style="margin-right: 8px;"></i>Artikel & Berita
                            </a>
                        </li>
                        <li style="margin-bottom: 10px;">
                            <a href="{{ route('download') }}" style="color: #fff; text-decoration: none; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                                <i class="fas fa-download" style="margin-right: 8px;"></i>Download
                            </a>
                        </li>
                        <li style="margin-bottom: 10px;">
                            <a href="{{ route('kontak') }}" style="color: #fff; text-decoration: none; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                                <i class="fas fa-envelope" style="margin-right: 8px;"></i>Kontak
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Kolom 3: Layanan Kami -->
                <div>
                    <h3 style="color: #ffd700; margin-bottom: 20px; font-size: 1.4rem; font-weight: bold;">Layanan Kami</h3>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="margin-bottom: 10px;">
                            <i class="fas fa-check" style="color: #ffd700; margin-right: 8px;"></i>Sertifikasi Mutu
                        </li>
                        <li style="margin-bottom: 10px;">
                            <i class="fas fa-check" style="color: #ffd700; margin-right: 8px;"></i>Akreditasi Lembaga
                        </li>
                        <li style="margin-bottom: 10px;">
                    </ul>
                </div>

                <!-- Kolom 4: Kontak & Info -->
                <div>
                    <h3 style="color: #ffd700; margin-bottom: 5px; font-size: 1.4rem; font-weight: bold;">Kontak Kami</h3>
                    <div style="margin-bottom: 15px;">
                        <i class="fas fa-map-marker-alt" style="color: #ffd700; margin-right: 8px;"></i>
                        <span><br>Jl. Prof. DR. Wirjono Projodikoro, Glugo, Panggungharjo, Sewon, Bantul, DIY 55188</span>
                    </div>
                    <div style="margin-bottom: 15px;">
                        <i class="fas fa-envelope" style="color: #ffd700; margin-right: 8px;"></i>
                        <span>info@atk.ac.id / humas@politeknikatk.ac.id</span>
                    </div>
                    <div style="margin-bottom: 15px;">
                        <i class="fab fa-whatsapp" style="color: #ffd700; margin-right: 7px;"></i>
                        <span>Telepon: (0274) 383727 WhatsApp (PMB): 081126719192</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer Bottom -->
    <div style="border-top: 1px solid rgba(255,255,255,0.1); padding: 20px;">
        <div style="max-width: 1200px; margin: 0 auto;">
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
                <div style="flex: 1;">
                    <p style="margin: 0; font-size: 0.9rem; opacity: 0.8;">
                        © {{ date('Y') }} Badan Penjaminan Mutu Politeknik ATK Yogyakarta . All rights reserved.
                    </p>
                </div>

                <!-- <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                    <a href="{{ route('peraturan') }}" style="color: #fff; text-decoration: none; font-size: 0.9rem; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                        Peraturan
                    </a>
                    <a href="{{ route('pernyataan-mutu') }}" style="color: #fff; text-decoration: none; font-size: 0.9rem; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                        Pernyataan Mutu
                    </a>
                    <a href="{{ route('akreditasi') }}" style="color: #fff; text-decoration: none; font-size: 0.9rem; opacity: 0.8; transition: opacity 0.3s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.8'">
                        Akreditasi
                    </a>
                </div> -->

                @guest
                    <div style="flex-shrink: 0;">
                        <a href="{{ route('login') }}" style="background: #ffd700; color: #0a3d91; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 0.9rem; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
                           onmouseover="this.style.background='#fff'; this.style.transform='translateY(-1px)'; this.style.boxShadow='0 4px 8px rgba(0,0,0,0.15)'"
                           onmouseout="this.style.background='#ffd700'; this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'">
                            🔐 Admin Login
                        </a>
                    </div>
                @endguest
                @auth
                    <div style="flex-shrink: 0;">
                        <span style="font-size: 0.9rem; opacity: 0.8;">👋 Welcome, {{ Auth::user()->name }}</span>
                    </div>
                @endauth
            </div>
        </div>
    </div>
</footer>

<!-- Back to Top Button -->
<button onclick="scrollToTop()" id="backToTopBtn" style="position: fixed; bottom: 30px; right: 30px; background: #0a3d91; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; opacity: 0; transition: all 0.3s ease; z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
    ↑
</button>

<script>
function scrollToTop() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// Show/hide back to top button
window.addEventListener('scroll', function() {
    const backToTopBtn = document.getElementById('backToTopBtn');
    if (window.pageYOffset > 300) {
        backToTopBtn.style.opacity = '1';
        backToTopBtn.style.pointerEvents = 'auto';
    } else {
        backToTopBtn.style.opacity = '0';
        backToTopBtn.style.pointerEvents = 'none';
    }
});
</script>

<style>
    /* Responsive Styles for Footer */
    @media (max-width: 768px) {
        .footer-main {
            padding: 30px 15px;
        }

        .footer-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }

        .footer-links li {
            margin-bottom: 8px;
        }

        .footer-bottom {
            padding: 15px;
            flex-direction: column;
            text-align: center;
            gap: 10px;
        }

        .footer-bottom-left {
            order: 2;
        }

        .footer-bottom-right {
            order: 1;
        }
    }

    @media (max-width: 480px) {
        .footer-main {
            padding: 20px 10px;
        }

        .footer-column h3 {
            font-size: 1.1rem;
        }

        .footer-contact-item {
            flex-direction: column;
            text-align: center;
            gap: 5px;
        }

        .footer-social-links {
            justify-content: center;
        }

        .footer-bottom p {
            font-size: 0.85rem;
        }
    }
</style>
