@extends('public.layouts.app')

@section('title', 'Beranda - ' . ($school->nama_sekolah ?? $setting->nama_sekolah ?? 'Smart School'))

@section('css')
<style>
    /* Modern Animations & Utilities */
    .hero-animate { animation: zoomSmooth 20s infinite alternate ease-in-out; will-change: transform; }
    @keyframes zoomSmooth { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }
    
    @keyframes float { 
        0% { transform: translateY(0px); } 
        50% { transform: translateY(-15px); } 
        100% { transform: translateY(0px); } 
    }
    .animate-float { animation: float 6s ease-in-out infinite; }
    
    @keyframes float-delayed { 
        0% { transform: translateY(0px); } 
        50% { transform: translateY(-10px); } 
        100% { transform: translateY(0px); } 
    }
    .animate-float-delayed { animation: float-delayed 7s ease-in-out infinite 1s; }

    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
        50% { box-shadow: 0 0 20px 10px rgba(249, 115, 22, 0.2); }
    }
    .btn-pulse { animation: pulse-glow 2s infinite; }

    /* Glassmorphism utility */
    .glass-card {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .glass-dark {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-left: 4px solid #eab308; /* Yellow-500 */
    }

    /* Text Clamps & Scrollbar */
    .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    
    /* Subtle Islamic Pattern Background */
    .bg-pattern-islamic {
        background-color: #042f2e; 
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230f766e' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
</style>
@endsection

@section('content')

@php
    $config = $school ?? $setting ?? \App\Models\CmsSetting::first() ?? null;
    $namaSekolah = $config->nama_sekolah ?? 'Puruhita Islamic School';
    $namaKetua = $config->ketua_nama ?? 'Drs. H. A. Kadir Halid';
    $isiSambutan = $config->ketua_sambutan ?? 'Di sini, teknologi adalah kendaraan melaju ke masa depan. Namun, Al-Quran sebagai kompasnya. Kami mendidik generasi yang cakap teknologi namun tetap berakhlak mulia.';
    $fotoKetua = ($config && $config->ketua_foto) ? asset('storage/' . $config->ketua_foto) : asset('images/default-user.png');
    $logoSekolah = ($config && $config->logo) ? asset('storage/' . $config->logo) : asset('images/logo-default.png');
    $noTelp = $config->no_telp ?? '085179743232';
    $waLink = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $noTelp);

    // Variabel Dummy jika Controller belum mengirim data
    $heroSliders = class_exists(\App\Models\CmsSlider::class) ? \App\Models\CmsSlider::where('is_active', true)->latest()->take(5)->get() : collect();
    
    // 👇 PERBAIKAN FATAL DI SINI: Menerima $artikel dan menggabungkannya dengan $berita 👇
    $berita = $berita ?? collect(); 
    $artikel = $artikel ?? collect(); 
    $kabarTerkini = $berita->concat($artikel)->sortByDesc('created_at')->values();
    // 👆 SELESAI PERBAIKAN 👆

    $pengumuman = $pengumuman ?? collect();
    $agenda = $agenda ?? collect();
    $programs = $programs ?? collect();
    $mading = $mading ?? collect();
    
    // MENGAMBIL DATA SEKOLAH SECARA DINAMIS
    $sekolahsData = $sekolahs ?? (class_exists(\App\Models\Sekolah::class) ? \App\Models\Sekolah::all() : collect());

    $layanan = [
        ['icon' => 'fa-laptop-house', 'label' => 'Smart System', 'color' => 'text-teal-600', 'bg' => 'bg-teal-50', 'link' => route('login')],
        ['icon' => 'fa-user-plus', 'label' => 'Info PPDB', 'color' => 'text-orange-500', 'bg' => 'bg-orange-50', 'link' => route('ppdb.index')],
        ['icon' => 'fa-quran', 'label' => 'Tahfidz', 'color' => 'text-emerald-600', 'bg' => 'bg-emerald-50', 'link' => '#'],
        ['icon' => 'fa-book-open', 'label' => 'Literasi', 'color' => 'text-rose-500', 'bg' => 'bg-rose-50', 'link' => '#'],
        ['icon' => 'fa-mosque', 'label' => 'Fasilitas', 'color' => 'text-cyan-600', 'bg' => 'bg-cyan-50', 'link' => url('/profil/fasilitas')],
        ['icon' => 'fa-newspaper', 'label' => 'Berita', 'color' => 'text-blue-600', 'bg' => 'bg-blue-50', 'link' => route('public.posts.index')],
        ['icon' => 'fa-calendar-alt', 'label' => 'Agenda', 'color' => 'text-indigo-500', 'bg' => 'bg-indigo-50', 'link' => route('public.posts.index', 'agenda')],
        ['icon' => 'fa-comments', 'label' => 'Kontak WA', 'color' => 'text-green-500', 'bg' => 'bg-green-50', 'link' => $waLink],
    ];
@endphp

<div class="w-full max-w-[100vw] overflow-x-hidden bg-[#FAFAFA] font-sans text-gray-800 m-0 p-0">

    {{-- =======================================================================
        1. HERO SLIDER (PREMIUM GLASSMORPHISM)
    ======================================================================== --}}
    <div class="relative w-full h-auto md:h-[90vh] lg:max-h-[850px] overflow-hidden bg-[#042f2e] m-0 p-0 -mt-[1px]">
        @if($heroSliders->count() > 0)
            <img src="{{ asset('storage/'.$heroSliders->first()->image) }}" class="w-full h-auto opacity-0 pointer-events-none block md:hidden" alt="placeholder">
        @else
            <img src="https://picsum.photos/seed/school/1920/1080" class="w-full h-auto opacity-0 pointer-events-none block md:hidden" alt="placeholder">
        @endif
        
        @if($heroSliders->count() > 0)
            <div x-data="{ activeSlide: 0, totalSlides: {{ $heroSliders->count() }}, delays: {{ $heroSliders->pluck('delay')->toJson() }}, next() { this.activeSlide = (this.activeSlide + 1) % this.totalSlides; setTimeout(() => this.next(), this.delays[this.activeSlide] || 6000); }, init() { if(this.totalSlides > 1) { setTimeout(() => this.next(), this.delays[0] || 6000); } } }" class="absolute inset-0 w-full h-full">
                <div class="absolute inset-0 z-0">
                    @foreach($heroSliders as $index => $slider)
                        <div x-show="activeSlide === {{ $index }}" x-transition:enter="transition ease-out duration-1000" x-transition:enter-start="opacity-0 transform scale-100" x-transition:enter-end="opacity-100 transform scale-[1.03]" x-transition:leave="transition ease-in duration-1000" x-transition:leave-start="opacity-100 transform scale-[1.03]" x-transition:leave-end="opacity-0 transform scale-100" class="absolute inset-0 w-full h-full flex items-center justify-center" style="display: none;">
                            <img src="{{ asset('storage/'.$slider->image) }}" class="w-full h-full object-cover object-center hero-animate opacity-75">
                        </div>
                    @endforeach
                    <div class="absolute inset-0 bg-gradient-to-r from-[#042f2e]/90 via-[#0f766e]/50 to-transparent pointer-events-none"></div>
                    <div class="absolute inset-0 bg-gradient-to-t from-[#042f2e] via-transparent to-transparent opacity-90 pointer-events-none"></div>
                </div>

                <div class="relative z-10 container mx-auto px-6 lg:px-12 h-full flex flex-col justify-end md:justify-center pb-12 md:pb-24">
                    <div class="relative w-full max-w-3xl h-auto flex items-center">
                        @foreach($heroSliders as $index => $slider)
                            <div x-show="activeSlide === {{ $index }}" x-transition:enter="transition ease-out duration-1000 delay-300" x-transition:enter-start="opacity-0 translate-y-12" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="w-full flex flex-col justify-center" style="display: none;">
                                @if($slider->subtitle)
                                <span class="glass-card inline-flex items-center self-start gap-2 py-1.5 px-4 rounded-full text-white text-[10px] md:text-sm font-semibold tracking-widest uppercase mb-4 shadow-lg"><span class="w-2 h-2 rounded-full bg-yellow-400 animate-pulse"></span>{{ $slider->subtitle }}</span>
                                @endif
                                @if($slider->title)
                                <h1 class="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-black text-white mb-4 leading-tight drop-shadow-2xl tracking-tight">{{ $slider->title }}</h1>
                                @endif
                                @if($slider->description)
                                <p class="glass-dark text-gray-200 text-sm md:text-lg lg:text-xl mb-8 py-3 px-5 rounded-r-2xl max-w-2xl line-clamp-3 md:line-clamp-none font-medium shadow-xl">{{ $slider->description }}</p>
                                @endif
                                <div class="flex flex-wrap gap-4 mt-2">
                                    @if($slider->btn1_text && $slider->btn1_link)
                                    <a href="{{ url($slider->btn1_link) }}" class="px-6 py-2.5 md:px-8 md:py-3.5 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-bold text-xs md:text-base shadow-[0_10px_20px_rgba(245,158,11,0.3)] hover:-translate-y-1 hover:shadow-[0_15px_25px_rgba(245,158,11,0.4)] transition-all duration-300 flex items-center gap-2">{{ $slider->btn1_text }} <i class="fas fa-arrow-right text-sm"></i></a>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @else
            <div class="absolute inset-0 z-0">
                <img src="https://picsum.photos/seed/school/1920/1080" class="w-full h-full object-cover object-center hero-animate opacity-60">
                <div class="absolute inset-0 bg-gradient-to-r from-[#042f2e]/90 via-[#0f766e]/70 to-transparent"></div>
            </div>
            <div class="relative z-10 container mx-auto px-6 lg:px-12 h-full flex flex-col justify-center pb-10">
                <div class="max-w-3xl">
                    <span class="glass-card inline-flex items-center gap-2 py-1.5 px-4 rounded-full text-white text-xs font-semibold tracking-widest uppercase mb-4"><span class="w-2 h-2 rounded-full bg-yellow-400 animate-pulse"></span> Sekolah Unggulan</span>
                    <h1 class="text-4xl md:text-7xl font-black text-white mb-6 leading-tight drop-shadow-2xl">{{ strtoupper($namaSekolah) }}</h1>
                </div>
            </div>
        @endif

        <div class="absolute bottom-0 w-full leading-none text-[#FAFAFA] pointer-events-none">
            <svg class="block w-full h-10 md:h-24" 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. LAYANAN DIGITAL (FLOATING WIDGETS)
    ======================================================================== --}}
    <div class="relative z-20 -mt-10 md:-mt-24 mb-16 px-4">
        <div class="container mx-auto">
            <div class="bg-white/80 backdrop-blur-xl rounded-[2rem] md:rounded-[3rem] shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-white p-6 md:p-12 animate-float-delayed">
                <div class="grid grid-cols-4 md:grid-cols-8 gap-y-8 gap-x-4">
                    @foreach($layanan as $menu)
                    <a href="{{ $menu['link'] }}" class="group flex flex-col items-center cursor-pointer">
                        <div class="w-12 h-12 md:w-[72px] md:h-[72px] rounded-2xl md:rounded-3xl {{ $menu['bg'] }} {{ $menu['color'] }} flex items-center justify-center mb-3 group-hover:-translate-y-2 group-hover:shadow-lg transition-all duration-300">
                            <i class="fas {{ $menu['icon'] }} text-xl md:text-3xl group-hover:scale-110 transition-transform duration-300"></i>
                        </div>
                        <span class="text-[10px] md:text-sm font-bold text-gray-700 text-center leading-tight group-hover:text-teal-600 transition-colors">{{ $menu['label'] }}</span>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- =======================================================================
        3. PROGRAM UNGGULAN (MODERN CARDS)
    ======================================================================== --}}
    <section class="py-12 md:py-24 bg-[#FAFAFA]">
        <div class="container mx-auto px-6 text-center mb-12 md:mb-20">
            <h4 class="text-teal-600 font-bold tracking-widest uppercase text-sm mb-2">Kurikulum Terintegrasi</h4>
            <h2 class="text-3xl md:text-5xl font-black text-gray-900 tracking-tight">Program <span class="text-teal-600">Keunggulan</span></h2>
            <div class="w-20 md:w-32 h-1.5 bg-gradient-to-r from-teal-400 to-teal-600 mx-auto mt-6 rounded-full"></div>
        </div>
        
        @php
            $cardThemes = [
                ['bg' => 'bg-teal-50', 'blob' => 'bg-teal-100', 'text' => 'text-teal-600', 'hover' => 'group-hover:text-teal-700'],
                ['bg' => 'bg-orange-50', 'blob' => 'bg-orange-100', 'text' => 'text-orange-500', 'hover' => 'group-hover:text-orange-600'],
                ['bg' => 'bg-blue-50', 'blob' => 'bg-blue-100', 'text' => 'text-blue-600', 'hover' => 'group-hover:text-blue-700'],
                ['bg' => 'bg-emerald-50', 'blob' => 'bg-emerald-100', 'text' => 'text-emerald-500', 'hover' => 'group-hover:text-emerald-600'],
            ];
        @endphp

        <div class="container mx-auto px-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            @forelse($programs as $index => $prog)
                @php $theme = $cardThemes[$index % 4]; @endphp
                <div class="group bg-white rounded-[2.5rem] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 hover:shadow-[0_20px_50px_rgba(15,118,110,0.1)] transition-all duration-500 flex flex-col overflow-hidden relative z-0 cursor-pointer hover:-translate-y-2">
                    <div class="absolute -top-10 -right-10 w-40 h-40 {{ $theme['blob'] }} rounded-full -z-10 opacity-50 group-hover:scale-150 transition-transform duration-700 ease-out"></div>
                    <div class="w-16 h-16 {{ $theme['bg'] }} rounded-2xl shadow-sm flex items-center justify-center text-3xl mb-8 {{ $theme['text'] }} relative z-10 group-hover:rotate-12 transition-transform duration-300">
                        <i class="{{ $prog->icon ?? 'fas fa-star' }}"></i>
                    </div>
                    <h3 class="text-xl md:text-2xl font-black mb-4 text-gray-800 {{ $theme['hover'] }} transition-colors relative z-10 leading-tight">{{ $prog->title }}</h3>
                    <p class="text-gray-500 text-sm md:text-base leading-relaxed line-clamp-4 relative z-10 font-medium">{{ strip_tags($prog->description) }}</p>
                </div>
            @empty
                <div class="col-span-full py-10 text-center text-gray-400 italic">Data program belum tersedia.</div>
            @endforelse
        </div>
    </section>

    {{-- =======================================================================
        4. SAMBUTAN KETUA YAYASAN
    ======================================================================== --}}
    <section id="sambutan" class="py-20 md:py-32 bg-white overflow-hidden relative border-t border-gray-100">
        <div class="absolute top-0 left-0 w-64 h-64 bg-teal-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-float"></div>
        <div class="absolute bottom-0 right-0 w-80 h-80 bg-yellow-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-float-delayed"></div>

        <div class="container mx-auto px-6 flex flex-col lg:flex-row items-center gap-12 lg:gap-24 relative z-10">
            <div class="w-full lg:w-5/12 relative flex justify-center lg:justify-end px-4">
                <div class="absolute inset-0 bg-gradient-to-tr from-teal-600 to-teal-400 rounded-[2.5rem] md:rounded-[4rem] rotate-3 md:rotate-6 scale-95 -z-10 shadow-2xl transition-transform hover:rotate-0 duration-500"></div>
                <img src="{{ $fotoKetua }}" class="rounded-[2.5rem] md:rounded-[4rem] shadow-2xl w-full max-w-[280px] md:max-w-md aspect-[3/4] object-cover border-[10px] border-white animate-float" alt="Ketua Yayasan">
                <div class="absolute -bottom-6 -left-4 md:-bottom-10 md:-left-10 bg-white p-5 md:p-6 rounded-2xl md:rounded-3xl shadow-[0_20px_40px_rgba(0,0,0,0.1)] border border-gray-100 flex items-center gap-4 animate-float-delayed">
                    <div class="w-12 h-12 rounded-full bg-teal-100 flex items-center justify-center text-teal-600 text-xl"><i class="fas fa-quote-left"></i></div>
                    <div>
                        <h4 class="font-black text-gray-900 text-base md:text-lg">{{ $namaKetua }}</h4>
                        <p class="text-orange-500 text-xs md:text-sm font-bold uppercase tracking-widest mt-1">Ketua Yayasan</p>
                    </div>
                </div>
            </div>

            <div class="w-full lg:w-7/12 text-center md:text-left mt-16 lg:mt-0">
                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-50 text-teal-700 text-xs md:text-sm font-bold mb-6 border border-teal-100">
                    <span class="w-2 h-2 rounded-full bg-teal-500 animate-ping"></span> Pesan Pimpinan
                </div>
                <h2 class="text-3xl md:text-5xl font-black text-gray-900 mb-6 leading-tight">Beradab Sebelum <br> <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-600 to-emerald-500">Berilmu</span></h2>
                <div class="text-gray-600 text-base md:text-xl leading-relaxed font-medium mb-10 border-l-4 border-yellow-400 pl-6 relative">
                    <i class="fas fa-quote-left absolute -top-4 -left-3 text-3xl text-gray-200 opacity-50 -z-10"></i>
                    "{!! nl2br(e($isiSambutan)) !!}"
                </div>
                <a href="{{ url('/profil/sambutan') }}" class="px-8 py-4 bg-gray-900 text-white rounded-full font-bold text-sm md:text-base hover:bg-teal-700 transition-colors shadow-xl inline-flex items-center gap-3 group">
                    Baca Selengkapnya <i class="fas fa-arrow-right group-hover:translate-x-2 transition-transform"></i>
                </a>
            </div>
        </div>
    </section>

    {{-- =======================================================================
        5. KABAR BERITA & ARTIKEL
    ======================================================================== --}}
    <section class="py-20 md:py-24 bg-gray-50 border-t border-gray-100">
        <div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
            <div>
                <h4 class="text-orange-500 font-bold tracking-widest uppercase text-sm mb-2">Update Terkini</h4>
                <h2 class="text-3xl md:text-4xl font-black text-gray-900">Kabar Berita & Artikel</h2>
            </div>
            <a href="{{ route('public.posts.index') }}" class="text-teal-600 text-sm md:text-base font-bold hover:text-teal-800 transition flex items-center gap-2 group">
                Lihat Semua Berita <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
            </a>
        </div>

        <div class="container mx-auto px-6 grid lg:grid-cols-12 gap-8 md:gap-12">
            <div class="lg:col-span-7">
                {{-- 👇 MENGGUNAKAN $kabarTerkini YANG SUDAH DIGABUNGKAN 👇 --}}
                @if($kabarTerkini->count() > 0)
                @php $featured = $kabarTerkini->first(); $fImg = $featured->thumbnail ? asset('storage/'.$featured->thumbnail) : asset('images/no-image.png'); @endphp
                <a href="{{ route('website.berita.show', $featured->slug) }}" class="group relative rounded-[2rem] overflow-hidden shadow-[0_20px_40px_rgba(0,0,0,0.08)] h-[400px] md:h-[500px] block cursor-pointer">
                    <img src="{{ $fImg }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/40 to-transparent opacity-90"></div>
                    <div class="absolute bottom-0 p-8 md:p-10 w-full transform group-hover:-translate-y-2 transition-transform duration-500">
                        <div class="flex items-center gap-3 mb-4">
                            <span class="bg-teal-600 text-white text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-wider">Terbaru</span>
                            <span class="text-sm text-gray-300 font-medium"><i class="far fa-calendar-alt mr-1"></i> {{ $featured->created_at->format('d M Y') }}</span>
                        </div>
                        <h3 class="text-2xl md:text-4xl font-black text-white mb-3 line-clamp-2 leading-tight group-hover:text-yellow-400 transition-colors">{{ $featured->title }}</h3>
                        <p class="text-gray-300 line-clamp-2 text-sm md:text-base">{{ $featured->excerpt ?? Str::limit(strip_tags($featured->content), 100) }}</p>
                    </div>
                </a>
                @else
                <div class="h-full flex items-center justify-center border-2 border-dashed border-gray-200 rounded-[2rem] p-10 bg-white">
                    <p class="text-gray-500 font-medium">Belum ada berita utama.</p>
                </div>
                @endif
            </div>
            
            <div class="lg:col-span-5 flex flex-col gap-6">
                {{-- 👇 MENGGUNAKAN $kabarTerkini YANG SUDAH DIGABUNGKAN 👇 --}}
                @forelse($kabarTerkini->skip(1)->take(4) as $post)
                @php $pImg = $post->thumbnail ? asset('storage/'.$post->thumbnail) : asset('images/no-image.png'); @endphp
                <a href="{{ route('website.berita.show', $post->slug) }}" class="flex gap-5 bg-white p-4 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 group border border-gray-100 items-center block cursor-pointer hover:-translate-y-1">
                    <div class="w-24 h-24 md:w-32 md:h-32 flex-shrink-0 rounded-xl overflow-hidden relative">
                        <img src="{{ $pImg }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                        <div class="absolute inset-0 bg-teal-900/20 group-hover:bg-transparent transition"></div>
                    </div>
                    <div class="flex-1 min-w-0 py-1">
                        <span class="text-[10px] md:text-xs text-orange-500 font-black uppercase mb-2 block tracking-wider">{{ $post->type == 'artikel' ? 'Artikel Edukasi' : 'Informasi' }}</span>
                        <h4 class="font-bold text-gray-900 text-base md:text-lg leading-snug line-clamp-2 group-hover:text-teal-600 transition mb-2">{{ $post->title }}</h4>
                        <span class="text-xs text-gray-500 font-medium"><i class="far fa-clock mr-1"></i> {{ $post->created_at->diffForHumans() }}</span>
                    </div>
                </a>
                @empty
                <div class="h-full flex items-center justify-center border-2 border-dashed border-gray-200 rounded-[2rem] p-10 bg-white">
                    <div class="text-center">
                        <i class="far fa-newspaper text-4xl text-gray-300 mb-3"></i>
                        <p class="text-gray-500 font-medium">Belum ada berita lainnya.</p>
                    </div>
                </div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- =======================================================================
        6. PENGUMUMAN & AGENDA
    ======================================================================== --}}
    <section class="py-16 md:py-24 bg-white border-t border-gray-100">
        <div class="container mx-auto px-6 grid lg:grid-cols-2 gap-10 md:gap-16">
            <div>
                <h3 class="text-2xl md:text-3xl font-black text-gray-900 mb-8 flex items-center gap-3">
                    <span class="w-10 h-10 md:w-12 md:h-12 rounded-2xl bg-red-50 flex items-center justify-center text-red-500 text-lg shadow-sm border border-red-100"><i class="fas fa-bullhorn"></i></span>
                    Pengumuman
                </h3>
                <div class="space-y-4">
                    @forelse($pengumuman as $p)
                    <a href="{{ route('website.berita.show', $p->slug) }}" class="group flex gap-4 md:gap-5 p-4 md:p-5 rounded-2xl border border-gray-100 hover:border-red-100 hover:bg-red-50/50 hover:shadow-md transition-all cursor-pointer block">
                        <div class="bg-white border border-gray-200 w-14 h-14 md:w-16 md:h-16 rounded-xl flex flex-col items-center justify-center flex-shrink-0 shadow-sm group-hover:text-red-600 group-hover:border-red-200 transition-colors">
                            <span class="text-xl md:text-2xl font-black leading-none">{{ $p->created_at->format('d') }}</span>
                            <span class="text-[9px] md:text-[10px] uppercase font-bold">{{ $p->created_at->format('M Y') }}</span>
                        </div>
                        <div class="min-w-0 flex-1 flex flex-col justify-center">
                            <h4 class="font-bold text-gray-800 text-base md:text-lg leading-snug line-clamp-1 group-hover:text-red-600 transition-colors">{{ $p->title }}</h4>
                            <p class="text-sm text-gray-500 mt-1 line-clamp-1 font-medium">{{ $p->excerpt ?? Str::limit(strip_tags($p->content), 60) }}</p>
                        </div>
                    </a>
                    @empty
                    <div class="p-8 border-2 border-dashed border-gray-200 rounded-2xl text-center"><p class="text-gray-400 font-medium text-sm">Belum ada pengumuman terbaru.</p></div>
                    @endforelse
                </div>
            </div>
            
            <div>
                <h3 class="text-2xl md:text-3xl font-black text-gray-900 mb-8 flex items-center gap-3 mt-6 lg:mt-0">
                    <span class="w-10 h-10 md:w-12 md:h-12 rounded-2xl bg-amber-50 flex items-center justify-center text-amber-500 text-lg shadow-sm border border-amber-100"><i class="far fa-calendar-alt"></i></span>
                    Agenda Kegiatan
                </h3>
                <div class="space-y-6 pl-4 md:pl-6 border-l-2 border-gray-100 ml-4 md:ml-6 relative">
                    @forelse($agenda as $a)
                    <a href="{{ route('website.berita.show', $a->slug) }}" class="relative pl-6 md:pl-8 group block cursor-pointer">
                        <div class="absolute -left-[32px] md:-left-[42px] top-1.5 w-4 h-4 md:w-5 md:h-5 rounded-full bg-white border-4 border-gray-200 shadow-sm group-hover:border-amber-500 transition-colors"></div>
                        <span class="text-[10px] md:text-xs font-bold text-amber-600 uppercase tracking-widest bg-amber-50 px-2 py-0.5 rounded-md">{{ \Carbon\Carbon::parse($a->event_date ?? $a->created_at)->format('d F Y') }}</span>
                        <h4 class="font-bold text-gray-800 text-lg md:text-xl mt-2 group-hover:text-amber-600 transition-colors leading-tight">{{ $a->title }}</h4>
                    </a>
                    @empty
                    <p class="text-gray-400 font-medium pl-6 text-sm">Belum ada agenda terdekat.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    {{-- =======================================================================
        7. MADING SANTRI
    ======================================================================== --}}
    <section class="py-20 md:py-24 bg-pattern-islamic text-white relative">
        <div class="absolute inset-0 bg-gradient-to-b from-[#042f2e]/95 to-[#0f766e]/95"></div>
        <div class="container mx-auto px-6 relative z-10">
            <div class="flex flex-col sm:flex-row justify-between items-center mb-12 gap-4 text-center sm:text-left">
                <div>
                    <h4 class="text-yellow-400 font-bold tracking-widest uppercase text-sm mb-2">Kreativitas Generasi Islami</h4>
                    <h2 class="text-3xl md:text-4xl font-black">Mading Karya Santri</h2>
                </div>
                <a href="#" class="px-6 py-2.5 rounded-full border border-white/30 text-sm font-bold hover:bg-white hover:text-teal-900 transition-colors backdrop-blur-sm">Lihat Galeri</a>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
                @forelse($mading->take(4) as $karya)
                <div class="group relative rounded-[2rem] overflow-hidden aspect-[3/4] shadow-[0_15px_30px_rgba(0,0,0,0.2)] bg-gray-800 border border-white/10">
                    <img src="{{ $karya->image_url ?? 'https://picsum.photos/seed/art/400/500' }}" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 group-hover:scale-110 transition-all duration-700">
                    <div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent"></div>
                    <div class="absolute bottom-0 p-6 w-full transform translate-y-2 group-hover:translate-y-0 transition-transform">
                        <h4 class="text-white font-bold text-lg mb-2 line-clamp-1 drop-shadow-md">{{ $karya->title }}</h4>
                        <p class="text-teal-200 text-xs font-medium bg-black/40 backdrop-blur-md px-3 py-1.5 rounded-full inline-block"><i class="fas fa-pen-nib mr-1.5"></i> {{ $karya->student->name ?? 'Karya Santri' }}</p>
                    </div>
                </div>
                @empty
                <div class="col-span-full py-16 text-center border-2 border-dashed border-white/20 rounded-[2.5rem] bg-black/10 backdrop-blur-sm">
                    <p class="text-white/70 font-medium">Karya mading santri belum tersedia saat ini.</p>
                </div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- =======================================================================
        8. CTA / PPDB
    ======================================================================== --}}
    <section class="w-full py-20 md:py-32 bg-white text-center relative overflow-hidden border-t border-gray-100">
        <div class="absolute inset-0 bg-teal-50/50 opacity-50"></div>
        <div class="container mx-auto px-6 relative z-10">
            <span class="inline-block py-1.5 px-4 rounded-full bg-orange-100 text-orange-600 text-xs md:text-sm font-bold tracking-widest uppercase mb-6 border border-orange-200">
                Penerimaan Peserta Didik Baru
            </span>
            <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-gray-900 mb-6 leading-tight">
                Mari Bergabung Bersama <br> <span class="text-teal-600">Generasi Qur'ani</span>
            </h2>
            <p class="text-gray-500 mb-10 max-w-2xl mx-auto text-base md:text-xl font-medium leading-relaxed">
                Persiapkan putra-putri Anda menjadi pemimpin masa depan yang cerdas berwawasan global, berakhlak mulia, dan memegang teguh nilai-nilai Islami.
            </p>
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4 md:gap-6">
                <a href="{{ route('ppdb.index') }}" class="btn-pulse w-full sm:w-auto px-8 py-4 md:px-12 md:py-5 bg-teal-600 hover:bg-teal-700 text-white rounded-full font-black text-base md:text-lg shadow-xl transition-all transform hover:-translate-y-1 flex items-center justify-center gap-3">
                    <i class="fas fa-file-signature text-xl"></i> Beli Formulir Online
                </a>
                <a href="{{ $waLink }}" target="_blank" class="w-full sm:w-auto px-8 py-4 md:px-12 md:py-5 bg-white border-2 border-gray-200 hover:border-teal-600 hover:text-teal-700 text-gray-700 rounded-full font-bold text-base md:text-lg shadow-sm transition-all flex items-center justify-center gap-3">
                    <i class="fab fa-whatsapp text-xl text-green-500"></i> Info Pendaftaran
                </a>
            </div>
        </div>
    </section>

    {{-- =======================================================================
        9. DAFTAR LEMBAGA (DINAMIS DARI TABEL SEKOLAHS)
    ======================================================================== --}}
    <section class="py-20 md:py-28 bg-[#FAFAFA] text-center border-t border-gray-100">
        <div class="container mx-auto px-6">
            <h4 class="text-orange-500 font-bold tracking-widest uppercase text-sm mb-2">Jenjang Pendidikan</h4>
            <h2 class="text-3xl md:text-4xl font-black text-gray-900 mb-12">Lembaga Naungan Kami</h2>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
                @forelse($sekolahsData as $sekolah)
                    @php 
                        $fotoGedung = $sekolah->foto_gedung ? asset('storage/' . $sekolah->foto_gedung) : 'https://picsum.photos/seed/'. $sekolah->id .'/400/300';
                    @endphp
                    <div class="group relative bg-gray-900 rounded-[2rem] overflow-hidden shadow-lg h-56 md:h-72 cursor-pointer transform hover:-translate-y-2 transition-all duration-500">
                        <img src="{{ $fotoGedung }}" class="w-full h-full object-cover group-hover:scale-110 group-hover:opacity-60 transition duration-700 opacity-50">
                        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/40 to-transparent"></div>
                        <div class="absolute inset-0 flex flex-col justify-end p-6 text-left">
                            <div class="bg-yellow-400 text-gray-900 text-[10px] md:text-xs font-black tracking-widest px-3 py-1.5 rounded-md self-start mb-3 shadow-md">
                                AKREDITASI {{ $sekolah->akreditasi ?? 'Belum Ada' }}
                            </div>
                            <h4 class="text-white font-black text-xl md:text-2xl leading-tight group-hover:text-yellow-400 transition-colors drop-shadow-md">{{ $sekolah->nama_sekolah }}</h4>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full py-16 bg-white rounded-[2rem] border-2 border-dashed border-gray-200">
                        <p class="text-gray-500 font-medium">Data lembaga pendidikan belum diinputkan ke dalam database.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    {{-- =======================================================================
        10. LOGOS & MITRA
    ======================================================================== --}}
    <section class="py-12 md:py-16 bg-white border-t border-gray-100">
        <div class="container mx-auto px-6 text-center">
            <p class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-8">Telah Terdaftar Secara Resmi</p>
            <div class="flex flex-wrap justify-center items-center gap-10 md:gap-20 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
                <img src="https://upload.wikimedia.org/wikipedia/commons/9/9c/Logo_of_Ministry_of_Education_and_Culture_of_Republic_of_Indonesia.svg" class="h-10 md:h-14 hover:scale-110 transition" loading="lazy" alt="Kemdikbud">
                <img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Logo_Kementerian_Agama_Republik_Indonesia_%282016%29.svg" class="h-10 md:h-14 hover:scale-110 transition" loading="lazy" alt="Kemenag">
            </div>
        </div>
    </section>

</div>
@endsection