@extends('layouts.app')

@section('content')
<div class="bg-white px-6 py-8">
    <section
        x-data="slider()"
        x-init="start()"
        @mouseenter="stop()"
        @mouseleave="start()"
        class="relative w-full rounded-xl h-[70vh] sm:h-[80vh] md:h-screen overflow-hidden">

        <div class="relative h-full">
            <template x-for="(slide, index) in slides" :key="index">
                <div x-show="current === index"
                    x-transition:enter="transition ease-out duration-1000"
                    x-transition:enter-start="transform translate-x-full opacity-0"
                    x-transition:enter-end="transform translate-x-0 opacity-100"
                    x-transition:leave="transition ease-in duration-1000"
                    x-transition:leave-start="transform translate-x-0 opacity-100"
                    x-transition:leave-end="transform -translate-x-full opacity-0"
                    class="absolute inset-0 bg-cover bg-center bg-no-repeat"
                    :style="`background-image: url('${slide}')`">
                </div>
            </template>
        </div>

        <div class="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/40"></div>

        <!-- Indicators -->
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-3 z-10">
            <template x-for="(slide, index) in slides" :key="index">
                <button @click="goTo(index)"
                        class="w-3 h-3 rounded-full transition duration-300"
                        :class="{'bg-white': current === index, 'bg-white/50': current !== index}">
                </button>
            </template>
        </div>

        <!-- Content -->
        <div class="absolute inset-0 flex items-center justify-center px-4 sm:px-8">
            <div class="text-center text-white max-w-3xl z-10">
                <img src="{{ asset('images/logo-pondok.png') }}" class="h-24 sm:h-32 md:h-40 mx-auto drop-shadow-lg" alt="Logo Pondok">

                <img src="{{ asset('images/text.png') }}" alt="Ahlan Wa Sahlan" class="mx-auto mb-4 h-16 sm:h-24 md:h-32 drop-shadow-xl" >

                <p class="mt-4 text-base sm:text-lg md:text-xl font-medium text-gray-200 leading-relaxed">
                    di Website Resmi
                    <span class="text-yellow-400 font-extrabold">Pondok Pesantren An - Najiyah 2 Bahrul Ulum</span>
                </p>

                <p class="text-xs sm:text-sm md:text-lg mt-2 text-gray-300">
                    Tambakberas - Jombang - Jawa Timur
                </p>

                <div class="mt-10">
                    <a href="{{ url('/pendaftaran-pilih') }}"
                        class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold px-8 py-3 rounded-full shadow-xl transition duration-300 transform hover:scale-105">
                        Daftar Sekarang!
                    </a>
                </div>
            </div>
        </div>

    </section>
</div>

<script>
    function slider() {
        return {
            slides: [
                '{{ asset('images/banner1.JPG') }}', 
                '{{ asset('images/banner2.jpeg') }}',
                '{{ asset('images/banner3.jpeg') }}',
            ],
            current: 0,
            interval: null,
            direction: 'next',
            
            start() {
                this.interval = setInterval(() => {
                    this.direction = 'next';
                    this.current = (this.current + 1) % this.slides.length;
                }, 5000);
            },
            
            stop() {
                clearInterval(this.interval);
            },
            
            goTo(index) {
                this.direction = index > this.current ? 'next' : 'prev';
                this.current = index;
                this.resetInterval();
            },
            
            resetInterval() {
                this.stop();
                this.start();
            }
        }
    }
