@extends('public.layouts.app')
@section('title', 'Fasilitas & Sarana')

@section('content')

    {{-- =======================================================================
       1. HERO SECTION (HEADER)
    ======================================================================== --}}
    <div class="relative h-[350px] md:h-[450px] bg-[#042f2e] overflow-hidden flex items-center justify-center">
        <div class="absolute inset-0 opacity-20 bg-[url('https://source.unsplash.com/1920x1080/?campus,library,laboratory,school')] bg-cover bg-center"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-[#042f2e] via-[#0f766e]/80 to-transparent"></div>
        
        <div class="absolute top-10 left-10 w-40 h-40 bg-yellow-500/20 rounded-full mix-blend-screen filter blur-[50px] animate-blob"></div>
        <div class="absolute bottom-10 right-20 w-48 h-48 bg-teal-400/20 rounded-full mix-blend-screen filter blur-[50px] animate-blob" style="animation-delay: 2s;"></div>
        
        <div class="relative z-10 text-center px-6 mt-10 max-w-4xl mx-auto">
            <span class="inline-block py-1.5 px-4 rounded-full bg-white/10 border border-white/20 text-yellow-400 text-xs font-bold uppercase tracking-widest mb-4 backdrop-blur-md">
                Infrastruktur & Sarana
            </span>
            <h1 class="text-4xl md:text-6xl font-black text-white mb-6 drop-shadow-2xl tracking-tight">
                Fasilitas <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400">Penunjang</span>
            </h1>
            <p class="text-teal-50 text-base md:text-lg font-medium leading-relaxed max-w-2xl mx-auto">
                Mendukung proses belajar mengajar dengan lingkungan yang nyaman, modern, dan islami untuk memaksimalkan potensi setiap siswa.
            </p>
        </div>

        <div class="absolute bottom-0 left-0 w-full leading-none text-[#FAFAFA] pointer-events-none">
            <svg class="block w-full h-10 md:h-16" viewBox="0 0 1200 120" preserveAspectRatio="none">
                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="currentColor"></path>
            </svg>
        </div>
    </div>

    {{-- =======================================================================
       2. LIST FASILITAS (GRID MODERN)
    ======================================================================== --}}
    <div class="bg-[#FAFAFA] pb-24 pt-16 md:pt-20">
        <div class="container mx-auto px-6 lg:px-12">
            
            {{-- Intro Title --}}
            <div class="text-center mb-16 md:mb-20">
                <h4 class="text-orange-500 font-bold tracking-widest uppercase text-sm mb-2">Eksplorasi Lingkungan Kami</h4>
                <h2 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">Galeri Sarana Prasarana</h2>
                <div class="w-24 h-1.5 bg-gradient-to-r from-teal-400 to-teal-600 mx-auto mt-6 rounded-full"></div>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10">
                @forelse($fasilitas as $item)
                <div class="group bg-white rounded-[2rem] overflow-hidden shadow-[0_15px_30px_rgba(0,0,0,0.04)] border border-gray-100 flex flex-col h-full hover:shadow-[0_20px_50px_rgba(15,118,110,0.12)] transition-all duration-500 transform hover:-translate-y-2 cursor-pointer">
                    
                    {{-- Image Container --}}
                    <div class="relative h-56 md:h-64 overflow-hidden rounded-t-[2rem]">
                        <img src="{{ $item->image_url ?? 'https://source.unsplash.com/600x400/?school,facility&sig='.$loop->iteration }}" 
                             alt="{{ $item->title }}" 
                             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 ease-out">
                        
                        {{-- Overlay Gradient pada Hover --}}
                        <div class="absolute inset-0 bg-gradient-to-t from-[#042f2e]/90 via-[#0f766e]/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                        
                        {{-- Icon Zoom (Muncul saat hover) --}}
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-500 transform scale-50 group-hover:scale-100">
                            <div class="w-14 h-14 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center text-white border border-white/50 shadow-lg">
                                <i class="fas fa-search-plus text-xl"></i>
                            </div>
                        </div>

                        {{-- Kategori Badge --}}
                        <div class="absolute top-5 left-5">
                            <span class="bg-white/95 backdrop-blur-sm text-teal-700 text-[10px] font-black px-4 py-1.5 rounded-full shadow-md uppercase tracking-widest">
                                Fasilitas
                            </span>
                        </div>
                    </div>

                    {{-- Content --}}
                    <div class="p-8 flex flex-col flex-grow relative bg-white">
                        {{-- Top Accent Line --}}
                        <div class="absolute top-0 left-8 w-16 h-1 bg-gradient-to-r from-orange-400 to-yellow-500 rounded-b-md"></div>

                        <h3 class="text-xl md:text-2xl font-black text-gray-800 mb-3 group-hover:text-teal-600 transition-colors leading-tight">
                            {{ $item->title }}
                        </h3>
                        <p class="text-gray-500 text-sm md:text-base font-medium leading-relaxed mb-4 line-clamp-3">
                            {{ $item->excerpt ?? 'Deskripsi fasilitas lengkap dengan standar keamanan dan kenyamanan untuk menunjang pembelajaran siswa secara optimal.' }}
                        </p>
                    </div>
                </div>
                @empty
                {{-- Tampilan Jika Data Kosong --}}
                <div class="col-span-full text-center py-20 bg-white rounded-[2rem] border-2 border-dashed border-gray-200 shadow-sm">
                    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-teal-50 text-teal-500 mb-6">
                        <i class="fas fa-building text-3xl"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-800 mb-2">Fasilitas Belum Tersedia</h3>
                    <p class="text-gray-500 font-medium max-w-md mx-auto">Data sarana dan prasarana sedang dalam tahap pembaruan. Silakan kembali beberapa saat lagi.</p>
                </div>
                @endforelse
            </div>

        </div>
    </div>

    {{-- =======================================================================
       3. CTA SECTION (VISIT US)
    ======================================================================== --}}
    <div class="bg-white py-20 border-t border-gray-100 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-teal-50 rounded-full mix-blend-multiply filter blur-[80px] opacity-70"></div>

        <div class="container mx-auto px-6 lg:px-12 relative z-10">
            <div class="bg-gradient-to-br from-[#0f766e] to-[#042f2e] rounded-[2.5rem] p-10 md:p-14 shadow-2xl relative overflow-hidden flex flex-col lg:flex-row items-center justify-between gap-10">
                
                <div class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')]"></div>
                
                {{-- Decorative circles inside the card --}}
                <div class="absolute -top-32 -right-32 w-80 h-80 bg-white opacity-5 rounded-full blur-2xl"></div>
                <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-yellow-500 opacity-10 rounded-full blur-2xl"></div>

                <div class="relative z-10 lg:w-2/3 text-center lg:text-left">
                    <h2 class="text-3xl md:text-4xl font-black text-white mb-4 leading-tight">Ingin Melihat Langsung Fasilitas Kami?</h2>
                    <p class="text-teal-100 text-lg md:text-xl font-medium max-w-2xl mx-auto lg:mx-0">
                        Kami mengundang Bapak/Ibu untuk berkunjung dan melihat lingkungan sekolah yang asri, modern, dan kondusif secara langsung.
                    </p>
                </div>
                
                <div class="relative z-10 flex-shrink-0">
                    <a href="{{ route('contact.index') }}" class="inline-flex items-center gap-3 px-8 py-4 md:px-10 md:py-5 bg-gradient-to-r from-orange-500 to-yellow-500 text-white font-black rounded-full shadow-[0_10px_20px_rgba(245,158,11,0.3)] hover:shadow-[0_15px_30px_rgba(245,158,11,0.4)] transition-all transform hover:-translate-y-1">
                        <i class="fas fa-calendar-check text-xl"></i> Jadwalkan Kunjungan
                    </a>
                </div>

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

@endsection