<footer class="bg-white dark:bg-slate-900 border-t border-gray-200 dark:border-slate-800 mt-auto transition-colors duration-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Brand Section -->
            <div class="space-y-4">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 flex items-center justify-center shrink-0">
                        <img src="<?php echo e(asset('storage/logo.png')); ?>" alt="Logo" class="w-full h-full object-contain drop-shadow-sm">
                    </div>
                    <span class="text-xl font-bold text-slate-800 dark:text-white">Klinik Kesehatan Digital</span>
                </div>
                <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed pr-4">
                    Memberikan pelayanan kesehatan terbaik dengan dukungan teknologi digital mutakhir untuk kenyamanan dan kesehatan Anda.
                </p>
            </div>

            <!-- Quick Links -->
            <div class="md:pl-8">
                <h3 class="text-sm font-semibold text-slate-800 dark:text-white uppercase tracking-wider mb-4">Akses Cepat</h3>
                <ul class="space-y-2">
                    <li>
                        <a href="<?php echo e(route('dashboard')); ?>" class="text-sm text-slate-500 dark:text-slate-400 hover:text-teal-600 dark:hover:text-teal-400 transition-colors flex items-center gap-2 group">
                            <i class="fas fa-chevron-right text-[10px] text-teal-500 transition-transform group-hover:translate-x-1"></i> 
                            Dashboard
                        </a>
                    </li>
                    <li>
                        <a href="<?php echo e(route('profile.edit')); ?>" class="text-sm text-slate-500 dark:text-slate-400 hover:text-teal-600 dark:hover:text-teal-400 transition-colors flex items-center gap-2 group">
                            <i class="fas fa-chevron-right text-[10px] text-teal-500 transition-transform group-hover:translate-x-1"></i> 
                            Pengaturan Profil
                        </a>
                    </li>
                    <li>
                        <a href="#" class="text-sm text-slate-500 dark:text-slate-400 hover:text-teal-600 dark:hover:text-teal-400 transition-colors flex items-center gap-2 group">
                            <i class="fas fa-chevron-right text-[10px] text-teal-500 transition-transform group-hover:translate-x-1"></i> 
                            Bantuan & Dukungan
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Contact/Social -->
            <div>
                <h3 class="text-sm font-semibold text-slate-800 dark:text-white uppercase tracking-wider mb-4">Hubungi Kami</h3>
                <ul class="space-y-3">
                    <li class="flex items-start gap-3 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors">
                        <div class="w-6 h-6 rounded-full bg-teal-50 dark:bg-slate-800 flex items-center justify-center shrink-0 mt-0.5">
                            <i class="fas fa-map-marker-alt text-teal-500 text-xs"></i>
                        </div>
                        <span>Jl. Kesehatan Bangsa No. 12<br>Jakarta Selatan, 12345</span>
                    </li>
                    <li class="flex items-center gap-3 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors">
                        <div class="w-6 h-6 rounded-full bg-teal-50 dark:bg-slate-800 flex items-center justify-center shrink-0">
                            <i class="fas fa-phone-alt text-teal-500 text-xs"></i>
                        </div>
                        <span>+62 896 0338 9873</span>
                    </li>
                    <li class="flex items-center gap-3 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors">
                        <div class="w-6 h-6 rounded-full bg-teal-50 dark:bg-slate-800 flex items-center justify-center shrink-0">
                            <i class="fas fa-envelope text-teal-500 text-xs"></i>
                        </div>
                        <span>info@klinikdigital.com</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="mt-8 pt-6 border-t border-gray-200 dark:border-slate-800 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-xs text-slate-500 dark:text-slate-400 font-medium">
                &copy; <?php echo e(date('Y')); ?> Klinik Kesehatan Digital. Hak Cipta Dilindungi.
            </p>
            <div class="flex space-x-3">
                <a href="#" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-teal-500 hover:text-white dark:hover:bg-teal-500 dark:hover:text-white transition-all">
                    <i class="fab fa-facebook-f text-sm"></i>
                </a>
                <a href="#" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-teal-500 hover:text-white dark:hover:bg-teal-500 dark:hover:text-white transition-all">
                    <i class="fab fa-twitter text-sm"></i>
                </a>
                <a href="#" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-teal-500 hover:text-white dark:hover:bg-teal-500 dark:hover:text-white transition-all">
                    <i class="fab fa-instagram text-sm"></i>
                </a>
                <a href="#" class="w-8 h-8 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-teal-500 hover:text-white dark:hover:bg-teal-500 dark:hover:text-white transition-all">
                    <i class="fab fa-whatsapp text-sm"></i>
                </a>
            </div>
        </div>
    </div>
</footer>
<?php /**PATH C:\laragon\www\KESEHATAN\resources\views/layouts/footer.blade.php ENDPATH**/ ?>