</script>
<section class="relative bg-white bg-gradient-to-b from-white to-gray-50 py-12 sm:py-16 lg:py-20 overflow-hidden">
    <!-- Background elements -->
    <div class="absolute top-10 left-10 w-48 h-48 sm:w-64 sm:h-64 bg-amber-100 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
    <div class="absolute bottom-10 right-10 w-48 h-48 sm:w-64 sm:h-64 bg-orange-100 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-8 sm:mb-12 lg:mb-16">
            <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-2 sm:mb-3">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-600 to-orange-700">Sejarah</span>
                <span class="text-gray-800">Pondok</span>
            </h2>
            <p class="text-gray-600 max-w-2xl mx-auto text-sm sm:text-base lg:text-lg px-4">
                Mengenal lebih dekat sejarah dan perkembangan pondok pesantren
            </p>
        </div>

        <!-- Sejarah Grid -->
        <div class="flex flex-col md:flex-row gap-6 sm:gap-8 items-center lg:gap-10">

            <!-- Foto Model -->
            <div class="lg:block lg:col-span-1">
                <div class="relative rounded-2xl overflow-hidden">
                    <img src="{{ asset('images/sejarah.png') }}" alt="Model Pondok" class="w-full h-full object-cover">
                </div>
            </div>
            <div class="lg:col-span-2 w-[90%] grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-8 lg:gap-8">
                <!-- Card Sejarah Pondok Putra -->
                @if($sejarahPondokPutra)
                <div class="group bg-white rounded-xl sm:rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 hover:border-amber-200 transform hover:-translate-y-2 h-full flex flex-col">
                    <!-- Thumbnail Image -->
                    <div class="relative h-48 sm:h-56 lg:h-64 overflow-hidden rounded-t-xl sm:rounded-t-2xl">
                        @if($sejarahPondokPutra->gambar1)
                            <img src="{{ asset('storage/' . $sejarahPondokPutra->gambar1) }}" 
                                alt="{{ $sejarahPondokPutra->judul }}"
                                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        @elseif($sejarahPondokPutra->gambar)
                            <img src="{{ asset('storage/' . $sejarahPondokPutra->gambar) }}" 
                                alt="{{ $sejarahPondokPutra->judul }}"
                                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        @else
                            <div class="w-full h-full bg-gradient-to-br from-amber-50 to-orange-100 flex items-center justify-center">
                                <div class="text-center">
                                    <i class="fas fa-mosque text-amber-300 text-4xl sm:text-5xl mb-2"></i>
                                    <p class="text-amber-500 font-medium text-sm sm:text-base">Sejarah Pondok Putra</p>
                                </div>
                            </div>
                        @endif
                        
                        <!-- Gradient Overlay -->
                        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
                        
                        <!-- Category Badge -->
                        <div class="absolute top-3 left-3">
                            <span class="px-2.5 py-1 bg-amber-500/90 backdrop-blur-sm text-white rounded-full text-xs font-semibold shadow">
                                <i class="fas fa-history mr-1 text-xs"></i> Sejarah
                            </span>
                        </div>
                    </div>
                    
                    <!-- Card Content -->
                    <div class="flex-1 p-5 sm:p-6 lg:p-7 flex flex-col">
                        <!-- Title -->
                        <h3 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900 mb-2 sm:mb-3 line-clamp-2 group-hover:text-amber-700 transition-colors duration-300">
                            {{ $sejarahPondokPutra->judul ?? 'Sejarah Pondok Putra' }}
                        </h3>
                        
                        <!-- Excerpt -->
                        <div class="mb-3 sm:mb-4 flex-1">
                            <p class="text-gray-600 text-sm sm:text-base leading-relaxed line-clamp-3">
                                @if($sejarahPondokPutra->isi1)
                                    {!! Str::limit(strip_tags($sejarahPondokPutra->isi1), 150) !!}
                                @elseif($sejarahPondokPutra->isi)
                                    {!! Str::limit(strip_tags($sejarahPondokPutra->isi), 150) !!}
                                @else
                                    Pondok Pesantren An-Najiyah 2 Bahrul Ulum Putra memiliki sejarah panjang dalam mencetak generasi 
                                    ulama dan intelektual muslim. Berdiri sejak tahun 1975.
                                @endif
                            </p>
                        </div>
                        <!-- Button -->
                        <div class="mt-auto pt-3 sm:pt-4 border-t border-gray-100">
                            @if($sejarahPondokPutra->slug)
                                <a href="{{ route('kategori.show', $sejarahPondokPutra->slug) }}"
                            @else
                                <a href="{{ route('sejarah.putra') }}"
                            @endif
                                class="inline-flex items-center justify-between w-full px-4 py-2.5 sm:px-5 sm:py-3 bg-gradient-to-r from-amber-500 to-orange-500 text-white font-semibold rounded-lg hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 text-sm sm:text-base group/btn">
                                <span class="flex items-center">
                                    <i class="fas fa-history mr-2 text-xs sm:text-sm group-hover/btn:rotate-12 transition-transform duration-300"></i>
                                    Baca Selengkapnya
                                </span>
                                <i class="fas fa-arrow-right text-xs sm:text-sm group-hover/btn:translate-x-1 transition-transform duration-300"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @endif
                
                <!-- Card Sejarah Pondok Putri -->
                @if($sejarahPondokPutri)
                <div class="group bg-white rounded-xl sm:rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 hover:border-pink-200 transform hover:-translate-y-2 h-full flex flex-col">
                    <!-- Thumbnail Image -->
                    <div class="relative h-48 sm:h-56 lg:h-64 overflow-hidden rounded-t-xl sm:rounded-t-2xl">
                        @if($sejarahPondokPutri->gambar1)
                            <img src="{{ asset('storage/' . $sejarahPondokPutri->gambar1) }}" 
                                alt="{{ $sejarahPondokPutri->judul }}"
                                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        @elseif($sejarahPondokPutri->gambar)
                            <img src="{{ asset('storage/' . $sejarahPondokPutri->gambar) }}" 
                                alt="{{ $sejarahPondokPutri->judul }}"
                                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        @else
                            <div class="w-full h-full bg-gradient-to-br from-pink-50 to-rose-100 flex items-center justify-center">
                                <div class="text-center">
                                    <i class="fas fa-hands-praying text-pink-300 text-4xl sm:text-5xl mb-2"></i>
                                    <p class="text-pink-500 font-medium text-sm sm:text-base">Sejarah Pondok Putri</p>
                                </div>
                            </div>
                        @endif
                        
                        <!-- Gradient Overlay -->
                        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
                        
                        <!-- Category Badge -->
                        <div class="absolute top-3 left-3">
                            <span class="px-2.5 py-1 bg-pink-500/90 backdrop-blur-sm text-white rounded-full text-xs font-semibold shadow">
                                <i class="fas fa-history mr-1 text-xs"></i> Sejarah
                            </span>
                        </div>
                    </div>
                    
                    <!-- Card Content -->
                    <div class="flex-1 p-5 sm:p-6 lg:p-7 flex flex-col">
                        <!-- Title -->
                        <h3 class="text-lg sm:text-xl lg:text-2xl font-bold text-gray-900 mb-2 sm:mb-3 line-clamp-2 group-hover:text-pink-700 transition-colors duration-300">
                            {{ $sejarahPondokPutri->judul ?? 'Sejarah Pondok Putri' }}
                        </h3>
                        
                        <!-- Excerpt -->
                        <div class="mb-3 sm:mb-4 flex-1">
                            <p class="text-gray-600 text-sm sm:text-base leading-relaxed line-clamp-3">
                                @if($sejarahPondokPutri->isi1)
                                    {!! Str::limit(strip_tags($sejarahPondokPutri->isi1), 150) !!}
                                @elseif($sejarahPondokPutri->isi)
                                    {!! Str::limit(strip_tags($sejarahPondokPutri->isi), 150) !!}
                                @else
                                    Pondok Pesantren An-Najiyah 2 Bahrul Ulum Putri merupakan lembaga pendidikan yang fokus pada 
                                    pembentukan karakter muslimah berakhlak mulia.
                                @endif
                            </p>
                        </div>
                        <!-- Button -->
                        <div class="mt-auto pt-3 sm:pt-4 border-t border-gray-100">
                            @if($sejarahPondokPutri->slug)
                                <a href="{{ route('kategori.show', $sejarahPondokPutri->slug) }}"
                            @else
                                <a href="{{ route('sejarah.putri') }}"
                            @endif
                                class="inline-flex items-center justify-between w-full px-4 py-2.5 sm:px-5 sm:py-3 bg-gradient-to-r from-pink-500 to-rose-500 text-white font-semibold rounded-lg hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300 text-sm sm:text-base group/btn">
                                <span class="flex items-center">
                                    <i class="fas fa-book-open mr-2 text-xs sm:text-sm group-hover/btn:rotate-12 transition-transform duration-300"></i>
                                    Baca Selengkapnya
                                </span>
                                <i class="fas fa-arrow-right text-xs sm:text-sm group-hover/btn:translate-x-1 transition-transform duration-300"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @endif
                
                <!-- Jika tidak ada data sejarah -->
                @if(!$sejarahPondokPutra && !$sejarahPondokPutri)
                <div class="col-span-full">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">
                        <!-- Placeholder 1 -->
                        <div class="group bg-white rounded-xl sm:rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 hover:border-amber-200 transform hover:-translate-y-2 h-full flex flex-col">
                            <div class="relative h-48 sm:h-56 lg:h-64 overflow-hidden rounded-t-xl sm:rounded-t-2xl">
                                <div class="w-full h-full bg-gradient-to-br from-amber-50 to-orange-100 flex items-center justify-center">
                                    <div class="text-center">
                                        <i class="fas fa-mosque text-amber-300 text-4xl sm:text-5xl mb-2"></i>
                                        <p class="text-amber-500 font-medium text-sm sm:text-base">Sejarah Pondok Putra</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-1 p-6 sm:p-7">
                                <p class="text-gray-500 text-center">
                                    Data sejarah pondok putra sedang dalam proses pembaruan.
                                </p>
                            </div>
                        </div>
                        
                        <!-- Placeholder 2 -->
                        <div class="group bg-white rounded-xl sm:rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 hover:border-pink-200 transform hover:-translate-y-2 h-full flex flex-col">
                            <div class="relative h-48 sm:h-56 lg:h-64 overflow-hidden rounded-t-xl sm:rounded-t-2xl">
                                <div class="w-full h-full bg-gradient-to-br from-pink-50 to-rose-100 flex items-center justify-center">
                                    <div class="text-center">
                                        <i class="fas fa-hands-praying text-pink-300 text-4xl sm:text-5xl mb-2"></i>
                                        <p class="text-pink-500 font-medium text-sm sm:text-base">Sejarah Pondok Putri</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-1 p-6 sm:p-7">
                                <p class="text-gray-500 text-center">
                                    Data sejarah pondok putri sedang dalam proses pembaruan.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>

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

