<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'PilahPintar') - Sistem Informasi Edukasi Pengelolaan Sampah</title>
    
    <!-- Bootstrap 5 CSS & FontAwesome -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ asset('css/custom.css') }}">
    @yield('styles')
</head>
<body>

    <!-- NAVBAR -->
    <nav class="navbar navbar-expand-lg navbar-eco sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="{{ route('home') }}">
                <span class="logo-icon">♻️</span>
                <div>
                    <h5 class="fw-bold font-heading mb-0 text-success">PilahPintar</h5>
                    <small class="text-muted d-none d-sm-block" style="font-size: 0.75rem;">Edukasi Pengelolaan Sampah</small>
                </div>
            </a>
            
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarEcoNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarEcoNav">
                <ul class="navbar-nav ms-auto align-items-center gap-1 my-2 my-lg-0">
                    <li class="nav-item">
                        <a class="nav-link nav-link-eco {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">
                            <i class="fa-solid fa-house me-1"></i> Beranda
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link nav-link-eco dropdown-toggle {{ request()->routeIs('jenis-sampah') || request()->routeIs('cara-memilah') || request()->routeIs('konsep-3r') ? 'active' : '' }}" href="#" id="navbarDropdownBelajar" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa-solid fa-graduation-cap me-1"></i> Belajar
                        </a>
                        <ul class="dropdown-menu border-0 shadow-sm rounded-3 animate-float" aria-labelledby="navbarDropdownBelajar">
                            <li>
                                <a class="dropdown-item py-2 px-3 fw-semibold text-secondary" href="{{ route('jenis-sampah') }}">
                                    <i class="fa-solid fa-layer-group text-success me-2"></i> Jenis Sampah
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item py-2 px-3 fw-semibold text-secondary" href="{{ route('cara-memilah') }}">
                                    <i class="fa-solid fa-list-check text-warning me-2"></i> Cara Memilah
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item py-2 px-3 fw-semibold text-secondary" href="{{ route('konsep-3r') }}">
                                    <i class="fa-solid fa-recycle text-primary me-2"></i> Konsep 3R
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-eco {{ request()->routeIs('jadwal-lokasi') ? 'active' : '' }}" href="{{ route('jadwal-lokasi') }}">
                            <i class="fa-solid fa-location-dot me-1"></i> TPS & Jadwal
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-eco {{ request()->routeIs('videos.*') ? 'active' : '' }}" href="{{ route('videos.index') }}">
                            <i class="fa-solid fa-play me-1"></i> Video
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-eco {{ request()->routeIs('articles.*') ? 'active' : '' }}" href="{{ route('articles.index') }}">
                            <i class="fa-solid fa-newspaper me-1"></i> Artikel
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-eco {{ request()->routeIs('posters.*') ? 'active' : '' }}" href="{{ route('posters.index') }}">
                            <i class="fa-solid fa-download me-1"></i> Poster
                        </a>
                    </li>
                    <li class="nav-item ms-lg-2 mt-2 mt-lg-0">
                        <a class="btn btn-warning rounded-pill fw-bold text-dark px-3 shadow-sm" href="{{ route('quiz.index') }}">
                            <i class="fa-solid fa-gamepad me-1"></i> Main Kuis 🎮
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- CONTENT -->
    <main class="py-4">
        @yield('content')
    </main>

    <!-- FOOTER -->
    <footer class="footer-eco py-5 mt-auto">
        <div class="container text-center text-md-start">
            <div class="row gy-4">
                <!-- Col 1: Brand & Desc -->
                <div class="col-lg-5 col-md-12 mb-4 mb-lg-0">
                    <h5 class="fw-bold text-white font-heading mb-3">PilahPintar</h5>
                    <p class="text-white-50 small mb-4" style="line-height: 1.6;">
                        Website edukasi pengelolaan sampah berbasis digital. Sebuah program kerja Kuliah Kerja Nyata (KKN Desa Lengkong) untuk mewujudkan generasi peduli lingkungan.
                    </p>
                    <div class="d-flex justify-content-center justify-content-md-start gap-2">
                        <a href="https://www.instagram.com/kkn_lengkong26?igsh=bTN1NmJpMjhxaGQx&utm_source=qr" target="_blank" class="social-icon-btn shadow-sm" title="Instagram">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                        <a href="https://www.tiktok.com/@kkn2desa.lengkong?_r=1&_t=ZS-98J1P7wWsiK" target="_blank" class="social-icon-btn shadow-sm" title="TikTok">
                            <i class="fa-brands fa-tiktok"></i>
                        </a>
                    </div>
                </div>

                <!-- Col 2: Belajar Links -->
                <div class="col-lg-2 col-md-6 col-sm-6 mb-4 mb-lg-0">
                    <h6 class="fw-bold text-white font-heading mb-3">Belajar</h6>
                    <ul class="list-unstyled mb-0" style="color: #cbd5e1;">
                        <li class="mb-2">Jenis Sampah</li>
                        <li class="mb-2">Cara Memilah</li>
                        <li class="mb-2">Konsep 3R</li>
                        <li class="mb-2">Video Edukasi</li>
                    </ul>
                </div>

                <!-- Col 3: Bermain Links -->
                <div class="col-lg-2 col-md-6 col-sm-6 mb-4 mb-lg-0">
                    <h6 class="fw-bold text-white font-heading mb-3">Bermain</h6>
                    <ul class="list-unstyled mb-0" style="color: #cbd5e1;">
                        <li class="mb-2">Quiz Edukasi</li>
                        <li class="mb-2">Game Edukasi</li>
                        <li class="mb-2">Galeri Kegiatan</li>
                    </ul>
                </div>

                <!-- Col 4: Contact Info -->
                <div class="col-lg-3 col-md-12 mb-4 mb-lg-0">
                    <h6 class="fw-bold text-white font-heading mb-3">Hubungi Kami</h6>
                    <div class="contact-item justify-content-center justify-content-md-start">
                        <i class="fa-solid fa-location-dot text-success me-3 mt-1"></i>
                        <span class="text-start">Jalan Raya Lengkong, Desa Lengkong, Kec. Cipeundeuy, Kab. Subang, Jawa Barat.</span>
                    </div>
                    <div class="contact-item justify-content-center justify-content-md-start mt-2">
                        <i class="fa-solid fa-envelope text-success me-3 mt-1"></i>
                        <span>kknlengkongcipeundeuy@gmail.com</span>
                    </div>
                    <div class="contact-item justify-content-center justify-content-md-start mt-2">
                        <i class="fa-solid fa-phone text-success me-3 mt-1"></i>
                        <span>08182345678</span>
                    </div>
                </div>
            </div>

            <!-- Copyright line -->
            <hr class="mt-5 border-secondary border-opacity-50">
            <div class="row pt-2 text-center">
                <div class="col-12">
                    <p class="text-secondary small mb-0">&copy; {{ date('Y') }} PilahPintar. Program Kerja KKN Desa Lengkong. All rights reserved.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    @yield('scripts')
</body>
</html>
