<?php
require_once __DIR__ . '/config/session.php';

// Redirect logged-in non-admin users to their dashboard
if (!empty($_SESSION['user_id']) && ($_SESSION['role'] ?? '') === 'user') {
    header('Location: ' . BASE_URL . '/user/profil');
    exit;
}

require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/functions/helper.php';

$db = getDB();

// Profil Posyandu
$profil = $db->query("SELECT * FROM profil_posyandu WHERE id = 1")->fetch();

?>
<?php require_once 'includes/header_publik.php'; ?>

<!-- ================= HERO CAROUSEL ================= -->
<section class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
    <div x-data="carousel()" class="relative w-full h-[380px] sm:h-[420px] md:h-[520px] rounded-3xl overflow-hidden shadow-2xl group" x-init="startAutoSlide()">
    <!-- Slides -->
    <div class="relative w-full h-full">
        <template x-for="(slide, index) in slides" :key="index">
            <div x-show="active === index" x-transition:enter="transition ease-out duration-700" x-transition:enter-start="opacity-0 scale-105" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute inset-0 w-full h-full">
                <!-- Background -->
                <div class="absolute inset-0 bg-cover bg-center" :style="slide.bg ? 'background-image: url(' + slide.bg + ')' : ''" :class="!slide.bg ? 'bg-gradient-to-br from-primary to-primary-dark' : ''"></div>
                <div class="absolute inset-0 bg-black/40"></div>
                <!-- Content -->
                <div class="absolute inset-0 flex items-center justify-center px-4 sm:px-6 md:px-16">
                    <div class="max-w-3xl text-center text-white space-y-3 sm:space-y-5">
                        <div class="inline-flex items-center gap-2 px-3 py-1 sm:px-4 sm:py-1.5 bg-white/15 backdrop-blur-sm rounded-full text-[11px] sm:text-sm font-medium border border-white/20">
                            <span class="w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-gradient-to-r from-orange-400 to-orange-500 animate-pulse"></span>
                            <span x-text="slide.badge"></span>
                        </div>
                        <h1 class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-bold leading-tight drop-shadow-lg" x-html="slide.title"></h1>
                        <p class="text-xs sm:text-base md:text-lg text-white/85 max-w-2xl mx-auto leading-relaxed px-2 sm:px-0" x-text="slide.desc"></p>
                        <div class="flex flex-col sm:flex-row gap-2.5 sm:gap-3 justify-center pt-1 sm:pt-2 w-full px-6 sm:px-0">
                            <?php if(empty($_SESSION['user_id'])): ?>
                                <a href="login" class="px-5 py-2 sm:px-7 sm:py-2.5 bg-gradient-to-r from-orange-400 to-orange-500 text-white text-sm sm:text-base font-bold rounded-full hover:opacity-90 transition-all shadow-lg shadow-accent/30 transform hover:-translate-y-0.5 w-full sm:w-auto text-center flex items-center justify-center">
                                    <i class="fas fa-sign-in-alt mr-2"></i>Login
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <!-- Arrows -->
    <button @click="prev()" class="absolute left-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/15 hover:bg-white/30 backdrop-blur-sm text-white flex items-center justify-center transition-all border border-white/20 opacity-0 group-hover:opacity-100">
        <i class="fas fa-chevron-left text-lg"></i>
    </button>
    <button @click="next()" class="absolute right-4 top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/15 hover:bg-white/30 backdrop-blur-sm text-white flex items-center justify-center transition-all border border-white/20 opacity-0 group-hover:opacity-100">
        <i class="fas fa-chevron-right text-lg"></i>
    </button>

    <!-- Dots -->
    <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex items-center gap-2.5">
        <template x-for="(slide, index) in slides" :key="index">
            <button @click="active = index; resetAutoSlide()" :class="active === index ? 'w-7 bg-white' : 'w-2.5 bg-white/50'" class="h-2.5 rounded-full transition-all duration-300"></button>
        </template>
    </div>

    <script>
    function carousel() {
        return {
            active: 0,
            timer: null,
            slides: [
                {
                    badge: '<?= escape($profil['nama_posyandu'] ?? 'Posyandu Tunas Bangsa') ?>',
                    title: 'Sehatkan Ibu,<br><span class="text-accent">Cerdaskan</span> Generasi',
                    desc: '<?= escape($profil['deskripsi'] ?? 'Akses informasi jadwal kegiatan, rekam medis kehamilan, serta artikel edukasi terkini secara cepat dan mudah.') ?>',
                    bg: '<?= !empty($profil['foto_1']) ? BASE_URL . '/assets/uploads/profil/' . escape($profil['foto_1']) : '' ?>'
                },
                {
                    badge: 'Layanan Kesehatan',
                    title: 'Pantau Kehamilan<br><span class="text-accent">Setiap Saat</span>',
                    desc: 'Cek jadwal pemeriksaan, hitung usia kehamilan, dan dapatkan artikel edukasi kesehatan ibu & anak kapan saja.',
                    bg: '<?= !empty($profil['foto_2']) ? BASE_URL . '/assets/uploads/profil/' . escape($profil['foto_2']) : '' ?>'
                },
                {
                    badge: 'Posyandu Digital',
                    title: 'Solusi Modern<br><span class="text-accent">Desa Sehat</span>',
                    desc: 'Transformasi layanan posyandu menjadi lebih efisien, transparan, dan terjangkau bagi seluruh warga desa.',
                    bg: '<?= !empty($profil['foto_3']) ? BASE_URL . '/assets/uploads/profil/' . escape($profil['foto_3']) : '' ?>'
                }
            ],
            next() { this.active = (this.active + 1) % this.slides.length; this.resetAutoSlide(); },
            prev() { this.active = (this.active - 1 + this.slides.length) % this.slides.length; this.resetAutoSlide(); },
            startAutoSlide() { this.timer = setInterval(() => { this.active = (this.active + 1) % this.slides.length }, 5000); },
            resetAutoSlide() { clearInterval(this.timer); this.startAutoSlide(); }
        }
    }
    </script>
    </div>
</section>

<?php require_once 'includes/footer_publik.php'; ?>