{{-- SECTION 2: PROGRAM UNGGULAN --}}
<section class="relative bg-gradient-to-b from-white to-blue-50 py-8 px-6 sm:py-16 lg:py-20 overflow-hidden">
    <div class="absolute top-0 left-0 w-48 h-48 sm:w-64 sm:h-64 bg-emerald-100 rounded-full blur-3xl opacity-20 -translate-x-1/4 -translate-y-1/4"></div>
    <div class="absolute bottom-0 right-0 w-48 h-48 sm:w-64 sm:h-64 bg-blue-100 rounded-full blur-3xl opacity-20 translate-x-1/4 translate-y-1/4"></div>

    <div class="relative pt-6 pb-10 px-2 rounded-xl shadow-lg max-w-7xl mx-auto overflow-hidden bg-cover bg-center" style="background-image: url('{{ asset('images/banner1.JPG') }}');">
    <div class="absolute inset-0 bg-gradient-to-r from-emerald-600/90 to-teal-600/90"></div>
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Header -->
            <div class="text-center mb-6 lg:mb-8">
                <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-3">
                    <span class="text-white">Program Unggulan</span>
                </h2>
                <p class="text-white max-w-2xl mx-auto text-sm sm:text-base lg:text-lg">
                    Program khusus untuk mengembangkan potensi santri secara optimal
                </p>
            </div>

            <!-- CONTENT -->
            <div class="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start">
                <!-- CAROUSEL -->
                <div class="w-full lg:w-[60%]">
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 lg:gap-6">
                        @forelse ($programs->take(6) as $program)
                        <div class="h-full">
                            <a href="{{ route('kategori.show', $program->slug) }}"
                            class="group block bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-emerald-300 h-full">

                                <!-- Image -->
                                <div class="relative h-48 sm:h-52 lg:h-60 xl:h-64 overflow-hidden">
                                    @if ($program->gambar1)
                                    <img src="{{ asset('storage/' . $program->gambar1) }}"
                                        alt="{{ $program->judul }}"
                                        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                                    @else
                                    <div class="w-full h-full bg-gradient-to-br from-emerald-50 to-teal-100 flex items-center justify-center">
                                        <i class="fas fa-graduation-cap text-emerald-400 text-4xl"></i>
                                    </div>
                                    @endif

                                    <span class="absolute top-4 left-4 px-3 py-1.5 bg-gradient-to-r from-emerald-500 to-teal-500 text-white text-xs font-semibold rounded-full shadow-lg">
                                        <i class="fas fa-star mr-1"></i> Unggulan
                                    </span>
                                    
                                    <!-- Gradient Overlay -->
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                                </div>

                                <!-- Content -->
                                <div class="p-5 lg:p-6">
                                    <h3 class="font-bold text-gray-900 mb-3 line-clamp-2 group-hover:text-emerald-700 text-lg lg:text-xl">
                                        {{ $program->judul }}
                                    </h3>

                                    <p class="text-gray-600 text-sm mb-5 line-clamp-3 leading-relaxed">
                                        {{ Str::limit(strip_tags($program->isi1), 100) }}
                                    </p>

                                    <div class="flex justify-between items-center pt-4 border-t border-gray-100">
                                        <span class="text-emerald-600 text-sm font-semibold flex items-center gap-1 group-hover:gap-2 transition-all">
                                            Detail Program <i class="fas fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i>
                                        </span>
                                        <span class="w-9 h-9 rounded-full bg-emerald-100 flex items-center justify-center group-hover:bg-emerald-500 group-hover:scale-110 transition-all">
                                            <i class="fas fa-external-link-alt text-xs text-emerald-600 group-hover:text-white transition-colors"></i>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @empty
                        <!-- Placeholder jika tidak ada program -->
                        <div class="col-span-2 text-center py-12">
                            <div class="bg-gradient-to-r from-emerald-50 to-teal-50 rounded-2xl p-8 border border-emerald-100">
                                <i class="fas fa-graduation-cap text-emerald-300 text-5xl mb-4"></i>
                                <h4 class="text-lg font-bold text-gray-700 mb-2">Data Program Sedang Dipersiapkan</h4>
                                <p class="text-gray-500">Program unggulan akan segera diumumkan.</p>
                            </div>
                        </div>
                        @endforelse
                    </div>
                </div>

                <!-- FOTO MODEL -->
                <div class="w-full lg:w-5/12 xl:w-1/3 flex justify-center mt-8 lg:mt-0">
                    <div class="relative">
                        <img src="{{ asset('images/santri1.png') }}"
                            alt="Model Program"
                            class="w-full max-w-md lg:max-w-none drop-shadow-2xl rounded-2xl transform hover:scale-[1.02] transition-transform duration-500">
                        
                        <!-- Decorative elements -->
                        <div class="absolute -bottom-3 -left-3 w-20 h-20 bg-emerald-400/20 rounded-full blur-xl"></div>
                        <div class="absolute -top-3 -right-3 w-16 h-16 bg-teal-400/20 rounded-full blur-xl"></div>
                        <!-- Floating Info -->
                        <div class="absolute -bottom-6 right-6 bg-white rounded-xl shadow-xl p-4 max-w-xs transform hover:-translate-y-2 transition-transform duration-300">
                            <div class="flex items-start gap-3">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-award text-white text-lg"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-gray-900 text-sm mb-1">Program Terstruktur</h4>
                                    <p class="text-gray-600 text-xs">Kurikulum terpadu untuk pengembangan santri secara holistik</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Background elements -->

