<?= $this->extend('layout/template'); ?>

<?= $this->section('content'); ?>
<?php
$firstName = !empty($products) ? $products[0]['name'] : 'MIE NYINYIR';
$firstSubtitle = !empty($products) ? $products[0]['subtitle'] : 'Pedasnya Bikin Nagih';
$firstDesc = !empty($products) ? $products[0]['description'] : 'Deskripsi belum tersedia.';
$firstIng = !empty($products) ? $products[0]['ingredients'] : 'Ingredients belum tersedia.';
$firstRasa = !empty($products) ? ($products[0]['kategori_rasa'] ?? 'Pedas, Gurih') : 'Pedas, Gurih';
?>
<section id="hero-section" class="relative h-screen w-full overflow-hidden bg-[#fcfbf9]">

    <div id="hero-bg" class="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat will-change-transform"
        style="background-image: url('<?= base_url($settings['hero_image'] ?? 'assets/img/gb_hero/hero.jpg') ?>');">
    </div>

    <div class="absolute bottom-0 left-0 w-full leading-none z-10 pointer-events-none">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"
            class="w-full h-48 md:h-72 lg:h-[350px]">
            <path fill="#fcfbf9" fill-opacity="1"
                d="M0,160 C280,350 440,-30 720,160 C1000,350 1160,-30 1440,160 L1440,320 L0,320 Z"></path>
        </svg>
    </div>

    <div id="hero-text-wrapper" class="absolute inset-0 z-20 pointer-events-none will-change-transform">
        <div class="absolute left-1/2 transform -translate-x-1/2 
                    top-1/2 -translate-y-1/2 
                    lg:top-auto lg:bottom-[15%] lg:translate-y-0 
                    w-full text-center">

            <h1
                class="font-bebas text-[6rem] md:text-[9rem] lg:text-[12rem] leading-none text-brand-dark tracking-wide drop-shadow-sm">
                MIE NYINYIR
            </h1>
            <p class="font-bold tracking-[0.2em] text-xs md:text-sm text-brand-dark mt-2 uppercase">
                Best flavour of your freshness
            </p>
        </div>
    </div>

