<?= $this->extend('layout/template'); ?>

<?= $this->section('content'); ?>

<section class="relative min-h-[60vh] flex items-center overflow-hidden py-20 bg-[#BA290D]">
    <div class="absolute inset-0 z-0">
        <img src="<?= !empty($settings['berita_hero_img']) ? base_url('uploads/berita/' . $settings['berita_hero_img']) : base_url('assets/img/gb_hero/berita.png') ?>" alt="Background" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-black/40"></div>
    </div>

    <div class="container mx-auto px-4 md:px-12 relative z-10 pt-25">
        <div class="w-full md:w-1/2 text-white">
            <h4 class="font-bold tracking-[0.3em] uppercase text-sm mb-4 text-orange-400">
                <?= esc($settings['berita_hero_kicker'] ?? "Stay Updated") ?>
            </h4>
            <h1 class="text-5xl md:text-7xl font-black uppercase leading-[0.9] tracking-tighter mb-6">
                LATEST NEWS -<br>
            </h1>
            <p class="text-lg md:text-xl font-medium max-w-lg mb-8 text-gray-100 opacity-90 leading-relaxed">
                <?= nl2br(esc($settings['berita_hero_desc'] ?? "Dapatkan informasi terbaru seputar inovasi, acara mendatang, dan perkembangan terkini langsung dari dapur kami.")) ?>
            </p>
        </div>
    </div>
</section>

<?php 
// Dekode JSON
$pengumuman = isset($settings['pengumuman_list']) ? json_decode($settings['pengumuman_list'], true) : [];
$berita = isset($settings['berita_list']) ? json_decode($settings['berita_list'], true) : [];
?>

<?php if(!empty($pengumuman)): ?>
<section class="py-16 bg-[#FFF9F2]">
    <div class="container mx-auto px-4 md:px-12">
        <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4">
            <div>
                <div class="flex items-center gap-2">
                    <span class="w-8 h-1 bg-[#BA290D] rounded-full"></span>
                    <h4 class="text-[#BA290D] font-bold tracking-widest uppercase text-sm">Promo & Event</h4>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <?php foreach($pengumuman as $p): ?>
            <div class="group flex flex-col sm:flex-row bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 duration-300 overflow-hidden border border-gray-100 cursor-pointer"
                 data-title="<?= esc($p['title']) ?>"
                 data-date="<?= esc($p['date']) ?>"
                 data-read="<?= esc($p['label']) ?>"
                 data-img="<?= !empty($p['img']) ? base_url('uploads/berita/' . $p['img']) : '' ?>"
                 data-desc="<?= esc($p['desc']) ?>"
                 onclick="openModal(this)">
                
                <div class="sm:w-2/5 h-48 sm:h-auto relative overflow-hidden bg-gray-100">
                    <?php if(!empty($p['img'])): ?>
                        <img src="<?= base_url('uploads/berita/' . $p['img']) ?>" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <?php else: ?>
                        <div class="w-full h-full bg-gradient-to-br from-yellow-100 to-red-100"></div>
                    <?php endif; ?>
                    <div class="absolute top-4 left-4">
                        <span class="<?= strtolower($p['label']) == 'promo' ? 'bg-[#FABB15] text-[#BA290D]' : 'bg-[#BA290D] text-white' ?> text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">
                            <?= esc($p['label']) ?>
                        </span>
                    </div>
                </div>

                <div class="p-6 sm:w-3/5 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center gap-2 mb-2 text-gray-400 text-xs font-medium">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" 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($p['date']) ?></span>
                        </div>
                        <h4 class="text-xl font-bold text-gray-800 mb-2 leading-tight group-hover:text-[#BA290D] transition-colors">
                            <?= esc($p['title']) ?>
                        </h4>
                        <p class="text-gray-500 text-sm line-clamp-3"><?= esc($p['desc']) ?></p>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if(!empty($berita)): ?>