</section>

{{-- SECTION 1: BERITA TERBARU --}}
<section class="relative bg-gradient-to-b from-white to-gray-50 py-12 sm:py-16 lg:py-20 overflow-hidden">
    <!-- Background elements -->
    <div class="absolute top-10 right-10 w-48 h-48 sm:w-64 sm:h-64 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
    <div class="absolute bottom-10 left-10 w-48 h-48 sm:w-64 sm:h-64 bg-sky-100 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-8 sm:mb-12 lg:mb-16">
            <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-2 sm:mb-3">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-600 to-blue-700">Berita</span> 
                <span class="text-gray-800">Terbaru</span>
            </h2>
            <p class="text-gray-600 max-w-2xl mx-auto text-sm sm:text-base lg:text-lg px-4">
                Informasi terkini seputar kegiatan dan perkembangan pondok pesantren
            </p>
        </div>

        <!-- Berita Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-5 lg:gap-6">
            @forelse ($berita->take(6) as $item)
            <a href="{{ route('kategori.show', $item->slug) }}"
                class="group bg-white rounded-xl sm:rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-sky-200 h-full transform hover:-translate-y-1">
                
                <!-- Image Container -->
                <div class="relative overflow-hidden h-40 sm:h-44 md:h-48 lg:h-52">
                    @if ($item->gambar1)
                    <img src="{{ asset('storage/' . $item->gambar1) }}" alt="{{ $item->judul }}" 
                         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    @else
                    <div class="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
                        <i class="fas fa-newspaper text-gray-400 text-2xl sm:text-3xl"></i>
                    </div>
                    @endif
                    
                    <!-- Overlay Gradient -->
                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    
                    <!-- Date Badge -->
                    <div class="absolute bottom-2 right-2">
                        <span class="px-2 py-0.5 bg-black/60 backdrop-blur-sm rounded text-xs font-medium text-white">
                            {{ $item->created_at->format('d M') }}
                        </span>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-3 sm:p-4 lg:p-5">
                    <!-- Title -->
                    <h3 class="text-sm sm:text-base font-bold text-gray-900 mb-2 sm:mb-3 line-clamp-2 group-hover:text-sky-700 transition-colors duration-300">
                        {{ $item->judul }}
                    </h3>
                    
                    <!-- Excerpt -->
                    <p class="text-gray-600 text-xs sm:text-sm mb-3 sm:mb-4 line-clamp-2">
                        {{ Str::limit(strip_tags($item->isi1), 80) }}
                    </p>
                    
                    <!-- Read More -->
                    <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                        <span class="text-sky-600 text-xs sm:text-sm font-semibold flex items-center gap-1.5 group-hover:gap-2 transition-all duration-300">
                            Baca Selengkapnya
                            <i class="fas fa-arrow-right text-xs group-hover:translate-x-0.5 transition-transform duration-300"></i>
                        </span>
                    </div>
                </div>
            </a>
            @empty
            <div class="col-span-full text-center py-8 sm:py-12">
                <div class="inline-flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 bg-gray-100 rounded-full mb-3 sm:mb-4">
                    <i class="fas fa-newspaper text-gray-400 text-xl sm:text-2xl"></i>
                </div>
                <p class="text-gray-500 text-sm sm:text-base">Belum ada berita tersedia.</p>
            </div>
            @endforelse
        </div>
        
        <!-- View All Button -->
        <div class="text-center mt-8 sm:mt-10 lg:mt-12" data-aos-delay="200">
            <a href="{{ route('kategori.index', $kategoriBerita->slug) }}"
                class="inline-flex items-center px-6 py-2.5 sm:px-8 sm:py-3 bg-gradient-to-r from-sky-500 to-blue-600 text-white font-semibold rounded-full shadow hover:shadow-md transform hover:-translate-y-0.5 transition-all duration-300 text-sm sm:text-base group">
                <i class="fas fa-list mr-2 text-xs sm:text-sm group-hover:rotate-12 transition-transform duration-300"></i>
                Lihat Semua Berita
                <i class="fas fa-arrow-right ml-2 text-xs sm:text-sm group-hover:translate-x-1 transition-transform duration-300"></i>
            </a>
        </div>
    </div>