</section>
<section class="w-full relative bg-[#faebe6] overflow-hidden font-poppins">

    <div class="h-10 md:h-12 w-full z-20 relative"
        style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'40\' height=\'40\'><rect width=\'40\' height=\'40\' fill=\'%23f4eee0\'/><rect width=\'20\' height=\'20\' fill=\'%23670303\'/><rect x=\'20\' y=\'20\' width=\'20\' height=\'20\' fill=\'%23670303\'/></svg>'); background-repeat: repeat;">
    </div>

    <div class="flex flex-col md:flex-row w-full min-h-[600px]">

        <div class="w-full md:w-1/2 relative p-10 lg:p-20 flex flex-col justify-center">

            <svg class="absolute top-10 right-20 w-12 h-12 text-[#144a2a] opacity-80" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path d="M12 2C12 2 14.5 9.5 22 12C14.5 14.5 12 22 12 22C12 22 9.5 14.5 2 12C9.5 9.5 12 2 12 2Z" />
            </svg>
            <svg class="absolute top-20 right-8 w-8 h-8 text-[#144a2a] opacity-80" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path d="M12 2C12 2 14.5 9.5 22 12C14.5 14.5 12 22 12 22C12 22 9.5 14.5 2 12C9.5 9.5 12 2 12 2Z" />
            </svg>

            <svg class="absolute bottom-16 right-32 w-10 h-10 text-[#144a2a] opacity-80" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path d="M12 2C12 2 14.5 9.5 22 12C14.5 14.5 12 22 12 22C12 22 9.5 14.5 2 12C9.5 9.5 12 2 12 2Z" />
            </svg>
            <svg class="absolute bottom-6 right-20 w-14 h-14 text-[#144a2a] opacity-80" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path d="M12 2C12 2 14.5 9.5 22 12C14.5 14.5 12 22 12 22C12 22 9.5 14.5 2 12C9.5 9.5 12 2 12 2Z" />
            </svg>

            <div class="relative z-10 max-w-lg">
                <h1 class="font-black text-4xl lg:text-5xl text-[#144a2a] mb-2 uppercase tracking-wide">
                    MIE NYINYIR
                </h1>

                <h2 class="font-extrabold text-[2rem] lg:text-[2.5rem] text-[#8b1c1c] mb-6 leading-[1.15]">
                    <?= $settings['about_title'] ?? 'Sensasi Pedasnya<br>Bikin Nagih Terus!' ?>
                </h2>

                <p class="text-[#144a2a] text-[15px] lg:text-base mb-10 leading-relaxed font-medium">
                    <?= $settings['about_text'] ?? 'Selamat datang di Mie Nyinyir! Kami menyajikan olahan mie kenyal dengan racikan bumbu rahasia yang gurih dan berbagai pilihan level pedas yang siap menantang nyalimu.' ?>
                </p>

                <a href="<?= base_url('menu'); ?>"
                    class="inline-block px-10 py-3 rounded-[50px] border-2 border-[#144a2a] text-[#144a2a] font-bold uppercase tracking-widest text-sm hover:bg-[#144a2a] hover:text-[#faebe6] transition-all duration-300 w-max">
                    PESAN SEKARANG
                </a>
            </div>

        </div>

        <div class="w-full md:w-1/2 h-[400px] md:h-auto bg-[#e5e7eb] relative group overflow-hidden">

            <div id="image-carousel"
                class="flex w-full h-full transition-transform duration-500 ease-in-out absolute inset-0">
                <?php if (!empty($sliders)): ?>
                    <?php foreach ($sliders as $slider): ?>
                        <img src="<?= base_url($slider['image']) ?>" class="min-w-full h-full object-cover flex-shrink-0"
                            alt="Gambar Menu">
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="min-w-full h-full bg-gray-200 flex items-center justify-center text-gray-500 font-medium">
                        Belum ada gambar
                    </div>
                <?php endif; ?>
            </div>

            <button onclick="prevSlide()"
                class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/90 hover:bg-white text-black p-3 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </button>

            <button onclick="nextSlide()"
                class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/90 hover:bg-white text-black p-3 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </button>

        </div>

    </div>
</section>

<section class="py-5 bg-[#a11c12] w-full text-center">
    <div class="container mx-auto px-6">
        <div class="flex justify-center mb-6">
            <svg class="w-12 h-12 text-brand-yellow" viewBox="0 0 100 100" fill="currentColor">
                <circle cx="50" cy="30" r="14" />
                <circle cx="28" cy="46" r="14" />
                <circle cx="72" cy="46" r="14" />
                <circle cx="36" cy="70" r="14" />
                <circle cx="64" cy="70" r="14" />
            </svg>
        </div>

        <h2 class="text-3xl md:text-4xl font-bold text-white mb-3 font-poppins tracking-wide">Our Menu</h2>
        <p class="text-sm text-brand-yellow mb-14 font-medium tracking-wider">Pilihan mie terbaik yang siap memanjakan
            lidah Anda</p>

        <div
            class="flex lg:flex-wrap lg:justify-center gap-6 max-w-7xl mx-auto overflow-x-auto lg:overflow-x-visible snap-x snap-mandatory pb-8 scroll-smooth [&::-webkit-scrollbar]:hidden [-ms-overflow-style:'none'] [scrollbar-width:'none']">

            <?php if (!empty($products)): ?>
                <?php foreach ($products as $prod): ?>
                    <div
                        class="bg-brand-yellow p-4 rounded-[2rem] shadow-xl transform hover:-translate-y-2 transition duration-300 shrink-0 snap-center w-[80%] sm:w-[45%] md:w-[30%] lg:w-[240px]">
                        <div class="w-full aspect-square rounded-2xl overflow-hidden mb-4 bg-white/30">
                            <img src="<?= base_url($prod['image']) ?>" class="w-full h-full object-cover"
                                alt="<?= esc($prod['name']) ?>">
                        </div>
                        <div class="flex justify-between items-center px-1 text-[#083d22]">
                            <span
                                class="font-black text-xl font-poppins tracking-tight uppercase"><?= esc($prod['name']) ?></span>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <p class="text-white w-full text-center">Belum ada highlight menu yang ditambahkan.</p>
            <?php endif; ?>

        </div>
        
        <div class="mt-8 flex flex-col items-center justify-center">
            <a href="<?= base_url('menu'); ?>"
                class="text-brand-yellow font-semibold tracking-widest text-sm mb-2 hover:text-white transition">Show Me
                More</a>
            <svg class="w-16 h-3 text-brand-yellow" viewBox="0 0 100 20" stroke="currentColor" fill="none"
                stroke-width="4" stroke-linecap="round">
                <path d="M0 10 Q 12.5 0 25 10 T 50 10 T 75 10 T 100 10" />
            </svg>
        </div>
    </div>
