@{
    Layout = "_Layout";

    ViewData["Title"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Berita, Dokumen Informasi, Kinerja, Lingkungan Hidup, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Berita - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Kegiatan dan Informasi Terkini dari Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Berita";
    ViewData["TitleBeforeHighlight"] = "Kegiatan dan Informasi Terkini";
    ViewData["TitleHighlight"] = "dari Dinas Lingkungan Hidup DKI Jakarta";
}

<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />


<section class="py-12 bg-gray-50">
    <div class="container mx-auto px-4">
        <!-- Search and Filter Section -->
        <div class="mb-8">
            <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
                <!-- Search Bar -->
                <div class="w-full md:w-1/2">
                    <div class="relative">
                        <input type="text" placeholder="Cari berita..." 
                               class="w-full px-4 py-3 pl-10 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                
                <!-- Category Filter -->
                <div class="w-full md:w-auto">
                    <select class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500">
                        <option value="">Semua Kategori</option>
                        <option value="lingkungan">Lingkungan</option>
                        <option value="kebersihan">Kebersihan</option>
                        <option value="kegiatan">Kegiatan</option>
                        <option value="pengumuman">Pengumuman</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Trending News Section -->
        <div class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Berita Trending</h2>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Main Trending News -->
                <div class="lg:col-span-1">
                    <div class="relative overflow-hidden rounded-xl shadow-lg group cursor-pointer">
                        <img src="https://via.placeholder.com/600x400" alt="Trending News" 
                             class="w-full h-80 object-cover group-hover:scale-105 transition-transform duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-6 text-white">
                            <span class="inline-block px-3 py-1 bg-red-600 text-xs font-semibold rounded-full mb-3">TRENDING</span>
                            <h3 class="text-xl font-bold mb-2">Judul Berita Trending Utama Yang Menarik Perhatian</h3>
                            <p class="text-sm opacity-90 mb-2">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
                            <span class="text-xs opacity-75">15 Januari 2024</span>
                        </div>
                    </div>
                </div>
                
                <!-- Side Trending News -->
                <div class="space-y-4">
                    <div class="flex gap-4 p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer">
                        <img src="https://via.placeholder.com/120x80" alt="News" class="w-24 h-20 object-cover rounded-lg flex-shrink-0">
                        <div class="flex-1">
                            <span class="inline-block px-2 py-1 bg-orange-100 text-orange-800 text-xs font-medium rounded mb-2">HOT</span>
                            <h4 class="font-semibold text-gray-800 mb-1 line-clamp-2">Judul Berita Trending Kedua</h4>
                            <span class="text-xs text-gray-500">12 Januari 2024</span>
                        </div>
                    </div>
                    
                    <div class="flex gap-4 p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer">
                        <img src="https://via.placeholder.com/120x80" alt="News" class="w-24 h-20 object-cover rounded-lg flex-shrink-0">
                        <div class="flex-1">
                            <span class="inline-block px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded mb-2">NEW</span>
                            <h4 class="font-semibold text-gray-800 mb-1 line-clamp-2">Judul Berita Trending Ketiga</h4>
                            <span class="text-xs text-gray-500">10 Januari 2024</span>
                        </div>
                    </div>
                    
                    <div class="flex gap-4 p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer">
                        <img src="https://via.placeholder.com/120x80" alt="News" class="w-24 h-20 object-cover rounded-lg flex-shrink-0">
                        <div class="flex-1">
                            <span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded mb-2">UPDATE</span>
                            <h4 class="font-semibold text-gray-800 mb-1 line-clamp-2">Judul Berita Trending Keempat</h4>
                            <span class="text-xs text-gray-500">8 Januari 2024</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- All News Section -->
        <div>
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Semua Berita</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="news-grid">
                <!-- News Card 1 -->
                <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer">
                    <img src="https://via.placeholder.com/400x250" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Lingkungan</span>
                            <span class="text-xs text-gray-500">5 Januari 2024</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Program Penghijauan Kota Jakarta Tahun 2024</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, voluptatem...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>

                <!-- News Card 2 -->
                <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer">
                    <img src="https://via.placeholder.com/400x250" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">Kebersihan</span>
                            <span class="text-xs text-gray-500">3 Januari 2024</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Operasi Kebersihan Lingkungan di Seluruh DKI Jakarta</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, voluptatem...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>

                <!-- News Card 3 -->
                <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer">
                    <img src="https://via.placeholder.com/400x250" alt="News" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <div class="flex items-center gap-2 mb-3">
                            <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">Kegiatan</span>
                            <span class="text-xs text-gray-500">1 Januari 2024</span>
                        </div>
                        <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Workshop Pengelolaan Sampah Ramah Lingkungan</h3>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, voluptatem...</p>
                        <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                    </div>
                </article>

                <!-- More news cards would be loaded dynamically -->
            </div>

            <!-- Load More Button -->
            <div class="text-center mt-10">
                <button id="load-more-btn" 
                        class="px-8 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors duration-300 focus:ring-4 focus:ring-green-200">
                    Muat Lebih Banyak
                </button>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const loadMoreBtn = document.getElementById('load-more-btn');
    const newsGrid = document.getElementById('news-grid');
    
    loadMoreBtn.addEventListener('click', function() {
        // Simulate loading more news
        const newNewsHtml = `
            <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer">
                <img src="https://via.placeholder.com/400x250" alt="News" class="w-full h-48 object-cover">
                <div class="p-6">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Pengumuman</span>
                        <span class="text-xs text-gray-500">28 Desember 2023</span>
                    </div>
                    <h3 class="font-bold text-gray-800 mb-2 line-clamp-2">Berita Baru yang Dimuat Secara Dinamis</h3>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-3">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
                    <a href="#" class="text-green-600 hover:text-green-700 font-medium text-sm">Baca Selengkapnya →</a>
                </div>
            </article>
        `;
        
        newsGrid.insertAdjacentHTML('beforeend', newNewsHtml);
    });
});
</script>