</section>

{{-- SECTION 3: RUANG SANTRI --}}
<section class="relative bg-gradient-to-b from-white to-indigo-50 py-12 sm:py-16 lg:py-20 overflow-hidden">
    <!-- Background elements -->
    <div class="absolute top-10 right-10 w-48 h-48 sm:w-64 sm:h-64 bg-purple-100 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
    <div class="absolute bottom-10 left-10 w-48 h-48 sm:w-64 sm:h-64 bg-indigo-100 rounded-full mix-blend-multiply filter blur-3xl opacity-20"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-8 sm:mb-12 lg:mb-16">
            <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-2 sm:mb-3">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-700">Ruang</span> 
                <span class="text-gray-800">Santri</span>
            </h2>
            <p class="text-gray-600 max-w-2xl mx-auto text-sm sm:text-base lg:text-lg px-4">
                Ekspresi kreatif dan karya unggulan dari santri-santri berprestasi
            </p>
        </div>

        <!-- Ruang Santri Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-5 lg:gap-6">
            @forelse ($karyaRuangSantri->take(6) as $karya)
            <a href="{{ route('kategori.ruang-santri.show', $karya->slug) }}"
                class="group bg-white rounded-xl sm:rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-indigo-200 h-full transform hover:-translate-y-1">
                
                <!-- Image Container -->
                <div class="relative overflow-hidden h-40 sm:h-44 md:h-48 lg:h-52">
                    @if ($karya->gambar1)
                    <img src="{{ asset('storage/' . $karya->gambar1) }}" alt="{{ $karya->judul }}" 
                         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    @else
                    <div class="w-full h-full bg-gradient-to-br from-indigo-50 to-purple-100 flex items-center justify-center">
                        <i class="fas fa-palette text-indigo-400 text-2xl sm:text-3xl"></i>
                    </div>
                    @endif
                    
                    <!-- Category Badge -->
                    <div class="absolute top-2 left-2">
                        <span class="px-2 py-0.5 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded text-xs font-semibold shadow">
                            {{ Str::limit($karya->kategori->nama_kategori ?? 'Karya', 10) }}
                        </span>
                    </div>
                    
                    <!-- Author Badge -->
                    <div class="absolute top-2 right-2">
                        <span class="px-2 py-0.5 bg-white/90 backdrop-blur-sm rounded text-xs font-medium text-gray-700">
                            <i class="fas fa-user-graduate mr-0.5 text-xs"></i>
                        </span>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-3 sm:p-4 lg:p-5">
                    <!-- Title -->
                    <h3 class="text-sm sm:text-base font-bold text-gray-900 mb-2 sm:mb-3 line-clamp-2 group-hover:text-indigo-700 transition-colors duration-300">
                        {{ $karya->judul }}
                    </h3>
                    
                    <!-- Excerpt -->
                    <p class="text-gray-600 text-xs sm:text-sm mb-3 sm:mb-4 line-clamp-2">
                        {{ Str::limit(strip_tags($karya->isi1), 80) }}
                    </p>
                    
                    <!-- Meta Info -->
                    <div class="flex items-center justify-between mb-3 sm:mb-4">
                        <div class="flex items-center space-x-2">
                            <div class="flex items-center text-gray-500 text-xs">
                                <i class="far fa-user-circle mr-1"></i>
                                <span>Santri</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- CTA -->
                    <div class="flex items-center justify-between pt-3 border-t border-gray-100">
                        <span class="text-indigo-600 text-xs sm:text-sm font-semibold flex items-center gap-1.5 group-hover:gap-2 transition-all duration-300">
                            Baca Karya
                            <i class="fas fa-arrow-right text-xs group-hover:translate-x-0.5 transition-transform duration-300"></i>
                        </span>
                        <div class="w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 group-hover:bg-indigo-200 transition-colors duration-300">
                            <i class="fas fa-book-open text-xs"></i>
                        </div>
                    </div>
                </div>
            </a>
            @empty
            <div class="col-span-full text-center py-8 sm:py-12">
                <div class="inline-flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 bg-indigo-100 rounded-full mb-3 sm:mb-4">
                    <i class="fas fa-pen-nib text-indigo-400 text-xl sm:text-2xl"></i>
                </div>
                <p class="text-gray-500 text-sm sm:text-base">Belum ada karya santri tersedia.</p>
            </div>
            @endforelse
        </div>
        
        <!-- View All Button -->
        <div class="text-center mt-8 sm:mt-10 lg:mt-12" data-aos-delay="200">
            <a href="{{ route('kategori.ruang-santri.index') }}"
                class="inline-flex items-center px-6 py-2.5 sm:px-8 sm:py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-semibold rounded-full shadow hover:shadow-md transform hover:-translate-y-0.5 transition-all duration-300 text-sm sm:text-base group">
                <i class="fas fa-images mr-2 text-xs sm:text-sm group-hover:rotate-12 transition-transform duration-300"></i>
                Lihat Semua Karya
                <i class="fas fa-arrow-right ml-2 text-xs sm:text-sm group-hover:translate-x-1 transition-transform duration-300"></i>
            </a>
        </div>
    </div>