</section>

<section class="py-16 bg-[#fffcf5] relative overflow-hidden">
    <div class="container mx-auto px-6 relative z-10">
        <div class="flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-8">

            <div class="w-full order-first lg:hidden flex flex-col text-center z-20 -mb-4">
                <h2 id="product-title-mobile"
                    class="font-bebas text-5xl text-[#a11c12] leading-none mb-2 tracking-wider drop-shadow-sm transition-opacity duration-300 font-bold uppercase opacity-100">
                    <?= esc($firstName) ?>
                </h2>
                <p id="product-subtitle-mobile"
                    class="font-bold text-gray-800 text-sm transition-opacity duration-300 opacity-100">
                    <?= esc($firstSubtitle) ?>
                </p>
                <p id="product-desc"
                    class="text-sm text-gray-600 mb-8 leading-relaxed transition-opacity duration-300 opacity-100">
                    <?= esc($firstDesc) ?>
                </p>
            </div>

            <div
                class="w-full lg:w-1/4 order-2 lg:order-1 flex flex-col items-center lg:items-start text-center lg:text-left">
                <h3 class="font-bebas text-3xl mb-4 text-[#a11c12] tracking-wide font-bold">INGREDIENTS</h3>

                <p id="product-ingredients"
                    class="text-sm text-gray-600 mb-8 text-justify leading-relaxed transition-opacity duration-300 opacity-100">
                    <?= esc($firstIng) ?>
                </p>

                <div id="product-tags-container"
                    class="flex flex-row flex-wrap gap-3 w-full justify-center lg:justify-start items-center mt-2">
                    <?php
                    $rasaArray = array_map('trim', explode(',', $firstRasa));
                    foreach ($rasaArray as $rasa):
                        if (empty($rasa))
                            continue;

                        // Menentukan emoji berdasarkan kata kunci menggunakan PHP
                        $rasaLower = strtolower($rasa);
                        $emoji = '✨'; // Emoji default
                    
                        if (strpos($rasaLower, 'pedas') !== false) {
                            $emoji = '🌶️';
                        } elseif (strpos($rasaLower, 'gurih') !== false) {
                            $emoji = '🧄';
                        } elseif (strpos($rasaLower, 'manis') !== false) {
                            $emoji = '🍯';
                        } elseif (strpos($rasaLower, 'asin') !== false) {
                            $emoji = '🧂';
                        } elseif (strpos($rasaLower, 'asam') !== false) {
                            $emoji = '🍋';
                        } elseif (strpos($rasaLower, 'keju') !== false) {
                            $emoji = '🧀';
                        }
                        ?>
                        <div
                            class="flex flex-row items-center gap-2 bg-[#ffedec] px-4 py-2 rounded-full shadow-sm border border-red-100 transition-transform hover:-translate-y-1">
                            <span class="text-base leading-none"><?= $emoji ?></span>
                            <span class="text-[11px] font-bold text-[#a11c12] uppercase tracking-wider mt-[2px]">
                                <?= esc($rasa) ?>
                            </span>
                        </div>
                    <?php endforeach; ?>
                </div>

            </div>

            <div class="w-full lg:w-2/4 order-1 lg:order-2 flex justify-center items-center relative h-[450px]">

                <button onclick="prevProductSlide()"
                    class="absolute left-0 z-30 w-10 h-10 bg-[#a11c12] text-white rounded-full flex items-center justify-center hover:bg-red-800 transition shadow-lg transform -translate-y-1/2 top-1/2 cursor-pointer">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                        </path>
                    </svg>
                </button>

                <div
                    class="absolute w-[280px] h-[320px] md:w-[320px] md:h-[380px] bg-brand-yellow rounded-2xl transform rotate-6 shadow-2xl z-0 transition-transform duration-500 hover:rotate-12">
                </div>

                <div id="carousel-touch-area"
                    class="relative w-[240px] h-[340px] md:w-[280px] md:h-[400px] z-10 flex items-center justify-center touch-pan-y">

                    <?php if (!empty($products)): ?>
                        <?php foreach ($products as $index => $prod): ?>
                            <div class="product-slide absolute w-full h-full transition-all duration-500 <?= $index == 0 ? 'opacity-100 scale-100 z-10' : 'opacity-0 scale-95 z-0' ?> flex items-center justify-center"
                                data-name="<?= esc($prod['name']) ?>" data-subtitle="<?= esc($prod['subtitle']) ?>"
                                data-desc="<?= esc($prod['description']) ?>" data-ingredients="<?= esc($prod['ingredients']) ?>"
                                data-rasa="<?= esc($prod['kategori_rasa'] ?? '') ?>">

                                <img src="<?= base_url($prod['image']) ?>"
                                    class="w-full h-full object-cover rounded-2xl shadow-xl border-4 border-white"
                                    alt="<?= esc($prod['name']) ?>">

                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>

                </div>

                <button onclick="nextProductSlide()"
                    class="absolute right-0 z-30 w-10 h-10 bg-[#a11c12] text-white rounded-full flex items-center justify-center hover:bg-red-800 transition shadow-lg transform -translate-y-1/2 top-1/2 cursor-pointer">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </button>
            </div>

            <div class="w-full lg:w-1/4 order-3 lg:order-3 flex flex-col text-center lg:text-left">

                <div class="hidden lg:block">
                    <h2 id="product-title-desktop"
                        class="font-bebas text-5xl md:text-5xl text-[#a11c12] leading-none mb-3 tracking-wider drop-shadow-sm transition-opacity duration-300 font-bold uppercase opacity-100">
                        <?= esc($firstName) ?>
                    </h2>
                    <p id="product-subtitle-desktop"
                        class="font-bold text-gray-800 text-sm mb-3 transition-opacity duration-300 opacity-100">
                        <?= esc($firstSubtitle) ?>
                    </p>

                    <p id="product-desc-desktop"
                        class="text-sm text-gray-600 mb-8 leading-relaxed transition-opacity duration-300 opacity-100 text-justify">
                        <?= esc($firstDesc) ?>
                    </p>
                </div>
            </div>

        </div>
    </div>
