<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-bs-theme="light">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selamat Datang di {{ config('app.name', 'Perpus Digital') }}</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>

<body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="56">

    @php
    // Dummy data untuk landing page (Hanya contoh)
    $buku_unggulan = \App\Services\DummyDataService::getAllBooks()->take(6);
    $stats = [
    ['label' => 'Koleksi Buku', 'value' => 12500, 'icon' => 'bi-bookshelf'],
    ['label' => 'Pengguna Aktif', 'value' => 4500, 'icon' => 'bi-person-lines-fill'],
    ['label' => 'Total Dibaca', 'value' => '900K+', 'icon' => 'bi-hand-thumbs-up-fill'],
    ['label' => 'Tahun Berdiri', 'value' => 2018, 'icon' => 'bi-clock-fill'],
    ];
    @endphp

    {{-- Navbar --}}
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm landing-navbar sticky-top" id="mainNav">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary d-flex align-items-center" href="#">
                <i class="bi bi-book-half me-2"></i>
                <span>DIGIPUS.GO</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">

                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link-landing active" href="#hero">Beranda</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link-landing" href="#koleksi">Koleksi</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link-landing" href="#fitur">Fitur</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link-landing" href="#tentang">Tentang</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link-landing" href="#bantuan">Bantuan</a>
                    </li>
                </ul>

                <div class="d-grid d-lg-block my-3 my-lg-0">
                    <div class="dropdown">
                        <button
                            class="btn btn-primary dropdown-toggle fw-semibold w-100 d-flex align-items-center justify-content-center"
                            type="button" data-bs-toggle="dropdown" aria-expanded="false"
                            style="border-radius: 0.6rem; padding: 0.5rem 1.25rem;">
                            <i class="bi bi-person-circle me-2"></i>
                            <span>Masuk</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 mt-2 p-2"
                            style="border-radius: 12px; min-width: 250px;">
                            <li class="px-3 py-2">
                                <h6 class="fw-bold text-muted mb-0" style="font-size: 0.75rem;">PILIH PERAN ANDA</h6>
                            </li>
                            <li>
                                <a class="dropdown-item d-flex align-items-start gap-3 py-2 rounded"
                                    href="{{ route('login', ['role' => 'siswa']) }}">
                                    <i class="bi bi-person-badge text-primary" style="font-size: 1.25rem;"></i>
                                    <div>
                                        <div class="fw-semibold">Siswa</div>
                                        <small class="text-muted d-block" style="font-size: 0.75rem;">Pinjam & Baca
                                            Buku</small>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item d-flex align-items-start gap-3 py-2 rounded"
                                    href="{{ route('login', ['role' => 'guru']) }}">
                                    <i class="bi bi-person-workspace text-success" style="font-size: 1.25rem;"></i>
                                    <div>
                                        <div class="fw-semibold">Guru</div>
                                        <small class="text-muted d-block" style="font-size: 0.75rem;">Pinjam, Baca &
                                            Pantau Laporan</small>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <hr class="dropdown-divider my-2">
                            </li>
                            <li>
                                <a class="dropdown-item d-flex align-items-center gap-3 text-danger py-2 rounded"
                                    href="{{ route('admin.login') }}">
                                    <i class="bi bi-shield-lock" style="font-size: 1.25rem;"></i>
                                    <div class="fw-semibold">Login Petugas</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <main>

        {{-- Hero Section --}}
        <section id="hero" class="landing-hero-section text-white">
            <div class="container py-5">
                <div class="row align-items-center g-5">
                    <div class="col-lg-7">
                        <div class="badge bg-white text-primary px-3 py-2 mb-3" style="border-radius: 50px;">
                            <i class="bi bi-stars me-1"></i> Perpustakaan Digital
                        </div>
                        <h1 class="display-3 fw-bold mb-4">Jelajahi Ribuan Buku Digital di Satu Tempat</h1>
                        <p class="fs-5 mb-5 opacity-75">
                            Gerbang menuju dunia pengetahuan tanpa batas. Akses ribuan koleksi buku digital, kapan saja,
                            di mana saja, dan tingkatkan minat baca Anda.
                        </p>

                        <div class="d-grid gap-3 d-sm-flex">
                            <a href="#koleksi" class="btn fw-semibold btn-hero-solid"
                                style="border-radius: 12px; padding: 0.75rem 2rem;">
                                <i class="bi bi-search me-2"></i> Mulai Membaca
                            </a>
                        </div>

                    </div>
                    <div class="col-lg-5 d-none d-lg-block text-center">
                        <div class="landing-hero-illustration mx-auto">
                            <img src="{{ asset('images/assets/hero-image.svg') }}" alt="Hero Illustration"
                                class="img-fluid" style="max-width: 100%; height: auto;">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="py-2"></div>

        {{-- Koleksi Section --}}
        <section id="koleksi" class="py-5">
            <div class="container">
                <h2 class="text-center fw-bold mb-5">Koleksi Unggulan Terbaru</h2>
                <div class="row g-4 mb-4 justify-content-center">
                    @foreach ($buku_unggulan as $buku)
                    <div class="col-6 col-md-4 col-lg-2">
                        <div class="card h-100 border-0 shadow-sm">
                            <img src="{{ asset($buku['cover']) }}" class="card-img-top"
                                alt="Cover {{ $buku['judul'] }}">
                            <div class="card-body p-3">
                                <span class="badge bg-primary-soft text-primary small mb-2">{{ $buku['kategori']
                                    }}</span>
                                <h6 class="card-title fw-bold mb-1">{{ $buku['judul'] }}</h6>
                                <p class="card-text small text-muted mb-1">{{ $buku['penulis'] }}</p>
                                <div class="small text-warning">
                                    <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                        class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
                                        class="bi bi-star-half"></i>
                                    (4.5)
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>

        <div class="py-2"></div>

        {{-- Fitur Section --}}
        <section id="fitur" class="py-5 bg-light">
            <div class="container">
                <div class="text-center mb-5">
                    <span class="badge bg-primary-soft text-primary px-3 py-2 mb-3" style="border-radius: 50px;">
                        Keunggulan Kami
                    </span>
                    <h2 class="fw-bold mb-3">Manfaat Menggunakan DIGIPUS.GO</h2>
                    <p class="lead text-muted">Akses mudah, koleksi lengkap, pengalaman membaca yang lebih baik.</p>
                </div>

                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm">
                            <div class="icon-circle border border-2 border-primary text-primary mb-3"
                                style="width: 50px; height: 50px; border-radius: 10px;">
                                <i class="bi bi-wifi"></i>
                            </div>
                            <h5 class="fw-bold">Akses Online & Offline</h5>
                            <p class="text-muted mb-0">Baca kapan saja. Unduh buku untuk dibaca tanpa koneksi internet.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm">
                            <div class="icon-circle border border-2 border-primary text-primary mb-3"
                                style="width: 50px; height: 50px; border-radius: 10px;">
                                <i class="bi bi-clock-history"></i>
                            </div>
                            <h5 class="fw-bold">Peminjaman Digital Otomatis</h5>
                            <p class="text-muted mb-0">Proses pinjam dan kembali tercatat otomatis, bebas antri.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm">
                            <div class="icon-circle border border-2 border-primary text-primary mb-3"
                                style="width: 50px; height: 50px; border-radius: 10px;">
                                <i class="bi bi-lightbulb-fill"></i>
                            </div>
                            <h5 class="fw-bold">Rekomendasi Personal</h5>
                            <p class="text-muted mb-0">Temukan buku baru berdasarkan minat dan riwayat baca Anda.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm">
                            <div class="icon-circle border border-2 border-primary text-primary mb-3"
                                style="width: 50px; height: 50px; border-radius: 10px;">
                                <i class="bi bi-phone"></i>
                            </div>
                            <h5 class="fw-bold">Akses 24/7 Responsif</h5>
                            <p class="text-muted mb-0">Tersedia 24 jam sehari, 7 hari seminggu, di semua perangkat.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm">
                            <div class="icon-circle border border-2 border-primary text-primary mb-3"
                                style="width: 50px; height: 50px; border-radius: 10px;">
                                <i class="bi bi-journal-bookmark-fill"></i>
                            </div>
                            <h5 class="fw-bold">Tandai & Simpan</h5>
                            <p class="text-muted mb-0">Buat koleksi pribadi, tandai halaman penting, dan lanjutkan
                                bacaan Anda.</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 p-4 border-0 shadow-sm">
                            <div class="icon-circle border border-2 border-primary text-primary mb-3"
                                style="width: 50px; height: 50px; border-radius: 10px;">
                                <i class="bi bi-cloud-arrow-up-fill"></i>
                            </div>
                            <h5 class="fw-bold">Konten Selalu Baru</h5>
                            <p class="text-muted mb-0">Ribuan buku dan modul pembelajaran terbaru ditambahkan setiap
                                bulan.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="py-2"></div>

        {{-- About Section --}}
        <section id="tentang" class="py-5">
            <div class="container">
                <div class="row align-items-center g-5">

                    {{-- Bagian Logo (Kolom Kanan) --}}
                    <div class="col-lg-6 order-lg-2 text-center">
                        <img src="{{ asset('images/assets/logo-smp.png') }}" alt="Logo SMPN 1 Bagor" class="img-fluid"
                            style="max-width: 250px; height: auto;">
                    </div>

                    {{-- Bagian Teks (Kolom Kiri) --}}
                    <div class="col-lg-6 order-lg-1">
                        <span class="badge bg-primary-soft text-primary px-3 py-2 mb-3" style="border-radius: 50px;">
                            Tentang Kami
                        </span>
                        <h2 class="fw-bold mb-4">Misi Kami: Mencerdaskan Bangsa Melalui Akses Digital</h2>
                        <p class="lead text-muted">
                            <strong class="fw-semibold">DIGIPUS.GO</strong> adalah platform perpustakaan digital resmi
                            milik
                            <strong class="text-primary">SMPN 1 Bagor</strong>.
                            Kami bertujuan menyediakan akses mudah, cepat, dan merata terhadap sumber daya
                            pengetahuan berkualitas tinggi bagi seluruh siswa dan staf pengajar.
                        </p>
                        <ul class="list-unstyled text-muted">
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i> Mewujudkan
                                ekosistem literasi digital yang inklusif.</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i> Mendukung
                                proses pembelajaran berbasis teknologi.</li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-primary me-2"></i> Menjadikan
                                membaca sebagai kebiasaan sehari-hari.</li>
                        </ul>
                    </div>

                </div>
            </div>
        </section>

        <div class="py-3"></div>

        {{-- Statistik Section --}}
        <section id="statistik" class="py-5 bg-primary-light">
            <div class="container">
                <h2 class="text-center fw-bold mb-5 text-dark">DIGIPUS.GO Dalam Angka</h2>
                <div class="row g-4 text-center">
                    @foreach ($stats as $stat)
                    <div class="col-sm-6 col-md-3">
                        <div class="p-4 bg-white shadow-sm h-100 landing-stat-card" style="border-radius: 1rem;">
                            <i class="bi {{ $stat['icon'] }} display-5 text-primary mb-3"></i>
                            <h2 class="fw-bold text-dark mb-1">{{ $stat['value'] }}</h2>
                            <p class="text-muted fw-semibold mb-0">{{ $stat['label'] }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>

        <div class="py-3"></div>

        {{-- CTA Section --}}
        <section id="bantuan" class="py-5">
            <div class="container">
                <div class="text-center p-5 text-white landing-cta-section">
                    <h2 class="display-6 fw-bold mb-3">Siap Memulai Petualangan Membaca Anda?</h2>
                    <p class="lead opacity-75 mb-4">Baca sekarang dan akses ribuan koleksi buku digital gratis!</p>
                    <a href="{{ route('login', ['role' => 'siswa']) }}" class="btn btn-warning btn-lg fw-bold"
                        style="border-radius: 12px;" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-person-fill-add me-2"></i> Baca Sekarang
                    </a>
                </div>
            </div>
        </section>

    </main>

    {{-- Footer Section --}}
    <footer class="mt-5 py-5 landing-footer bg-primary">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="d-flex align-items-center mb-3">
                        <i class="bi bi-book-half text-white fs-2 me-2"></i>
                        <h5 class="fw-bold text-white mb-0">DIGIPUS.GO</h5>
                    </div>
                    <p class="small text-white-50">Gerbang digital untuk seluruh koleksi buku pendidikan dan umum.
                        Dikelola oleh [Nama Institusi/Sekolah Anda].</p>
                    <div class="d-flex gap-3 fs-5">
                        <a href="#" class="text-white-50"><i class="bi bi-twitter"></i></a>
                        <a href="#" class="text-white-50"><i class="bi bi-facebook"></i></a>
                        <a href="#" class="text-white-50"><i class="bi bi-instagram"></i></a>
                    </div>
                </div>

                <div class="col-6 col-md-2">
                    <h6 class="text-white fw-bold mb-3">Link Cepat</h6>
                    <ul class="list-unstyled small">
                        <li class="mb-2"><a href="#tentang" class="text-decoration-none text-white-50">Tentang</a>
                        </li>
                        <li class="mb-2"><a href="#koleksi" class="text-decoration-none text-white-50">Koleksi</a>
                        </li>
                        <li class="mb-2"><a href="#fitur" class="text-decoration-none text-white-50">Fitur</a>
                        </li>
                        <li class="mb-2"><a href="#statistik" class="text-decoration-none text-white-50">Statistik</a>
                        </li>
                    </ul>
                </div>

                <div class="col-6 col-md-3">
                    <h6 class="text-white fw-bold mb-3">Informasi Hukum</h6>
                    <ul class="list-unstyled small">
                        <li class="mb-2"><a href="#" class="text-decoration-none text-white-50">Kebijakan
                                Privasi</a></li>
                        <li class="mb-2"><a href="#" class="text-decoration-none text-white-50">Syarat
                                Penggunaan</a></li>
                        <li class="mb-2"><a href="#" class="text-decoration-none text-white-50">Bantuan</a>
                        </li>
                    </ul>
                </div>

                <div class="col-md-3">
                    <h6 class="text-white fw-bold mb-3">Hubungi Kami</h6>
                    <ul class="list-unstyled small">
                        <li class="mb-2 text-white-50"><i class="bi bi-envelope-fill me-2"></i> smpn1bagor@yahoo.co.id
                        </li>
                        <li class="mb-2 text-white-50"><i class="bi bi-telephone-fill me-2"></i> (+62) 856-0642-8357</li>
                        <li class="mb-2 text-white-50"><i class="bi bi-geo-alt-fill me-2"></i> Banaran Kulon, Kec. Bagor, Kabupaten Nganjuk, Jawa Timur 64461
                        </li>
                    </ul>
                </div>
            </div>

            <hr class="mt-4 border-secondary opacity-25">
            <div class="text-center small text-white-50">
                &copy; {{ date('Y') }} DIGIPUS.GO. Hak Cipta Dilindungi.
            </div>
        </div>
    </footer>

    <script>
        document.querySelectorAll('#navbarNav .nav-link').forEach(link => {
            link.addEventListener('click', () => {
                const navbarCollapse = document.getElementById('navbarNav');
                if (navbarCollapse.classList.contains('show')) {
                    new bootstrap.Collapse(navbarCollapse, {
                        toggle: false
                    }).hide();
                }
            });
        });
    </script>
</body>

</html>