</section>

{{-- SECTION 4: DAWUHS --}}
<section class="relative py-12 sm:py-16 lg:py-20 bg-gradient-to-br from-gray-50 via-white to-blue-50 overflow-hidden">
    <!-- Background decorative elements -->
    <div class="absolute top-0 left-0 w-48 h-48 sm:w-64 sm:h-64 bg-blue-100 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -translate-x-1/2 -translate-y-1/2"></div>
    <div class="absolute bottom-0 right-0 w-48 h-48 sm:w-64 sm:h-64 bg-teal-100 rounded-full mix-blend-multiply filter blur-3xl opacity-20 translate-x-1/3 translate-y-1/3"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-8 sm:mb-12 lg:mb-16">
            <div class="inline-flex items-center justify-center px-3 py-1.5 sm:px-4 sm:py-2 mb-4 sm:mb-6 bg-gradient-to-r from-blue-500 to-teal-400 rounded-full shadow">
                <i class="fas fa-lightbulb text-white text-xs sm:text-sm mr-1.5 sm:mr-2"></i>
                <span class="text-white text-xs sm:text-sm font-semibold">Inspirasi Harian</span>
            </div>
            <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-2 sm:mb-3 leading-tight">
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-teal-500">Kata-kata</span> 
                <span class="text-gray-800">Hari Ini</span>
            </h1>
            <p class="text-gray-600 text-sm sm:text-base lg:text-lg max-w-2xl mx-auto leading-relaxed px-4">
                Kutipan penuh hikmah dari para ulama untuk mengisi hari dengan makna dan semangat baru
            </p>
        </div>
        
        <!-- Carousel Container -->
        <div class="relative">
            <div id="dawuh-carousel" class="owl-carousel owl-theme">
                @foreach($dawuhs as $index => $dawuh)
                <div class="h-64 px-2 sm:px-3" data-aos-delay="{{ $index * 100 }}">
                    <!-- Card Container -->
                    <div class="group h-full flex flex-col bg-white rounded-xl sm:rounded-2xl shadow-sm transition-all duration-300 overflow-hidden border border-gray-100 hover:border-blue-200 transform hover:-translate-y-1">
                        <!-- Gradient Header -->
                        <div class="relative h-1.5 sm:h-2 bg-gradient-to-r from-blue-500 via-teal-400 to-emerald-400"></div>
                        
                        <!-- Card Content -->
                        <div class="flex-1 p-4 sm:p-5 lg:p-6 flex flex-col">
                            <!-- Content Header -->
                            <div class="mb-3 sm:mb-4 flex items-center justify-between">
                                <span class="inline-flex items-center px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-semibold bg-blue-50 text-blue-700 border border-blue-100">
                                    <i class="fas fa-hashtag mr-1 text-xs"></i>{{ $dawuh->sumber }}
                                </span>
                                <div class="text-blue-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <i class="fas fa-quote-right text-xs sm:text-sm"></i>
                                </div>
                            </div>
                            
                            <!-- Quote Text -->
                            <div class="flex-1 mb-4 sm:mb-5">
                                <p class="text-gray-800 text-center text-sm sm:text-base lg:text-lg leading-relaxed font-medium italic relative px-1">
                                    <span class="absolute -left-1 -top-1 text-blue-200 text-xl sm:text-2xl opacity-30">"</span>
                                    {{ $dawuh->isi }}
                                    <span class="absolute -right-1 -bottom-1 text-blue-200 text-xl sm:text-2xl opacity-30">"</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endsection
<style>
    #program-carousel .owl-dot span {
        width: 10px;
        height: 10px;
        background: #d1fae5;
        transition: all 0.3s ease;
    }
    #program-carousel .owl-dot.active span {
        background: #10b981;
        transform: scale(1.2);
    }
    #program-carousel .owl-item {
        transition: transform .3s ease;
    }
    #program-carousel {
        overflow: hidden;
    }

    #program-carousel .owl-stage {
        display: flex;
    }

    #program-carousel .owl-item {
        display: flex;
        height: 100%;
    }

    #program-carousel .owl-item > div {
        width: 100%;
    }

    /* Custom scrollbar for carousel */
    #program-carousel::-webkit-scrollbar {
        height: 6px;
    }

    #program-carousel::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    #program-carousel::-webkit-scrollbar-thumb {
        background: #10b981;
        border-radius: 10px;
    }
</style>
@push('scripts')
<script>
$(document).ready(function(){
    // Initialize AOS
    AOS.init({
        duration: 800,
        once: true,
        easing: 'ease-in-out'
    });

    // Dawuh Carousel
    const dawuhCarousel = $("#dawuh-carousel");
    dawuhCarousel.owlCarousel({
        loop: true,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        margin: 16,
        nav: false,
        dots: false,
        responsive: {
            0: { items: 1 },
            640: { items: 2, margin: 12 },
            1024: { items: 3, margin: 16 },
            1280: { items: 3, margin: 20 }
        }
    });
    
    // Program Carousel
    $("#program-carousel").owlCarousel({
        loop: true,
        autoplay: true,
        autoplayTimeout: 4500,
        autoplayHoverPause: true,

        nav: false,      // ❌ tanpa tombol
        dots: false,     // ❌ tanpa indikator
        mouseDrag: true,
        touchDrag: true,

        smartSpeed: 900,
        fluidSpeed: 900,

        responsive: {
            0: {
                items: 1,
                margin: 12
            },
            640: {
                items: 1,
                margin: 16
            },
            1024: {
                items: 2,   // ✅ desktop TEPAT 2
                margin: 24
            }
        }
    });


    // Add hover effects to cards
    $('.group').on('mouseenter', function() {
        $(this).addClass('transform');
    }).on('mouseleave', function() {
        $(this).removeClass('transform');
    });
});
</script>
@endpush