</section>
<section class="py-16 md:py-24 relative overflow-hidden bg-[#9b2423]">
    <div class="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat opacity-60 mix-blend-multiply"
        style="background-image: url('/assets/img/gb_others/mie2.jpg');"></div>

    <div class="container mx-auto px-6 relative z-10">
        <div class="flex flex-col md:flex-row items-center justify-center gap-12 md:gap-20">
            <div class="w-full md:w-5/12 flex justify-center md:justify-end">
                <img src="/assets/img/gb_others/mee.png" alt="Mee Hanci"
                    class="w-full h-auto object-cover object-center drop-shadow-2xl hover:scale-105 transition-transform duration-500">
            </div>

            <div class="w-full md:w-7/12 text-center md:text-left">
                <h2
                    class="text-[#fbbd42] font-black text-4xl md:text-5xl lg:text-6xl mb-3 tracking-tight drop-shadow-md">
                    Lapar?
                </h2>
                <p class="text-white font-semibold text-2xl md:text-3xl lg:text-4xl leading-snug mb-8 drop-shadow">
                    Tenang, kami bisa antar ke<br class="hidden md:block">rumah kamu!
                </p>

                <a href="https://mienyinyir.com/eorder/" target="_blank"
                    class="inline-block bg-[#fbbd42] text-[#9b2423] font-black px-10 py-4 rounded-full hover:bg-white hover:text-[#9b2423] transition-all duration-300 shadow-xl hover:shadow-2xl hover:-translate-y-1 text-lg mb-10 tracking-widest uppercase">
                    PESAN SEKARANG!
                </a>

                <div class="w-full">
                    <p
                        class="text-white/90 text-sm md:text-base font-semibold mb-4 tracking-wide uppercase text-center md:text-left">
                        Tersedia juga di aplikasi kesayanganmu:
                    </p>

                    <div class="flex flex-wrap items-center justify-center md:justify-start gap-3 sm:gap-4">

                        <a href="#" target="_blank"
                            class="bg-white/95 px-4 sm:px-6 py-2.5 rounded-full shadow-lg hover:-translate-y-1 hover:shadow-xl hover:bg-white transition-all flex items-center justify-center gap-2 group">
                            <img src="/assets/img/gb_others/logo-gofood.png" alt="GoFood Logo"
                                class="h-5 sm:h-6 object-contain group-hover:scale-110 transition-transform">
                            <span class="font-bold text-gray-800 text-sm sm:text-base">GoFood</span>
                        </a>

                        <a href="#" target="_blank"
                            class="bg-white/95 px-4 sm:px-6 py-2.5 rounded-full shadow-lg hover:-translate-y-1 hover:shadow-xl hover:bg-white transition-all flex items-center justify-center gap-2 group">
                            <img src="/assets/img/gb_others/logo-grabfood.png" alt="GrabFood Logo"
                                class="h-5 sm:h-6 object-contain group-hover:scale-110 transition-transform">
                            <span class="font-bold text-gray-800 text-sm sm:text-base">GrabFood</span>
                        </a>

                        <a href="#" target="_blank"
                            class="bg-white/95 px-4 sm:px-6 py-2.5 rounded-full shadow-lg hover:-translate-y-1 hover:shadow-xl hover:bg-white transition-all flex items-center justify-center gap-2 group">
                            <img src="/assets/img/gb_others/logo-shopeefood.png" alt="ShopeeFood Logo"
                                class="h-5 sm:h-6 object-contain group-hover:scale-110 transition-transform">
                            <span class="font-bold text-gray-800 text-sm sm:text-base">ShopeeFood</span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php
