@extends('layouts.guest') {{-- Sesuai gambar struktur folder Anda --}}

@section('content')
    {{-- Memanggil komponen dari folder welcome --}}
    @include('welcome.hero')
    @include('welcome.populer')
    @include('welcome.fitur')
    
    {{-- Section ID untuk target redirect setelah isi buku tamu --}}
    <section id="rekomendasi">
        @include('welcome.rekomendasi')
    </section>

    <div id="guestModal" class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm hidden z-[100] flex items-center justify-center p-4 transition-opacity duration-300">
        <div class="bg-white rounded-[2rem] shadow-2xl max-w-md w-full overflow-hidden transform transition-all">
            <div class="p-8 text-center relative">
                <!-- Close Button -->
                <button onclick="closeGuestModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors w-8 h-8 rounded-full hover:bg-gray-100 flex items-center justify-center">
                    <i class="fas fa-times"></i>
                </button>

                <!-- Icon Box -->
                <div class="w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 text-white rounded-2xl flex items-center justify-center mx-auto mb-5 text-2xl shadow-lg shadow-primary-200">
                    <i class="fas fa-user-check"></i>
                </div>
                
                <h3 class="text-2xl font-black text-gray-900 tracking-tight">Selamat Datang!</h3>
                <p class="text-gray-500 text-sm mt-2 leading-relaxed">Apakah Anda sudah terdaftar sebagai anggota Sarakata?</p>
                
                <div class="grid grid-cols-1 gap-3 mt-8">
                    <!-- Member Option -->
                    <a href="{{ route('buku_tamu.index') }}" class="flex items-center gap-4 p-4 border-2 border-primary-100 rounded-2xl hover:border-primary-300 hover:bg-primary-50/50 transition-all group cursor-pointer shadow-sm hover:shadow-md">
                        <div class="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-primary-600 group-hover:bg-gradient-to-br group-hover:from-primary-500 group-hover:to-primary-600 group-hover:text-white transition-all shadow-sm group-hover:shadow-primary-300">
                            <i class="fas fa-id-card"></i>
                        </div>
                        <div class="text-left flex-1 border-gray-100">
                            <div class="font-bold text-gray-900 text-sm">Saya Anggota</div>
                            <div class="text-xs text-gray-400">Punya No. Anggota</div>
                        </div>
                        <i class="fas fa-chevron-right text-primary-300 group-hover:text-primary-500 transition-colors"></i>
                    </a>

                    <!-- Visitor Option -->
                    <a href="{{ route('buku_tamu.index') }}" class="flex items-center gap-4 p-4 border-2 border-gray-100 rounded-2xl hover:border-gray-300 hover:bg-gray-50 transition-all group cursor-pointer shadow-sm hover:shadow-md">
                        <div class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center text-gray-500 group-hover:bg-gray-800 group-hover:text-white transition-all shadow-sm">
                            <i class="fas fa-user-friends"></i>
                        </div>
                        <div class="text-left flex-1 border-gray-100">
                            <div class="font-bold text-gray-900 text-sm">Pengunjung Umum</div>
                            <div class="text-xs text-gray-400">Belum punya member</div>
                        </div>
                        <i class="fas fa-chevron-right text-gray-300 group-hover:text-gray-600 transition-colors"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function openGuestModal() {
        document.getElementById('guestModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
    function closeGuestModal() {
        document.getElementById('guestModal').classList.add('hidden');
        document.body.style.overflow = 'auto';
    }
</script>
@endpush