@extends('layouts.appNew')
@section('content')
<!-- Hero Section -->
    <header class="relative pt-32 pb-20 overflow-hidden">
        <div class="absolute top-0 right-0 -z-10 w-1/2 h-full bg-gradient-to-l from-blue-50 to-transparent rounded-bl-full opacity-50"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <span class="inline-block bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-bold mb-4">
                        Portal Informasi Kinerja Lingkungan
                    </span>
                    <h2 class="text-5xl font-extrabold text-slate-900 leading-tight mb-6">
                        Wujudkan Jakarta <span class="text-blue-600 underline decoration-blue-200 underline-offset-8">Berkelanjutan</span> Melalui Transparansi Data
                    </h2>
                    <p class="text-lg text-slate-600 mb-8 max-w-lg">
                        Sistem informasi terintegrasi untuk pemantauan kinerja pengelolaan lingkungan hidup Provinsi DKI Jakarta berbasis kerangka kerja DPSIR.
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="{{ url('dataset') }}" class="flex items-center space-x-2 bg-blue-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-blue-700 transition-all transform hover:-translate-y-1 shadow-xl">
                            <span>Cari Data Spesifik</span>
                            <i data-lucide="search" class="w-5 h-5"></i>
                        </a>
                        {{-- <button class="flex items-center space-x-2 bg-white border border-slate-200 text-slate-700 px-8 py-4 rounded-xl font-bold hover:bg-slate-50 transition-all">
                            <i data-lucide="search" class="w-5 h-5"></i>
                            <span>Cari Data Spesifik</span>
                        </button> --}}
                    </div>
                </div>

                <!-- Live Data Panel -->
                <div id="data-panel" class="relative">
                    <div class="bg-white p-6 rounded-3xl shadow-2xl border border-slate-100 relative z-10">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="font-bold text-slate-800">Capaian Indikator Utama</h3>
                            <i data-lucide="activity" class="text-blue-600 w-5 h-5"></i>
                        </div>
                        <div class="space-y-6">
                            <!-- Stat Item 1 -->
                            <div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                <div class="flex items-center space-x-4">
                                    <div class="p-3 bg-white rounded-xl shadow-sm text-blue-500">
                                        <i data-lucide="wind"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500 font-medium">Indeks Kualitas Udara</p>
                                        <p class="font-bold text-xl">78 <span class="text-xs font-normal text-slate-400">ISPU</span></p>
                                    </div>
                                </div>
                                <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-yellow-100 text-yellow-700">Sedang</span>
                            </div>
                            <!-- Stat Item 2 -->
                            <div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                <div class="flex items-center space-x-4">
                                    <div class="p-3 bg-white rounded-xl shadow-sm text-orange-500">
                                        <i data-lucide="trash-2"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500 font-medium">Timbulan Sampah</p>
                                        <p class="font-bold text-xl">7.5k <span class="text-xs font-normal text-slate-400">Ton/Hari</span></p>
                                    </div>
                                </div>
                                <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-green-100 text-green-700">Terkelola</span>
                            </div>
                            <!-- Stat Item 3 -->
                            <div class="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
                                <div class="flex items-center space-x-4">
                                    <div class="p-3 bg-white rounded-xl shadow-sm text-cyan-500">
                                        <i data-lucide="droplets"></i>
                                    </div>
                                    <div>
                                        <p class="text-xs text-slate-500 font-medium">Kualitas Air</p>
                                        <p class="font-bold text-xl">62.4 <span class="text-xs font-normal text-slate-400">IKA</span></p>
                                    </div>
                                </div>
                                <span class="text-[10px] font-bold px-2 py-1 rounded-md bg-blue-100 text-blue-700">Cukup</span>
                            </div>
                        </div>
                    </div>
                    <!-- Decorative Blobs -->
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-green-200 rounded-full blur-3xl opacity-40 -z-10"></div>
                    <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-200 rounded-full blur-3xl opacity-40 -z-10"></div>
                </div>
            </div>
        </div>
    </header>

    <!-- DPSIR Framework -->
    <section class="py-20 bg-blue-900 text-white overflow-hidden relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h3 class="text-3xl font-bold mb-4">Kerangka Kerja DPSIR</h3>
            <p class="text-blue-200 max-w-2xl mx-auto mb-16">
                Analisis hubungan kausalitas antara aktivitas manusia dan perubahan lingkungan untuk merumuskan respon kebijakan yang tepat.
            </p>
            
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                    <div class="text-4xl font-black mb-4 text-blue-400">D</div>
                    <h4 class="font-bold mb-2 text-lg">Driving Force</h4>
                    <p class="text-sm opacity-70">Pertumbuhan penduduk & aktivitas ekonomi kota.</p>
                </div>
                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                    <div class="text-4xl font-black mb-4 text-blue-400">P</div>
                    <h4 class="font-bold mb-2 text-lg">Pressure</h4>
                    <p class="text-sm opacity-70">Emisi kendaraan, limbah industri & konsumsi air.</p>
                </div>
                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                    <div class="text-4xl font-black mb-4 text-blue-400">S</div>
                    <h4 class="font-bold mb-2 text-lg">State</h4>
                    <p class="text-sm opacity-70">Kondisi riil kualitas udara, air & tutupan lahan.</p>
                </div>
                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                    <div class="text-4xl font-black mb-4 text-blue-400">I</div>
                    <h4 class="font-bold mb-2 text-lg">Impact</h4>
                    <p class="text-sm opacity-70">Dampak pada kesehatan warga & ekosistem perkotaan.</p>
                </div>
                <div class="group bg-white/10 backdrop-blur-md border border-white/10 p-6 rounded-2xl h-full transition-all hover:bg-white hover:text-blue-900 hover:scale-105">
                    <div class="text-4xl font-black mb-4 text-blue-400">R</div>
                    <h4 class="font-bold mb-2 text-lg">Response</h4>
                    <p class="text-sm opacity-70">Kebijakan pemerintah, inovasi & peran masyarakat.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Publication Section -->
    <section id="publikasi" class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
                <div class="max-w-xl">
                    <h3 class="text-3xl font-bold text-slate-900 mb-4 tracking-tight">Dokumen Publikasi</h3>
                    <p class="text-slate-600">Akses seluruh arsip Dokumen Informasi Kinerja Pengelolaan Lingkungan Hidup Daerah dari tahun ke tahun</p>
                </div>
                {{-- <div class="flex space-x-2">
                    <button class="year-filter px-4 py-2 text-sm font-semibold bg-blue-600 text-white rounded-lg" data-year="all">Semua Tahun</button>
                    <button class="year-filter px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-lg" data-year="2024">2024</button>
                    <button class="year-filter px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-100 rounded-lg" data-year="2023">2023</button>
                </div> --}}
            </div>

            <div class="grid md:grid-cols-3 gap-6">
                <!-- Report Card 1 -->
                @foreach($dataset as $dataSet)
                <div class="report-card bg-white rounded-2xl p-6 border border-slate-200 hover:border-blue-400 hover:shadow-xl transition-all group" data-year="2024">
                    <div class="flex justify-between items-start mb-6">
                        <div class="bg-blue-50 text-blue-700 px-3 py-1 rounded-md text-sm font-bold">{{ $dataSet->tahun_data }}</div>
                        <i data-lucide="file-text" class="text-slate-300 group-hover:text-blue-500 transition-colors"></i>
                    </div>
                    <h4 class="font-bold text-slate-800 mb-2 leading-tight h-12">{{ $dataSet->name }}</h4>
                    <div class="flex items-center text-xs text-slate-400 mb-6 space-x-4">
                        <span class="flex items-center"><i data-lucide="info" class="w-3 h-3 mr-1"></i> {{ $dataSet->instansi->name }}</span>
                    </div>
                    <a href="{{ url('dataset/detail/'.encode_id($dataSet->DatasetId)) }}" class="w-full flex items-center justify-center space-x-2 bg-slate-50 text-slate-700 py-3 rounded-xl font-bold group-hover:bg-blue-600 group-hover:text-white transition-all">
                        <i data-lucide="eye" class="w-5 h-5"></i>
                        <span>Lihat Detail</span>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection