@extends('layouts.app')

@section('title', 'Beranda - Edukasi Sampah')

@section('content')
<div class="container">
    <!-- HERO SECTION -->
    <div class="hero-banner mb-5 text-center text-lg-start">
        <div class="row align-items-center gy-4">
            <div class="col-lg-7">
                <span class="badge bg-warning text-dark font-heading fs-6 px-3 py-2 rounded-pill mb-3">
                    <i class="fa-solid fa-sparkles me-1"></i> Program Kerja KKN Edukasi Lingkungan
                </span>
                <h1 class="fw-extrabold display-5 font-heading text-white mb-3">
                    Ayo Kelola Sampah dengan Bijak! ♻️
                </h1>
                <p class="fs-5 text-white-50 mb-4">
                    Kenali jenis sampah, pelajari cara memilah yang benar, dan mari bersama menjadi Pahlawan Lingkungan mulai dari rumah!
                </p>
                <div class="d-flex flex-wrap justify-content-center justify-content-lg-start gap-3">
                    <a href="{{ route('jenis-sampah') }}" class="btn btn-warning btn-lg rounded-pill fw-bold text-dark px-4 shadow">
                        <i class="fa-solid fa-graduation-cap me-2"></i> Mulai Belajar
                    </a>
                    <a href="{{ route('quiz.index') }}" class="btn btn-outline-light btn-lg rounded-pill fw-bold px-4">
                        <i class="fa-solid fa-gamepad me-2"></i> Main Kuis 🎮
                    </a>
                </div>
            </div>
            <div class="col-lg-5 text-center">
                <div class="p-3 bg-white bg-opacity-10 rounded-4 border border-light border-opacity-25 shadow-sm">
                    <span style="font-size: 7rem; display: block; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));" class="animate-bounce">
                        🤖♻️
                    </span>
                    <h5 class="fw-bold font-heading text-warning mt-2 mb-0">Maskot PilahBot</h5>
                    <small class="text-white-50">"Halo Teman-Teman! Yuk Belajar Pemilahan Sampah!"</small>
                </div>
            </div>
        </div>
    </div>

    <!-- SECTION 1: APA ITU SAMPAH & DAMPAKNYA -->
    <div class="row gy-4 mb-5">
        <div class="col-12 text-center mb-2">
            <h2 class="fw-bold font-heading text-success">Apa Itu Sampah & Mengapa Penting?</h2>
            <p class="text-muted">Mengenal pengertian dasar dan dampak pembuangan sampah sembarangan.</p>
        </div>

        <div class="col-md-4">
            <div class="card card-eco h-100 p-4 text-center">
                <div class="icon-box-lg bg-success bg-opacity-10 text-success mx-auto mb-3">
                    <i class="fa-solid fa-book-open"></i>
                </div>
                <h5 class="fw-bold font-heading">Definisi Sampah</h5>
                <p class="text-muted mb-0">Sisa kegiatan sehari-hari manusia atau proses alam yang berbentuk padat/setengah padat yang sudah tidak digunakan lagi.</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-eco h-100 p-4 text-center">
                <div class="icon-box-lg bg-danger bg-opacity-10 text-danger mx-auto mb-3">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
                <h5 class="fw-bold font-heading">Dampak Buruk</h5>
                <p class="text-muted mb-0">Sampah tidak terkelola memicu timbulnya bau busuk, pencemaran air tanah, banjir, dan munculnya bibit penyakit.</p>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card card-eco h-100 p-4 text-center">
                <div class="icon-box-lg bg-warning bg-opacity-10 text-warning mx-auto mb-3">
                    <i class="fa-solid fa-hand-holding-heart"></i>
                </div>
                <h5 class="fw-bold font-heading">Manfaat Memilah</h5>
                <p class="text-muted mb-0">Memudahkan proses daur ulang, mengurangi beban TPA, serta menghasilkan produk ekonomis seperti kompos dan kerajinan.</p>
            </div>
        </div>
    </div>

    <!-- SECTION 2: KENAPA HARUS BELAJAR -->
    <div class="card card-eco p-4 p-lg-5 mb-5 bg-white border-0">
        <div class="row align-items-center gy-4">
            <div class="col-lg-6">
                <span class="badge bg-success bg-opacity-10 text-success font-heading px-3 py-2 rounded-pill mb-2">Alasan Penting</span>
                <h3 class="fw-bold font-heading text-dark mb-3">Kenapa Kita Harus Belajar Pengelolaan Sampah?</h3>
                
                <div class="d-flex align-items-start gap-3 mb-3">
                    <div class="bg-success text-white rounded-circle p-2 fs-5 flex-shrink-0" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa-solid fa-leaf"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">Lingkungan Desa Bersih & Asri</h6>
                        <p class="text-muted small mb-0">Udara menjadi segar tanpa bau busuk sampah menumpuk di pinggir jalan.</p>
                    </div>
                </div>

                <div class="d-flex align-items-start gap-3 mb-3">
                    <div class="bg-info text-white rounded-circle p-2 fs-5 flex-shrink-0" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa-solid fa-water"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">Sungai Bebas Mampet & Bebas Banjir</h6>
                        <p class="text-muted small mb-0">Mencegah terjadinya luapan air sungai saat musim hujan deras akibat saluran mampet.</p>
                    </div>
                </div>

                <div class="d-flex align-items-start gap-3 mb-3">
                    <div class="bg-warning text-dark rounded-circle p-2 fs-5 flex-shrink-0" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa-solid fa-arrows-spin"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">Sampah Bisa Menjadi Bernilai Ekonomi</h6>
                        <p class="text-muted small mb-0">Dapat disetorkan ke Bank Sampah untuk menjadi tabungan atau diolah jadi pupuk gratis.</p>
                    </div>
                </div>

                <div class="d-flex align-items-start gap-3">
                    <div class="bg-danger text-white rounded-circle p-2 fs-5 flex-shrink-0" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa-solid fa-shield-halved"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">Menjadi Pahlawan Lingkungan</h6>
                        <p class="text-muted small mb-0">Melindungi kesehatan keluarga dan generasi mendatang dari bahaya pencemaran.</p>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 text-center">
                <!-- STATISTIK SEDERHANA -->
                <div class="bg-light p-4 rounded-4 border">
                    <h5 class="fw-bold font-heading text-success mb-3">📊 Statistik Sederhana Sampah Harian</h5>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="p-3 bg-success bg-opacity-10 rounded-3 text-center">
                                <h3 class="fw-bold text-success mb-1">🥬 50%</h3>
                                <small class="fw-bold text-dark">Sampah Organik</small>
                                <p class="text-muted mb-0" style="font-size: 0.75rem;">(Sisa makanan, buah, daun)</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-warning bg-opacity-10 rounded-3 text-center">
                                <h3 class="fw-bold text-warning mb-1">🧴 30%</h3>
                                <small class="fw-bold text-dark">Anorganik/Plastik</small>
                                <p class="text-muted mb-0" style="font-size: 0.75rem;">(Botol, plastik, kaleng)</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-danger bg-opacity-10 rounded-3 text-center">
                                <h3 class="fw-bold text-danger mb-1">🔋 10%</h3>
                                <small class="fw-bold text-dark">Sampah B3</small>
                                <p class="text-muted mb-0" style="font-size: 0.75rem;">(Baterai, neon, obat)</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 bg-info bg-opacity-10 rounded-3 text-center">
                                <h3 class="fw-bold text-info mb-1">📦 10%</h3>
                                <small class="fw-bold text-dark">Kertas & Kaca</small>
                                <p class="text-muted mb-0" style="font-size: 0.75rem;">(Kardus, botol kaca)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- QUICK MENU NAVIGATION -->
    <div class="row gy-4 mb-5">
        <div class="col-12 text-center">
            <h3 class="fw-bold font-heading text-dark">Jelajahi Menu Edukasi 🌟</h3>
        </div>

        <div class="col-6 col-md-3">
            <a href="{{ route('jenis-sampah') }}" class="text-decoration-none">
                <div class="card card-eco h-100 p-3 text-center category-organik">
                    <div class="fs-1 mb-2">🥬🧴🔋</div>
                    <h6 class="fw-bold text-dark mb-1">Jenis Sampah</h6>
                    <small class="text-muted">Organik, Anorganik & B3</small>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{{ route('cara-memilah') }}" class="text-decoration-none">
                <div class="card card-eco h-100 p-3 text-center category-anorganik">
                    <div class="fs-1 mb-2">📑5️⃣</div>
                    <h6 class="fw-bold text-dark mb-1">Cara Memilah</h6>
                    <small class="text-muted">Panduan 5 Langkah</small>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{{ route('jadwal-lokasi') }}" class="text-decoration-none">
                <div class="card card-eco h-100 p-3 text-center category-b3">
                    <div class="fs-1 mb-2">🚛📍</div>
                    <h6 class="fw-bold text-dark mb-1">TPS & Jadwal</h6>
                    <small class="text-muted">Jadwal & Google Maps</small>
                </div>
            </a>
        </div>

        <div class="col-6 col-md-3">
            <a href="{{ route('quiz.index') }}" class="text-decoration-none">
                <div class="card card-eco h-100 p-3 text-center border-top border-4 border-warning">
                    <div class="fs-1 mb-2">🏆🎮</div>
                    <h6 class="fw-bold text-dark mb-1">Kuis Game</h6>
                    <small class="text-muted">Level 1 - 5 + Sertifikat</small>
                </div>
            </a>
        </div>
    </div>

    <!-- PREVIEW ARTIKEL TERBARU -->
    @if(count($latestArticles) > 0)
    <div class="mb-5">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="fw-bold font-heading text-dark mb-0">📰 Artikel Edukasi Terbaru</h4>
            <a href="{{ route('articles.index') }}" class="btn btn-outline-success btn-sm rounded-pill fw-bold">Lihat Semua Artikel &rarr;</a>
        </div>
        <div class="row gy-4">
            @foreach($latestArticles as $article)
            <div class="col-md-4">
                <div class="card card-eco h-100">
                    <img src="{{ $article->image }}" class="card-img-top rounded-top-4" alt="{{ $article->title }}" style="height: 180px; object-fit: cover;">
                    <div class="card-body">
                        <span class="badge bg-success mb-2">{{ $article->category }}</span>
                        <h6 class="fw-bold text-dark mb-2">{{ Str::limit($article->title, 55) }}</h6>
                        <p class="text-muted small mb-3">{{ Str::limit($article->snippet, 90) }}</p>
                        <a href="{{ route('articles.show', $article->slug) }}" class="btn btn-sm btn-link text-success p-0 fw-bold">Baca Selengkapnya &rarr;</a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection