@if(!Auth::check())
<section class="relative h-[calc(100vh-64px)] w-full flex items-center overflow-hidden"
         style="background-image: url('{{ asset('images/hero-home.jpg') }}'); background-size: cover; background-position: center; background-repeat: no-repeat;">
        
    <div class="absolute inset-0 bg-slate-950/65 backdrop-blur-[1px]"></div>
    
    <div class="absolute inset-0 opacity-10">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 1px); background-size: 40px 40px;"></div>
    </div>
    
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-4">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
            
            <div class="text-center lg:text-left lg:col-span-7 xl:col-span-8">
                <div class="space-y-4 lg:space-y-6">
                    <h2 class="text-2xl md:text-2xl lg:text-3xl font-bold text-white leading-tight tracking-wide drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
                        Buku Digital tentang
                    </h2>
                    
                    <h1 class="text-xl md:text-3xl lg:text-4xl font-extrabold text-white leading-tight tracking-normal drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
                        Merancang Pembelajaran Indonesia Inovatif:
                    </h1>
                    
                    <h1 class="text-base md:text-3xl lg:text-4xl font-semibold text-blue-300 leading-relaxed drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
                        Integrasi Case Method, Deep Learning, dan Project based Learning
                    </h1>
                </div>
            </div>
            
            <div class="flex justify-center lg:justify-end lg:col-span-5 xl:col-span-4">
                <div class="w-full max-w-[290px] p-5 backdrop-blur-md bg-white/95 rounded-xl shadow-2xl border border-white/40">
                    <div class="text-center mb-4">
                        <h2 class="text-base font-bold text-gray-800 tracking-wide">Selamat Datang</h2>
                        <p class="text-gray-500 text-[10px] mt-0.5">Masuk untuk melanjutkan membaca</p>
                    </div>
                    
                    <form method="POST" action="{{ route('login') }}" class="space-y-4">
                        @csrf
                        <div>
                            <label class="block text-[11px] font-bold text-gray-700 mb-1">Email atau Username</label>
                            <input name="login" type="text" required 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs bg-white/90 shadow-sm" 
                                   placeholder="Email atau username" 
                                   value="{{ old('login') }}">
                        </div>
                        <div>
                            <label class="block text-[11px] font-bold text-gray-700 mb-1">Password</label>
                            <input name="password" type="password" required 
                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-xs bg-white/90 shadow-sm" 
                                   placeholder="Masukkan password">
                        </div>
                        
                        <div class="flex flex-col gap-2 py-1">
                            <label class="flex items-center gap-2 cursor-pointer w-max">
                                <input type="checkbox" name="remember" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 w-3.5 h-3.5">
                                <span class="text-[11px] text-gray-600 select-none">Ingat saya</span>
                            </label>
                            <a href="{{ route('password.request') }}" class="text-[11px] text-blue-600 hover:underline">Lupa password?</a>
                        </div>
                        
                        <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-lg font-bold text-xs hover:bg-blue-700 transition shadow-md mt-2 tracking-wide">
                            Masuk
                        </button>
                    </form>
                </div>
            </div>

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

@else
    <section class="relative min-h-[450px] flex items-center overflow-hidden"
             style="background-image: url('{{ asset('images/hero-home.jpg') }}'); background-size: cover; background-position: center; background-repeat: no-repeat;">
        
        <div class="absolute inset-0 bg-slate-950/60 backdrop-blur-[1px]"></div>
        
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 1px); background-size: 40px 40px;"></div>
        </div>
        
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 w-full">
            <div class="text-center lg:text-left">
                <div class="inline-flex items-center gap-2 bg-white/20 text-white px-4 py-1.5 rounded-full text-xs font-medium mb-4 backdrop-blur-sm">
                    <span class="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></span>
                    Selamat Datang, {{ Auth::user()->name }}! 👋
                </div>
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight mb-4 drop-shadow-lg">
                    Selamat datang, {{ Auth::user()->name }}! Ayo Temukan keseruan dan keajaiban dari 
                    <span class="text-blue-400">setiap kisah</span> 
                    di dalam buku digital.
                </h1>
                <p class="text-base text-blue-100 mb-6 max-w-2xl mx-auto lg:mx-0">
                    Platform membaca buku digital dengan ribuan koleksi menarik untuk semua jenjang pendidikan.
                </p>
                <div class="flex flex-wrap gap-3 justify-center lg:justify-start">
                    <a href="{{ route('book.read') }}" class="inline-flex items-center gap-2 bg-white text-blue-600 px-5 py-2.5 rounded-lg font-semibold text-sm hover:bg-gray-100 transition shadow-md">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        Lanjutkan Membaca
                    </a>
                    <a href="{{ route('user.my-library') }}" class="inline-flex items-center gap-2 bg-blue-600 border border-blue-600 text-white px-5 py-2.5 rounded-lg font-semibold text-sm hover:bg-blue-700 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                        Pustakaku
                    </a>
                </div>
            </div>
        </div>
    </section>

    <div id="books-section" class="py-12 bg-gray-50/50">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <div class="text-center mb-12">
                <h1 class="text-xl md:text-2xl font-bold text-gray-900 tracking-tight max-w-3xl mx-auto">
                    Selamat belajar merancang Pembelajaran Bahasa Indonesia Inovatif
                </h1>
            </div>
            
            @if(isset($chapters) && $chapters->count() > 0)
                <hr class="border-gray-200 mb-10">

                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5">
                    @foreach($chapters as $index => $chapter)
                    <a href="{{ route('book.read', $chapter->chapter_number) }}" class="group">
                        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition duration-200">
                            <div class="aspect-[2/3] bg-gradient-to-br from-blue-400 to-blue-600 relative flex items-center justify-center p-4">
                                <svg class="w-10 h-10 text-white opacity-40 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                                </svg>

                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent p-2 flex justify-between text-white text-[10px] z-10">
                                    <span>👁 {{ number_format($chapter->total_views ?? 0) }}</span>
                                    <span class="text-yellow-300">⭐ {{ number_format($chapter->rating ?? 0, 1) }}</span>
                                </div>
                            </div>
                            
                            <div class="p-2.5 text-center bg-white border-t border-gray-50">
                                <h3 class="font-medium text-xs text-gray-700 truncate group-hover:text-blue-600 transition">
                                    Bab {{ $chapter->chapter_number }}
                                </h3>
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>

            @else
                <div class="text-center py-14 bg-white rounded-xl border border-gray-100 max-w-md mx-auto shadow-sm">
                    <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                    <h3 class="text-sm font-semibold text-gray-800 mb-1">Belum Ada Bab</h3>
                    <p class="text-xs text-gray-400">Belum ada materi atau bab yang tersedia saat ini.</p>
                    @if(Auth::user()->isAdmin())
                        <a href="{{ route('admin.chapters.create') }}" class="inline-block mt-3 text-blue-600 hover:underline text-sm">Tambah Bab Pertama</a>
                    @endif
                </div>
            @endif
            
            <div class="text-center mt-8">
                <a href="{{ route('home') }}" class="inline-flex items-center justify-center gap-2 border-2 border-blue-600 text-blue-600 bg-white px-5 py-2.5 rounded-lg font-semibold text-sm hover:bg-blue-600 hover:text-white transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3"/>
                    </svg>
                    Kembali ke Beranda
                </a>
            </div>
        </div>
    </div>

@endif