</main>

<!-- Footer -->
<footer class="glass-nav text-white pt-10 md:pt-12 pb-6 md:pb-8 border-t-[6px] border-accent mt-auto">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-12 mb-10">
            <!-- Brand (Kiri) -->
            <div>
                <div class="flex items-center gap-3 mb-4">
                    <img src="<?= getLogoUrl() ?>" alt="Logo" class="w-11 h-11 object-contain drop-shadow-sm">
                    <h3 class="text-lg font-bold tracking-wide"><?= escape($nama_posyandu ?? APP_NAME) ?></h3>
                </div>
                <p class="text-white/70 text-sm leading-relaxed max-w-md">
                    <?= escape($profil_web['deskripsi'] ?? 'Pusat layanan kesehatan terpadu bagi ibu hamil, bayi, dan balita di lingkungan Anda. Bersama mewujudkan generasi sehat dan cerdas.') ?>
                </p>
            </div>

            <!-- Hubungi Kami (Kanan) -->
            <div class="md:text-right">
                <h4 class="text-lg font-semibold mb-4 text-white">Hubungi Kami</h4>
                <ul class="space-y-3 text-sm text-white/80">
                    <li class="flex md:justify-end items-start gap-3">
                        <i class="fas fa-map-marker-alt mt-1 text-accent md:order-2"></i>
                        <span class="md:max-w-xs"><?= escape($profil_web['alamat'] ?? 'Desa Mentawak Ulu, Kec. Air Hitam, Kab. Merangin, Jambi') ?></span>
                    </li>
                    <li class="flex md:justify-end items-center gap-3">
                        <i class="fas fa-envelope text-accent md:order-2"></i>
                        <span><?= escape($profil_web['email'] ?? 'kontak@posyandu.desa.id') ?></span>
                    </li>
                    <?php if (!empty($profil_web['telepon'])): ?>
                    <li class="flex md:justify-end items-center gap-3">
                        <i class="fas fa-phone text-accent md:order-2"></i>
                        <span><?= escape($profil_web['telepon']) ?></span>
                    </li>
                    <?php endif; ?>
                </ul>
            </div>
        </div>

        <!-- Bottom -->
        <div class="border-t border-white/10 pt-5 md:pt-6 flex flex-col md:flex-row justify-between items-center gap-2 text-xs md:text-sm text-white/50 text-center md:text-left">
            <p>&copy; <?= date('Y') ?> <?= escape($nama_posyandu ?? APP_NAME) ?>. All rights reserved.</p>
            <p>Dibangun oleh Asma Chairunnisa</p>
        </div>
    </div>
</footer>

<style>
@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -20px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate-fade-in-down { animation: fadeInDown 0.5s ease-out forwards; }
</style>

<!-- Main JS -->
<script src="<?= BASE_URL ?>/assets/js/main.js"></script>
</body>
</html>


