@extends('layouts.app')

@section('title', 'Penerimaan Mahasiswa Baru (PMB)')

@section('content')
<!-- Hero Section -->
<div class="relative text-white py-20 overflow-hidden" style="background: linear-gradient(135deg, #004d28 0%, #006837 50%, #007d40 100%);">
    <!-- Decorative Background -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 left-0 w-64 h-64 bg-white rounded-full -translate-x-1/2 -translate-y-1/2"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full translate-x-1/3 translate-y-1/3"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center animate-fade-in-up">
            <div class="inline-block mb-4">
                <span class="backdrop-blur-sm text-white px-4 py-2 rounded-full text-sm font-semibold" style="background: rgba(0, 109, 55, 0.3); border: 1px solid rgba(220, 252, 231, 0.3);">
                    <i class="fas fa-graduation-cap mr-2"></i>Tahun Akademik 2024/2025
                </span>
            </div>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4 leading-tight">
                Penerimaan Mahasiswa Baru
            </h1>
            <p class="text-xl md:text-2xl mb-2" style="color: #dcfce7;">STAI AN Nahdliyah Darussalamah Musi Rawas</p>
            <p class="mt-6 text-base md:text-lg max-w-3xl mx-auto" style="color: #dcfce7;">
                <i class="fas fa-star text-yellow-300 mr-2"></i>
                Wujudkan impian Anda untuk meraih pendidikan tinggi berkualitas
                <i class="fas fa-star text-yellow-300 ml-2"></i>
            </p>
        </div>
    </div>
</div>

