{{-- 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-6 py-24 md:py-32 grid md:grid-cols-2 gap-16 items-center relative z-10">

        <div class="fade-up">
            {{-- Badge --}}
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 rounded-full shadow-sm border border-primary-100 mb-8">
                <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                <span class="text-xs font-semibold text-primary-700 tracking-wide">Sistem Informasi Perpustakaan</span>
            </div>

            <h1 class="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.1] text-gray-900 tracking-tight">
                Sistem Informasi Perpustakaan
                <span class="gradient-text block mt-2">Daerah Jember</span>
            </h1>

            <p class="mt-6 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>

            <div class="mt-10 flex flex-col sm:flex-row gap-4 flex-wrap">
                <a href="{{ route('katalog.index') }}" class="px-8 py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-2xl font-bold text-sm shadow-xl shadow-blue-200 hover:shadow-blue-300 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="px-8 py-4 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-2xl font-bold text-sm shadow-xl shadow-primary-200 hover:shadow-primary-300 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="px-8 py-4 bg-white text-gray-700 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-14 flex gap-10">
                <div>
                    <div class="text-3xl font-black text-gray-900">1000+</div>
                    <div class="text-xs text-gray-400 font-medium mt-1">Koleksi Buku</div>
                </div>
                <div class="border-l border-gray-200 pl-10">
                    <div class="text-3xl font-black text-gray-900">500+</div>
                    <div class="text-xs text-gray-400 font-medium mt-1">Anggota Aktif</div>
                </div>
                <div class="border-l border-gray-200 pl-10">
                    <div class="text-3xl font-black text-gray-900">24/7</div>
                    <div class="text-xs text-gray-400 font-medium mt-1">Akses Digital</div>
                </div>
            </div>
        </div>

        <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-[600px] object-contain drop-shadow-2xl relative z-10 rounded-3xl"
                 alt="Animasi Perpustakaan Digital">
        </div>

    </div>
</section>