// Logika Filter Data: Max 2 Pengumuman & Max 2 Berita
$today = date('Y-m-d');
$boardItems = [];

// 1. Ambil 2 Pengumuman
$pengumumanRaw = isset($settings['pengumuman_list']) ? json_decode($settings['pengumuman_list'], true) : [];
$countP = 0;
if(is_array($pengumumanRaw)) {
    foreach($pengumumanRaw as $p) {
        $isActive = isset($p['status']) ? $p['status'] : '1';
        $isExpired = (!empty($p['end_date']) && $p['end_date'] < $today);
        if($isActive == '1' && !$isExpired) {
            $p['type'] = 'Pengumuman'; // Set tipe manual
            $p['badge_color'] = 'bg-yellow-400 text-yellow-900';
            $boardItems[] = $p;
            $countP++;
            if($countP >= 2) break; // Berhenti jika sudah 2
        }
    }
}

// 2. Ambil 2 Berita
$beritaRaw = isset($settings['berita_list']) ? json_decode($settings['berita_list'], true) : [];
$countB = 0;
if(is_array($beritaRaw)) {
    foreach($beritaRaw as $b) {
        $isActive = isset($b['status']) ? $b['status'] : '1';
        $isExpired = (!empty($b['end_date']) && $b['end_date'] < $today);
        if($isActive == '1' && !$isExpired) {
            $b['type'] = 'Berita';
            $b['label'] = 'Info Terbaru'; // Samakan key label untuk view
            $b['badge_color'] = 'bg-red-600 text-white';
            $boardItems[] = $b;
            $countB++;
            if($countB >= 2) break; // Berhenti jika sudah 2
        }
    }
}