<!-- Pendaftaran Section -->
@if($pendaftaran)
<div class="py-12" style="background: linear-gradient(135deg, #f0fdf4 0%, white 50%, #f0fdf4 100%);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="relative bg-white rounded-2xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-all duration-500">
            <!-- Decorative gradient -->
            <div class="absolute top-0 right-0 w-64 h-64 rounded-full -translate-y-1/2 translate-x-1/2" style="background: linear-gradient(135deg, #86efac, #006837); opacity: 0.1;"></div>
            
            <div class="relative p-8 md:p-12 text-center">
                <div class="mb-6 animate-bounce-slow">
                    @if($pendaftaran->icon)
                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-2xl shadow-lg" style="background: linear-gradient(135deg, #006837, #007d40);">
                            <i class="{{ $pendaftaran->icon }} text-4xl text-white"></i>
                        </div>
                    @endif
                </div>
                
                <span class="inline-block bg-green-100 text-green-800 px-4 py-1 rounded-full text-sm font-semibold mb-4">
                    <i class="fas fa-circle text-green-500 mr-1 text-xs animate-pulse"></i> Pendaftaran Dibuka
                </span>
                
                <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">{{ $pendaftaran->judul }}</h2>
                
                @if($pendaftaran->deskripsi)
                    <p class="text-gray-600 text-lg mb-8 max-w-2xl mx-auto leading-relaxed">{{ $pendaftaran->deskripsi }}</p>
                @endif
                
                @if($pendaftaran->link_pendaftaran)
                    <a href="{{ $pendaftaran->link_pendaftaran }}" target="_blank" 
                       class="inline-flex items-center gap-2 text-white font-bold py-4 px-10 rounded-xl transition-all transform hover:scale-105 hover:shadow-2xl group" style="background: linear-gradient(to right, #006837, #007d40);" onmouseover="this.style.background='linear-gradient(to right, #007d40, #008a47)'" onmouseout="this.style.background='linear-gradient(to right, #006837, #007d40)'">
                        <i class="fas fa-edit text-xl"></i>
                        <span>Daftar Sekarang</span>
                        <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                    </a>
                    <p class="mt-4 text-sm text-gray-500">
                        <i class="fas fa-clock mr-1"></i> Proses cepat & mudah
                    </p>
                @endif
            </div>
        </div>
    </div>
</div>
@endif

<!-- Jalur Masuk Section -->
@if($jalurMasuk->count() > 0)
<div class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 animate-fade-in-up">
            <span class="inline-block px-4 py-1 rounded-full text-sm font-semibold mb-4" style="background-color: #dcfce7; color: #006837;">
                <i class="fas fa-route mr-1"></i> Jalur Masuk
            </span>
            <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">Jalur Penerimaan</h2>
            <p class="text-gray-600 text-lg max-w-2xl mx-auto">Pilih jalur penerimaan yang sesuai dengan kondisi Anda</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            @foreach($jalurMasuk as $item)
            <div class="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 transform hover:-translate-y-2">
                @if($item->gambar)
                    <div class="relative h-48 overflow-hidden">
                        <img src="{{ asset('storage/' . $item->gambar) }}" alt="{{ $item->judul }}" 
                             class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    </div>
                @endif
                
                <div class="p-6">
                    <div class="text-center mb-4">
                        @if($item->icon)
                            <div class="inline-flex items-center justify-center w-16 h-16 rounded-xl shadow-lg mb-4 transform group-hover:rotate-6 transition-transform duration-300" style="background: linear-gradient(135deg, #006837, #007d40);">
                                <i class="{{ $item->icon }} text-2xl text-white"></i>
                            </div>
                        @endif
                        <h3 class="text-xl font-bold text-gray-900 transition-colors" onmouseover="this.style.color='#006837'" onmouseout="this.style.color=''">{{ $item->judul }}</h3>
                    </div>
                    
                    @if($item->deskripsi)
                        <p class="text-gray-600 mb-6 line-clamp-3 text-sm leading-relaxed">{{ $item->deskripsi }}</p>
                    @endif
                    
                    <a href="{{ route('pmb.show', $item->slug) }}" 
                       class="flex items-center justify-center gap-2 w-full text-white font-semibold py-3 px-4 rounded-xl transition-all group/btn" style="background: linear-gradient(to right, #006837, #007d40);" onmouseover="this.style.background='linear-gradient(to right, #007d40, #008a47)'" onmouseout="this.style.background='linear-gradient(to right, #006837, #007d40)'">
                        <span>Selengkapnya</span>
                        <i class="fas fa-arrow-right transition-transform group-hover/btn:translate-x-1"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

<!-- Biaya Kuliah Section -->
@if($biayaKuliah->count() > 0)
<div class="py-16 bg-gradient-to-br from-gray-50 to-green-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 animate-fade-in-up">
            <span class="inline-block bg-green-100 text-green-800 px-4 py-1 rounded-full text-sm font-semibold mb-4">
                <i class="fas fa-dollar-sign mr-1"></i> Biaya Kuliah
            </span>
            <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">Informasi Biaya Kuliah</h2>
            <p class="text-gray-600 text-lg max-w-2xl mx-auto">Transparansi biaya pendidikan untuk kemudahan perencanaan Anda</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
            @foreach($biayaKuliah as $item)
            <div class="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 p-6 lg:p-8 border border-gray-100 transform hover:-translate-y-1">
                <div class="flex items-start gap-4 mb-6">
                    @if($item->icon)
                        <div class="flex-shrink-0">
                            <div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl shadow-lg transform group-hover:scale-110 group-hover:rotate-6 transition-all duration-300">
                                <i class="{{ $item->icon }} text-2xl text-white"></i>
                            </div>
                        </div>
                    @endif
                    <div class="flex-1">
                        <h3 class="text-xl lg:text-2xl font-bold text-gray-900 mb-2 group-hover:text-green-600 transition-colors">{{ $item->judul }}</h3>
                        @if($item->deskripsi)
                            <p class="text-gray-600 leading-relaxed">{{ $item->deskripsi }}</p>
                        @endif
                    </div>
                </div>
                
                <a href="{{ route('pmb.show', $item->slug) }}" 
                   class="inline-flex items-center gap-2 text-green-600 hover:text-green-700 font-semibold group/link transition-colors">
                    <span>Lihat Detail</span>
                    <i class="fas fa-arrow-right transition-transform group-hover/link:translate-x-1"></i>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

<!-- Beasiswa Section -->
@if($beasiswa->count() > 0)
<div class="py-16 bg-white relative overflow-hidden">
    <!-- Decorative background -->
    <div class="absolute inset-0 opacity-5">
        <div class="absolute top-10 left-10 w-32 h-32 bg-yellow-400 rounded-full"></div>
        <div class="absolute bottom-10 right-10 w-40 h-40 bg-orange-400 rounded-full"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center mb-12 animate-fade-in-up">
            <span class="inline-block bg-gradient-to-r from-yellow-100 to-orange-100 text-orange-800 px-4 py-1 rounded-full text-sm font-semibold mb-4 border border-orange-200">
                <i class="fas fa-award mr-1"></i> Beasiswa Tersedia
            </span>
            <h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">Program Beasiswa</h2>
            <p class="text-gray-600 text-lg max-w-2xl mx-auto">Raih kesempatan pendidikan berkualitas dengan berbagai program beasiswa</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            @foreach($beasiswa as $item)
            <div class="group bg-gradient-to-br from-yellow-50 via-orange-50 to-yellow-50 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border-2 border-yellow-200 transform hover:-translate-y-2">
                @if($item->gambar)
                    <div class="relative h-40 overflow-hidden">
                        <img src="{{ asset('storage/' . $item->gambar) }}" alt="{{ $item->judul }}" 
                             class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-orange-900/50 to-transparent"></div>
                        <div class="absolute top-3 right-3">
                            <span class="bg-yellow-400 text-yellow-900 px-3 py-1 rounded-full text-xs font-bold shadow-lg">
                                <i class="fas fa-star mr-1"></i> BEASISWA
                            </span>
                        </div>
                    </div>
                @endif
                
                <div class="p-6">
                    <div class="text-center mb-4">
                        @if($item->icon)
                            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-orange-500 to-yellow-500 rounded-xl shadow-lg mb-4 transform group-hover:scale-110 group-hover:-rotate-6 transition-all duration-300">
                                <i class="{{ $item->icon }} text-2xl text-white"></i>
                            </div>
                        @endif
                        <h3 class="text-xl font-bold text-gray-900 group-hover:text-orange-600 transition-colors">{{ $item->judul }}</h3>
                    </div>
                    
                    @if($item->deskripsi)
                        <p class="text-gray-700 mb-6 line-clamp-3 text-sm leading-relaxed">{{ $item->deskripsi }}</p>
                    @endif
                    
                    <a href="{{ route('pmb.show', $item->slug) }}" 
                       class="flex items-center justify-center gap-2 w-full bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white font-bold py-3 px-4 rounded-xl transition-all shadow-md hover:shadow-lg group/btn">
                        <span>Info Lengkap</span>
                        <i class="fas fa-arrow-right transition-transform group-hover/btn:translate-x-1"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

<!-- CTA Section -->
<div class="relative text-white py-20 overflow-hidden" style="background: linear-gradient(135deg, #004d28 0%, #006837 50%, #007d40 100%);">
    <!-- Animated background elements -->
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-0 left-1/4 w-64 h-64 rounded-full animate-pulse" style="background-color: #86efac;"></div>
        <div class="absolute bottom-0 right-1/4 w-96 h-96 rounded-full animate-pulse" style="background-color: #86efac; animation-delay: 1s;"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <div class="animate-fade-in-up">
            <div class="inline-block mb-4">
                <span class="bg-yellow-400 text-yellow-900 px-4 py-2 rounded-full text-sm font-bold shadow-lg animate-bounce">
                    <i class="fas fa-fire mr-1"></i> Pendaftaran Terbuka!
                </span>
            </div>
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-6">Siap Bergabung dengan Kami?</h2>
            <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto leading-relaxed" style="color: #dcfce7;">
                Daftarkan diri Anda sekarang dan raih masa depan yang cerah!
            </p>
            @if($pendaftaran && $pendaftaran->link_pendaftaran)
                <a href="{{ $pendaftaran->link_pendaftaran }}" target="_blank" 
                   class="inline-flex items-center gap-3 bg-white font-bold py-4 px-10 rounded-xl transition-all transform hover:scale-105 hover:shadow-2xl group" style="color: #006837;" onmouseover="this.style.backgroundColor='#f0fdf4'" onmouseout="this.style.backgroundColor='white'">
                    <i class="fas fa-user-plus text-xl"></i>
                    <span class="text-lg">Daftar Sekarang</span>
                    <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                </a>
                <p class="mt-6" style="color: #dcfce7;">
                    <i class="fas fa-users mr-2"></i> Bergabung dengan ribuan mahasiswa sukses lainnya
                </p>
            @endif
        </div>
    </div>
</div>

<!-- Contact Info -->
<div class="py-16" style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style="background: linear-gradient(135deg, #006837, #007d40);">
                    <i class="fas fa-headset text-2xl text-white"></i>
                </div>
                <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">Butuh Informasi Lebih Lanjut?</h3>
                <p class="text-gray-600 text-lg max-w-2xl mx-auto">Hubungi kami untuk informasi lebih detail mengenai PMB</p>
            </div>
            
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-8">
                <a href="{{ route('contact.index') }}" 
                   class="flex items-center gap-3 text-white font-semibold py-3 px-8 rounded-xl transition-all transform hover:scale-105 shadow-lg group" style="background: linear-gradient(to right, #006837, #007d40);" onmouseover="this.style.background='linear-gradient(to right, #007d40, #008a47)'" onmouseout="this.style.background='linear-gradient(to right, #006837, #007d40)'">
                    <i class="fas fa-envelope text-lg"></i>
                    <span>Hubungi Kami</span>
                    <i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                </a>
                <a href="tel:{{ $contactInfo['phone'] ?? '' }}" 
                   class="flex items-center gap-3 bg-white text-white hover:bg-white/90 font-semibold py-3 px-8 rounded-xl transition-all transform hover:scale-105 group" style="border: 2px solid #006837; color: #006837;" onmouseover="this.style.backgroundColor='#f0fdf4'" onmouseout="this.style.backgroundColor='white'">
                    <i class="fas fa-phone text-lg"></i>
                    <span>{{ $contactInfo['phone'] ?? '(0274) 123456' }}</span>
                </a>
            </div>
            
            <div class="mt-8 pt-8 border-t border-gray-200">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                    <div class="group">
                        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3 transition-colors" style="background-color: #dcfce7;" onmouseover="this.style.backgroundColor='#bbf7d0'" onmouseout="this.style.backgroundColor='#dcfce7'">
                            <i class="fas fa-clock" style="color: #006837;"></i>
                        </div>
                        <h4 class="font-semibold text-gray-900 mb-1">Jam Operasional</h4>
                        <p class="text-sm text-gray-600">Senin - Jumat: 08:00 - 16:00</p>
                    </div>
                    <div class="group">
                        <div class="inline-flex items-center justify-center w-12 h-12 bg-green-100 rounded-full mb-3 group-hover:bg-green-200 transition-colors">
                            <i class="fas fa-check-circle text-green-600"></i>
                        </div>
                        <h4 class="font-semibold text-gray-900 mb-1">Respon Cepat</h4>
                        <p class="text-sm text-gray-600">Balasan dalam 24 jam</p>
                    </div>
                    <div class="group">
                        <div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3 transition-colors" style="background-color: #dcfce7;" onmouseover="this.style.backgroundColor='#bbf7d0'" onmouseout="this.style.backgroundColor='#dcfce7'">
                            <i class="fas fa-user-friends" style="color: #006837;"></i>
                        </div>
                        <h4 class="font-semibold text-gray-900 mb-1">Tim Profesional</h4>
                        <p class="text-sm text-gray-600">Siap membantu Anda</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .animate-fade-in-up {
        animation: fade-in-up 0.8s ease-out;
    }
    
    .animate-bounce-slow {
        animation: bounce 3s infinite;
    }
    
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
</style>
@endpush