@extends('public.layouts.app')
@section('title', 'Lembaga Pendidikan')

@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/?school,building,campus')] bg-cover bg-center"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-[#042f2e] via-[#0f766e]/70 to-transparent"></div>
        
        <div class="absolute top-10 right-20 w-48 h-48 bg-yellow-500/20 rounded-full mix-blend-screen filter blur-[50px] animate-blob"></div>
        <div class="absolute bottom-10 left-10 w-40 h-40 bg-teal-400/20 rounded-full mix-blend-screen filter blur-[50px] animate-blob animation-delay-2000"></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">
                {{ $setting->nama_sekolah ?? 'Puruhita Islamic School' }}
            </span>
            <h1 class="text-4xl md:text-6xl font-black text-white mb-6 drop-shadow-2xl tracking-tight">
                Lembaga <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400">Pendidikan</span>
            </h1>
            <p class="text-teal-50 text-base md:text-lg font-medium leading-relaxed max-w-2xl mx-auto drop-shadow-md">
                Menyelenggarakan pendidikan terpadu, mencetak pemimpin muda muslim berdaya saing global yang cakap teknologi dan berakhlak Qur'ani.
            </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 UNIT PENDIDIKAN (DINAMIS DARI DATABASE)
    ======================================================================== --}}
    <div class="bg-[#FAFAFA] pb-24 pt-16 md:pt-20">
        <div class="container mx-auto px-6 lg:px-12">
            
            {{-- Intro Text --}}
            <div class="text-center mb-16 md:mb-20">
                <h4 class="text-orange-500 font-bold tracking-widest uppercase text-sm mb-2">Pilihan Jenjang</h4>
                <h2 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">Unit Pendidikan Formal</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">
                
                @php
                    // MENGAMBIL DATA DINAMIS DARI TABEL `sekolahs`
                    $dbUnits = class_exists(\App\Models\Sekolah::class) ? \App\Models\Sekolah::all() : collect();

                    // DATA FALLBACK (Disesuaikan dengan brosur Puruhita jika database masih kosong)
                    $fallbackUnits = collect([
                        (object)[
                            'nama_sekolah' => 'Raudhatul Athfal (RA) Puruhita',
                            'jenjang' => 'Pendidikan Usia Dini',
                            'akreditasi' => 'A',
                            'foto_gedung' => null,
                            'npsn' => '-',
                            'alamat' => 'Jl. HM. Yasin Limpo No. 42 Kel. Romangpolong, Gowa',
                            'kepala_sekolah' => 'Belum Ditentukan',
                            'website' => 'https://pesantrencendekiapuruhita.com'
                        ],
                        (object)[
                            'nama_sekolah' => 'SD Puruhita Islamic School',
                            'jenjang' => 'Pendidikan Dasar',
                            'akreditasi' => 'A',
                            'foto_gedung' => null,
                            'npsn' => '-',
                            'alamat' => 'Jl. HM. Yasin Limpo No. 42 Kel. Romangpolong, Gowa',
                            'kepala_sekolah' => 'Belum Ditentukan',
                            'website' => 'https://pesantrencendekiapuruhita.com'
                        ],
                        (object)[
                            'nama_sekolah' => 'SMP Puruhita Islamic School',
                            'jenjang' => 'Pendidikan Menengah Pertama',
                            'akreditasi' => 'A',
                            'foto_gedung' => null,
                            'npsn' => '-',
                            'alamat' => 'Jl. HM. Yasin Limpo No. 42 Kel. Romangpolong, Gowa',
                            'kepala_sekolah' => 'Belum Ditentukan',
                            'website' => 'https://pesantrencendekiapuruhita.com'
                        ],
                        (object)[
                            'nama_sekolah' => 'SMA Puruhita Islamic School',
                            'jenjang' => 'Pendidikan Menengah Atas',
                            'akreditasi' => 'B',
                            'foto_gedung' => null,
                            'npsn' => '-',
                            'alamat' => 'Jl. HM. Yasin Limpo No. 42 Kel. Romangpolong, Gowa',
                            'kepala_sekolah' => 'Belum Ditentukan',
                            'website' => 'https://pesantrencendekiapuruhita.com'
                        ]
                    ]);

                    // Gunakan data dari Database. Jika kosong, pakai fallback.
                    $displayUnits = $dbUnits->count() > 0 ? $dbUnits : $fallbackUnits;
                @endphp

                @foreach($displayUnits as $unit)
                <div class="group bg-white rounded-[2rem] overflow-hidden border border-gray-100 shadow-[0_15px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_20px_50px_rgba(15,118,110,0.12)] transition-all duration-500 transform hover:-translate-y-2 flex flex-col h-full cursor-pointer">
                    
                    {{-- Card Header: Gambar Utama & Akreditasi --}}
                    <div class="relative h-56 md:h-64 overflow-hidden rounded-t-[2rem]">
                        {{-- Gambar Unit --}}
                        @if(isset($unit->foto_gedung) && $unit->foto_gedung)
                            <img src="{{ asset('storage/'.$unit->foto_gedung) }}" alt="{{ $unit->nama_sekolah }}" class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110">
                        @else
                            {{-- Placeholder jika tidak ada foto --}}
                            <img src="https://source.unsplash.com/600x400/?school,building&sig={{ $loop->iteration }}" alt="{{ $unit->nama_sekolah }}" class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110">
                        @endif
                        
                        {{-- Overlay Gradient --}}
                        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-gray-900/30 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>

                        {{-- Badge Akreditasi --}}
                        <div class="absolute top-5 right-5">
                            <div class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-[10px] md:text-xs font-black px-4 py-1.5 rounded-full shadow-lg flex items-center gap-1.5 tracking-wider uppercase">
                                <i class="fas fa-star text-[10px]"></i>
                                Akreditasi {{ $unit->akreditasi ?? '-' }}
                            </div>
                        </div>

                        {{-- Jenjang Label --}}
                        <div class="absolute bottom-5 left-5">
                            <span class="bg-teal-600/90 backdrop-blur-md text-white text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-widest shadow-md">
                                {{ $unit->jenjang ?? 'Pendidikan Umum' }}
                            </span>
                        </div>
                    </div>

                    {{-- Card Body: Informasi --}}
                    <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>

                        <div class="flex items-start justify-between mb-6 gap-4">
                            <div>
                                <h3 class="text-xl md:text-2xl font-black text-gray-800 group-hover:text-teal-600 transition-colors leading-tight mb-2">
                                    {{ $unit->nama_sekolah }}
                                </h3>
                                <p class="text-[11px] md:text-xs text-gray-400 font-bold uppercase tracking-widest bg-gray-50 inline-block px-2 py-1 rounded-md">
                                    NPSN: {{ $unit->npsn ?? 'BELUM ADA' }}
                                </p>
                            </div>
                            
                            {{-- Logo Kecil Lembaga --}}
                            <div class="w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-white p-2 border border-gray-100 shadow-sm flex-shrink-0 flex items-center justify-center">
                                @if(isset($unit->logo_url) && $unit->logo_url)
                                    <img src="{{ asset('storage/'.$unit->logo_url) }}" class="w-full h-full object-contain">
                                @else
                                    <i class="fas fa-graduation-cap text-teal-200 text-2xl"></i>
                                @endif
                            </div>
                        </div>

                        <div class="space-y-4 mb-8 flex-grow">
                            <div class="flex items-start gap-3 text-sm text-gray-500 font-medium">
                                <div class="w-8 h-8 rounded-lg bg-orange-50 text-orange-500 flex items-center justify-center flex-shrink-0 mt-1"><i class="fas fa-map-marker-alt"></i></div>
                                <span class="leading-relaxed pt-1">{{ $unit->alamat ?? 'Alamat operasional belum diisi.' }}</span>
                            </div>
                            <div class="flex items-center gap-3 text-sm text-gray-500 font-medium">
                                <div class="w-8 h-8 rounded-lg bg-teal-50 text-teal-600 flex items-center justify-center flex-shrink-0"><i class="fas fa-user-tie"></i></div>
                                <span>Kepala: <strong class="text-gray-800">{{ $unit->kepala_sekolah ?? 'Belum Ditentukan' }}</strong></span>
                            </div>
                        </div>

                        {{-- Card Footer: Tombol Aksi --}}
                        <div class="mt-auto pt-6 border-t border-gray-100 flex gap-3 md:gap-4">
                            <a href="{{ $unit->website ?? '#' }}" target="_blank" class="flex-1 py-3 md:py-3.5 rounded-xl border-2 border-teal-100 text-teal-600 font-bold text-xs md:text-sm text-center hover:bg-teal-50 hover:border-teal-200 transition-colors flex justify-center items-center gap-2 group/btn">
                                <i class="fas fa-globe group-hover/btn:animate-pulse"></i> Website
                            </a>
                            <a href="{{ route('ppdb.index') }}" class="flex-1 py-3 md:py-3.5 rounded-xl bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white font-bold text-xs md:text-sm text-center shadow-[0_5px_15px_rgba(245,158,11,0.3)] hover:shadow-[0_10px_20px_rgba(245,158,11,0.4)] transition-all transform hover:-translate-y-1 flex justify-center items-center gap-2">
                                <i class="fas fa-user-plus"></i> Daftar
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

        </div>
    </div>

    {{-- =======================================================================
       3. CTA SECTION
    ======================================================================== --}}
    <div class="bg-[#042f2e] py-20 md:py-24 relative overflow-hidden">
        <div class="absolute inset-0 bg-pattern-islamic opacity-20"></div>
        <div class="absolute -top-40 -right-40 w-96 h-96 bg-teal-500/20 rounded-full mix-blend-screen filter blur-[80px]"></div>

        <div class="container mx-auto px-6 relative z-10 text-center">
            <h2 class="text-3xl md:text-5xl font-black text-white mb-6 leading-tight">Ingin Berkonsultasi Terlebih Dahulu?</h2>
            <p class="text-teal-100 text-base md:text-lg mb-10 max-w-2xl mx-auto font-medium">Tim pendaftaran kami siap membantu Bapak/Ibu memberikan informasi lebih lanjut mengenai program pendidikan, fasilitas, dan persyaratan masuk.</p>
            
            @php
                // Format nomor WA dari setting global
                $rawTelp = $setting->no_telp ?? '085179743232';
                $waLink = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $rawTelp);
            @endphp
            
            <a href="{{ $waLink }}" target="_blank" class="inline-flex items-center px-8 py-4 md:px-10 md:py-5 bg-white text-teal-900 font-black rounded-full shadow-[0_10px_30px_rgba(0,0,0,0.2)] hover:bg-gray-50 transition-all transform hover:-translate-y-1">
                <i class="fab fa-whatsapp text-green-500 text-2xl mr-3"></i> Hubungi Call Center
            </a>
        </div>
    </div>

@endsection