<section class="py-16 bg-white">
    <div class="container mx-auto px-4 md:px-12">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <h4 class="text-[#BA290D] font-bold tracking-widest uppercase text-sm mb-3">Pusat Informasi</h4>
            <h2 class="text-3xl lg:text-4xl font-extrabold text-[#BA290D] tracking-tight mb-4">Berita Terbaru</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <?php foreach($berita as $b): ?>
            <div class="group cursor-pointer"
                 data-title="<?= esc($b['title']) ?>"
                 data-date="<?= esc($b['date']) ?>"
                 data-read="<?= esc($b['read']) ?>"
                 data-img="<?= !empty($b['img']) ? base_url('uploads/berita/' . $b['img']) : '' ?>"
                 data-desc="<?= esc($b['desc']) ?>"
                 onclick="openModal(this)">
                 
                <div class="relative h-64 rounded-3xl overflow-hidden mb-6 shadow-sm bg-gray-100">
                    <?php if(!empty($b['img'])): ?>
                        <img src="<?= base_url('uploads/berita/' . $b['img']) ?>" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    <?php else: ?>
                        <div class="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200"></div>
                    <?php endif; ?>
                    <div class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-4 py-1.5 rounded-full">
                        <span class="text-[#BA290D] font-bold text-xs uppercase tracking-wider">Artikel</span>
                    </div>
                </div>
                <div class="flex items-center gap-3 text-sm text-gray-400 font-semibold mb-3">
                    <span><?= esc($b['date']) ?></span>
                    <span class="w-1.5 h-1.5 rounded-full bg-gray-300"></span>
                    <span><?= esc($b['read']) ?></span>
                </div>
                <h3 class="text-xl font-bold text-[#BA290D] group-hover:text-[#BA290D] transition-colors mb-3 leading-snug">
                    <?= esc($b['title']) ?>
                </h3>
                <p class="text-gray-500 text-sm line-clamp-2"><?= esc($b['desc']) ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<div id="beritaModal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 opacity-0 transition-opacity duration-300">
    <div class="bg-white rounded-3xl w-full max-w-3xl max-h-[90vh] overflow-y-auto shadow-2xl transform scale-95 transition-transform duration-300" id="beritaModalContent">
        
        <div class="sticky top-0 right-0 z-10 flex justify-end p-4 pointer-events-none">
            <button onclick="closeModal()" class="pointer-events-auto bg-white/80 backdrop-blur text-gray-800 hover:text-red-600 hover:bg-red-50 p-2 rounded-full transition-colors shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>

        <div class="px-6 pb-8 sm:px-10 sm:pb-10 -mt-12">
            <div id="modalImgContainer" class="w-full h-64 sm:h-80 rounded-2xl overflow-hidden mb-6 hidden shadow-md mt-4">
                <img id="modalImg" src="" alt="Berita Image" class="w-full h-full object-cover">
            </div>
            
            <div class="flex items-center gap-3 text-sm text-gray-500 font-semibold mb-4 mt-6">
                <span id="modalDate"></span>
                <span class="w-1.5 h-1.5 rounded-full bg-gray-300"></span>
                <span id="modalRead"></span>
            </div>
            
            <h2 id="modalTitle" class="text-2xl sm:text-3xl font-extrabold text-[#BA290D] leading-tight mb-6"></h2>
            
            <div id="modalDesc" class="text-gray-700 leading-relaxed space-y-4 whitespace-pre-line text-base sm:text-lg">
                </div>
        </div>
    </div>
</div>

<script>
    function openModal(element) {
        // Ambil data dari atribut element yang di-klik
        const title = element.getAttribute('data-title');
        const date = element.getAttribute('data-date');
        const read = element.getAttribute('data-read');
        const imgSrc = element.getAttribute('data-img');
        const desc = element.getAttribute('data-desc');

        // Isi ke dalam Modal
        document.getElementById('modalTitle').innerText = title;
        document.getElementById('modalDate').innerText = date;
        document.getElementById('modalRead').innerText = read;
        document.getElementById('modalDesc').innerText = desc;

        // Atur Gambar Modal
        const imgContainer = document.getElementById('modalImgContainer');
        const imgEl = document.getElementById('modalImg');
        
        if (imgSrc) {
            imgEl.src = imgSrc;
            imgContainer.classList.remove('hidden');
        } else {
            imgEl.src = '';
            imgContainer.classList.add('hidden');
        }

        // Tampilkan Modal dengan Animasi
        const modal = document.getElementById('beritaModal');
        const modalContent = document.getElementById('beritaModalContent');
        
        modal.classList.remove('hidden');
        
        // Trigger reflow untuk memastikan transisi berjalan
        void modal.offsetWidth; 
        
        modal.classList.remove('opacity-0');
        modalContent.classList.remove('scale-95');
        modalContent.classList.add('scale-100');
        
        // Kunci scroll halaman belakang
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        const modal = document.getElementById('beritaModal');
        const modalContent = document.getElementById('beritaModalContent');

        // Mainkan Animasi Tutup
        modal.classList.add('opacity-0');
        modalContent.classList.remove('scale-100');
        modalContent.classList.add('scale-95');

        // Sembunyikan element setelah animasi selesai (300ms = duration-300)
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto'; // Kembalikan scroll
        }, 300);
    }

    // Fitur Tambahan: Tutup modal jika user klik area gelap di luar modal
    document.getElementById('beritaModal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeModal();
        }
    });
</script>

<?= $this->endSection(); ?>