// Rotasi acak untuk efek kertas ditempel miring
$rotations = ['-rotate-2', 'rotate-2', '-rotate-3', 'rotate-1'];
?>

<section class="pb-32 bg-[#fcfbf9] relative pt-20">
    <div class="container mx-auto px-6">
        
        <div class="max-w-6xl mx-auto shadow-[0_20px_50px_rgba(0,0,0,0.5)] p-10 md:p-14 relative bg-[#2a5941] overflow-hidden border-[16px] border-[#6b4423] rounded-xl"
            style="background-image: radial-gradient(circle at center, #35684e 0%, #1b3a29 100%);">
            
            <div class="text-center mb-16 relative z-30 flex justify-center">
                <div class="relative inline-block bg-[#fdfbf7] text-[#3e2723] px-10 py-3 shadow-lg font-bebas text-4xl -rotate-1 border border-gray-200">
                    <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 w-24 h-6 bg-white/40 backdrop-blur-md rotate-2 shadow-sm border border-white/20"></div>
                    PAPAN PENGUMUMAN
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 md:gap-8 relative z-30 px-2">
                <?php if(!empty($boardItems)): ?>
                    <?php foreach($boardItems as $index => $item): 
                        // Ambil rotasi berdasarkan index array agar variatif
                        $rotateClass = $rotations[$index % count($rotations)];
                    ?>
                    
                    <a href="<?= base_url('berita') ?>" class="block relative bg-[#fdfbf7] p-4 pb-6 shadow-xl transform <?= $rotateClass ?> hover:rotate-0 hover:z-40 hover:scale-105 transition-all duration-300 w-full border border-gray-200">
                        
                        <div class="absolute -top-4 left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full bg-red-600 shadow-[0_4px_4px_rgba(0,0,0,0.4)] border border-red-800 z-20 flex items-center justify-center">
                            <div class="w-2 h-2 rounded-full bg-white/40 absolute top-1 left-1"></div>
                        </div>
                        
                        <div class="aspect-[4/3] w-full bg-gray-200 mb-4 overflow-hidden border border-gray-200 relative">
                            <?php if(!empty($item['img'])): ?>
                                <img src="<?= base_url('uploads/berita/' . $item['img']) ?>" class="w-full h-full object-cover filter contrast-[1.05]">
                            <?php else: ?>
                                <div class="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5L18.5 7H20" /></svg>
                                </div>
                            <?php endif; ?>
                            
                            <div class="absolute top-3 left-3 <?= $item['badge_color'] ?> text-[10px] font-bold px-2 py-1 rounded shadow-sm uppercase tracking-wider">
                                <?= esc($item['label'] ?? $item['type']) ?>
                            </div>
                        </div>
                        
                        <div class="font-poppins">
                            <div class="flex items-center gap-1.5 text-gray-400 text-[11px] font-medium mb-1.5">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                                <span><?= esc($item['date']) ?></span>
                            </div>
                            <h4 class="font-bold text-gray-800 text-[15px] leading-snug line-clamp-2">
                                <?= esc($item['title']) ?>
                            </h4>
                        </div>

                    </a>

                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="col-span-1 sm:col-span-2 lg:col-span-4 text-center py-10">
                        <p class="text-white/70 italic tracking-wider">Belum ada pengumuman terbaru di papan.</p>
                    </div>
                <?php endif; ?>
            </div>

            <div class="mt-16 text-center relative z-30">
                <a href="<?= base_url('berita') ?>" class="inline-block bg-transparent border-2 border-[#fbbd42] text-[#fbbd42] font-bold py-3 px-8 rounded-full hover:bg-[#fbbd42] hover:text-[#1b3a29] transition-all duration-300 uppercase tracking-widest text-sm shadow-lg hover:shadow-xl">
                    Lihat Papan Selengkapnya
                </a>
            </div>

        </div>
    </div>
</section>

<?= $this->endSection(); ?>