{{-- HERO SECTION --}}
<section class="hero-gradient relative overflow-hidden">
    {{-- Decorative blobs --}}
    <div class="absolute top-20 -left-20 w-72 h-72 bg-primary-200/30 blob blur-3xl"></div>
    <div class="absolute bottom-10 right-10 w-96 h-96 bg-purple-200/20 blob blur-3xl"></div>
    <div class="absolute top-40 right-1/3 w-48 h-48 bg-blue-200/20 rounded-full blur-2xl"></div>

    <div
        class="max-w-7xl mx-auto px-4 sm:px-6 py-14 sm:py-20 md:py-26
                grid md:grid-cols-2 gap-10 md:gap-16 items-center relative z-10">

        <div class="fade-up">
            {{-- Badge --}}
            <div
                class="inline-flex items-center gap-2 px-3 py-2 bg-white/80
                        rounded-full shadow-sm border border-primary-100 mb-6">
                <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>

                <span class="text-[11px] sm:text-xs font-semibold text-primary-700 tracking-wide">
                    Sistem Informasi Perpustakaan
                </span>
            </div>

            <h1
                class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl
                       font-black leading-tight text-gray-900 tracking-tight">
                Sistem Informasi Perpustakaan

                <span class="gradient-text block mt-1 sm:mt-2">
                    Daerah Jember
                </span>
            </h1>

            <p
                class="mt-5 text-sm sm:text-base md:text-lg text-gray-500
                      max-w-lg leading-relaxed">
                Akses ribuan koleksi buku, jurnal, dan referensi akademik
                dalam satu platform terintegrasi — kapan saja, di mana saja.
            </p>

            {{-- BUTTONS --}}
            <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:flex-wrap">

                <a href="{{ route('katalog.index') }}"
                    class="w-full sm:w-auto px-6 py-3.5
                          bg-gradient-to-r from-blue-600 to-blue-700
                          text-white rounded-xl sm:rounded-2xl
                          font-bold text-sm shadow-xl shadow-blue-200
                          hover:from-blue-700 hover:to-blue-800
                          transition-all inline-flex items-center
                          gap-2 justify-center">

                    <i class="fas fa-search"></i>
                    Cari Katalog Buku
                </a>

                <a href="{{ route('buku_tamu.index') }}"
                    class="w-full sm:w-auto px-6 py-3.5
                          bg-gradient-to-r from-primary-600 to-primary-700
                          text-white rounded-xl sm:rounded-2xl
                          font-bold text-sm shadow-xl shadow-primary-200
                          hover:from-primary-700 hover:to-primary-800
                          transition-all inline-flex items-center
                          gap-2 justify-center">

                    <i class="fas fa-book-reader"></i>
                    Mulai Kunjungan
                </a>

                <a href="#fitur"
                    class="w-full sm:w-auto px-6 py-3.5
                          bg-white text-gray-700 rounded-xl sm:rounded-2xl
                          font-bold text-sm shadow-sm border border-gray-200
                          hover:border-primary-200 hover:text-primary-600
                          transition-all inline-flex items-center
                          gap-2 justify-center">

                    <i class="fas fa-info-circle"></i>
                    Pelajari Lebih Lanjut
                </a>
            </div>

            {{-- STATS --}}
            <div class="mt-10 grid grid-cols-3 gap-3 sm:gap-6">

                <div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
                    <div class="text-xl sm:text-3xl font-black text-gray-900">
                        1000+
                    </div>

                    <div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
                        Koleksi Buku
                    </div>
                </div>

                <div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
                    <div class="text-xl sm:text-3xl font-black text-gray-900">
                        500+
                    </div>

                    <div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
                        Anggota Aktif
                    </div>
                </div>

                <div class="bg-white/50 rounded-xl p-3 sm:p-4 text-center">
                    <div class="text-xl sm:text-3xl font-black text-gray-900">
                        24/7
                    </div>

                    <div class="text-[10px] sm:text-xs text-gray-400 font-medium mt-1">
                        Akses Digital
                    </div>
                </div>

            </div>
        </div>
        {{-- IMAGE --}}
        <div class="hidden md:flex justify-center relative items-center">
            <div
                class="absolute inset-0 bg-gradient-to-tr
                        from-primary-400/10 to-purple-400/10
                        rounded-[3rem] blur-2xl">
            </div>

            <img src="{{ asset('img/buku sampul awal.png') }}"
                class="w-[500px] lg:w-[600px] object-contain
                        drop-shadow-2xl relative z-10 rounded-3xl"
                alt="Animasi Perpustakaan Digital">
        </div>

    </div>
</section>
