@extends('layouts.front')

@section('content')
<div class="min-h-screen bg-white font-['Plus_Jakarta_Sans']">
    <!-- Header Section -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-16">
        <div class="mb-8 lg:mb-16">
            <h1 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-black mb-4 lg:mb-6 font-['Plus_Jakarta_Sans']">Materi Edukasi</h1>
            <p class="text-gray-600 text-sm sm:text-base leading-relaxed max-w-4xl font-['Plus_Jakarta_Sans']">
                Data yang Andal adalah fondasi utama untuk verifikasi kepatuhan regulasi dan pembangunan keberlanjutan daerah.
                Kami menyajikan status dan capaian program mitigasi yang terverifikasi.
            </p>
        </div>

        <!-- Featured Article -->
        <div class="mb-8 lg:mb-16">
            <div class="flex flex-col lg:flex-row gap-4 lg:gap-6 items-start">
                <div class="relative w-full lg:flex-shrink-0 lg:w-auto">
                    <img class="w-full lg:w-[545px] h-48 sm:h-64 lg:h-[320px] rounded-lg object-cover"
                        src="{{ asset('assets/images/article-image05.png') }}"
                        alt="Featured Article" />
                    <div class="absolute top-2 lg:top-4 left-2 lg:left-4 bg-black bg-opacity-50 text-white px-2 lg:px-3 py-1 rounded text-xs lg:text-sm font-['Plus_Jakarta_Sans'] flex items-center gap-1">
                        <svg class="w-3 lg:w-4 h-3 lg:h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd"></path>
                        </svg>
                        6 menit
                    </div>
                </div>
                <div class="flex-1 w-full lg:w-auto">
                    <h2 class="text-lg sm:text-xl lg:text-xl font-semibold text-gray-900 mb-3 lg:mb-4 font-['Plus_Jakarta_Sans']">
                        Jejak Karbon DKI Jakarta: Peran Serta Masyarakat
                    </h2>
                    <p class="text-gray-600 text-xs sm:text-sm leading-relaxed mb-4 lg:mb-6 font-['Plus_Jakarta_Sans']">
                        Jejak karbon adalah total emisi yang dihasilkan langsung maupun tidak langsung oleh individu, rumah tangga,
                        atau aktivitas tertentu. Dengan menganalisis data Sektor Rumah Tangga dan Transportasi di SIGRD, kami
                        menunjukkan bagaimana keputusan individu—mulai dari penggunaan AC, pemilihan transportasi publik
                        versus kendaraan pribadi, hingga pemilahan sampah di rumah—berkontribusi langsung terhadap total emisi kota.
                    </p>
                    <a class="btn-minimal btn-outline border px-6 py-3 rounded-full" href="">Baca Artikel</a>
                </div>
            </div>
        </div>

        <!-- Articles Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
            <!-- Article 1 -->
            <div class="flex flex-col">
                <img class="w-full h-40 sm:h-44 lg:h-48 rounded-xl object-cover mb-3"
                    src="{{ asset('assets/images/article-image01.png') }}"
                    alt="Article 1" />
                <div class="bg-gray-100 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-['Plus_Jakarta_Sans'] w-fit mb-2">
                    <div class="w-3 h-3 bg-blue-400 rounded-full"></div>
                    Edukasi
                </div>
                <h3 class="text-base lg:text-lg font-medium text-black mb-2 font-['Plus_Jakarta_Sans']">
                    Apa Itu SIGRD dan Mengapa Jakarta Membutuhkannya?
                </h3>
                <p class="text-gray-500 text-xs leading-relaxed font-['Plus_Jakarta_Sans']">
                    Menjelaskan mengapa Panduan IPCC menjadi standar dan apa itu Tier 1, 2, dan 3.
                </p>
            </div>

            <!-- Article 2 -->
            <div class="flex flex-col">
                <img class="w-full h-40 sm:h-44 lg:h-48 rounded-xl object-cover mb-3"
                    src="{{ asset('assets/images/article-image02.png') }}"
                    alt="Article 2" />
                <div class="bg-gray-100 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-['Plus_Jakarta_Sans'] w-fit mb-2">
                    <div class="w-3 h-3 bg-blue-400 rounded-full"></div>
                    Edukasi
                </div>
                <h3 class="text-base lg:text-lg font-medium text-black mb-2 font-['Plus_Jakarta_Sans']">
                    Memahami Inventarisasi: Metodologi IPCC dan 4 Sektor Utama
                </h3>
                <p class="text-gray-500 text-xs leading-relaxed font-['Plus_Jakarta_Sans']">
                    Memperkenalkan 4 sektor utama (Energi, Limbah, IPPU, AFOLU) dan contoh emisi dari setiap sektor (misalnya, Metana dari TPA Limbah.
                </p>
            </div>

            <!-- Article 3 -->
            <div class="flex flex-col">
                <img class="w-full h-40 sm:h-44 lg:h-48 rounded-xl object-cover mb-3"
                    src="{{ asset('assets/images/article-image03.png') }}"
                    alt="Article 3" />
                <div class="bg-gray-100 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-['Plus_Jakarta_Sans'] w-fit mb-2">
                    <div class="w-3 h-3 bg-blue-400 rounded-full"></div>
                    Edukasi
                </div>
                <h3 class="text-base lg:text-lg font-medium text-black mb-2 font-['Plus_Jakarta_Sans']">
                    Membaca Tren Emisi di Dasbor: Dari Data Mentah Menjadi Kebijakan
                </h3>
                <p class="text-gray-500 text-xs leading-relaxed font-['Plus_Jakarta_Sans']">
                    Panduan langkah demi langkah cara menggunakan filter dan grafik di Dasbor SIGRD.
                </p>
            </div>

            <!-- Article 4 -->
            <div class="flex flex-col">
                <img class="w-full h-40 sm:h-44 lg:h-48 rounded-xl object-cover mb-3"
                    src="{{ asset('assets/images/article-image04.png') }}"
                    alt="Article 4" />
                <div class="bg-gray-100 inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-['Plus_Jakarta_Sans'] w-fit mb-2">
                    <div class="w-3 h-3 bg-blue-400 rounded-full"></div>
                    Edukasi
                </div>
                <h3 class="text-base lg:text-lg font-medium text-black mb-2 font-['Plus_Jakarta_Sans']">
                    RAD GRK: Status dan Dampak Aksi Mitigasi di Lapangan
                </h3>
                <p class="text-gray-500 text-xs leading-relaxed font-['Plus_Jakarta_Sans']">
                    Apa itu RAD GRK: Dokumen perencanaan aksi daerah.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection