@extends('layouts.app')
@section('title', 'Beranda - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('content')
    <style>
        /* ===== Efek Glitch Animasi ===== */
        @keyframes glitch {
            0% {
                transform: translate(0);
            }

            20% {
                transform: translate(-2px, 2px);
            }

            40% {
                transform: translate(-2px, -2px);
            }

            60% {
                transform: translate(2px, 2px);
            }

            80% {
                transform: translate(2px, -2px);
            }

            100% {
                transform: translate(0);
            }
        }

        /* ===== Efek Flicker / Flash Cahaya ===== */
        @keyframes flash {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.6;
            }
        }

        #flyerModal img {
            animation: zoomIn 0.4s ease;
        }

        #flyerModal {
            animation: fadeIn 0.4s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }


        @keyframes zoomIn {
            from {
                transform: scale(0.8);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }


        /* ===== Base Button Style ===== */
        .glitch-btn {
            animation: glitch 1s infinite alternate ease-in-out, flash 2s infinite ease-in-out;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.25s ease;
            border: 2px solid rgba(255, 255, 255, 0.4);
        }

        /* ===== Layer efek glitch duplikat ===== */
        .glitch-btn::before,
        .glitch-btn::after {
            content: attr(data-text);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            color: white;
            background: inherit;
            border-radius: inherit;
            z-index: 0;
            opacity: 0.1;
        }

        /* ===== Hover Effect: lebih intens ===== */
        .glitch-btn:hover {
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #3b82f6);
            box-shadow: 0 0 20px #6366f1, 0 0 40px #8b5cf6, 0 0 80px #3b82f6;
            transform: scale(1.05);
            animation: glitch 0.3s infinite alternate, flash 0.5s infinite;
        }

        /* efek RGB glitch layer saat hover */
        .glitch-btn:hover::before {
            opacity: 0.6;
            transform: translate(-2px, 0);
            mix-blend-mode: screen;
            color: #00ffff;
        }

        .glitch-btn:hover::after {
            opacity: 0.6;
            transform: translate(2px, 0);
            mix-blend-mode: screen;
            color: #ff00ff;
        }
    </style>

    <!-- Hero Section -->
    <section class="relative flex items-center justify-center min-h-screen bg-cover bg-center"
        style="background-image: url('{{ $setting->banner_beranda ? asset('storage/' . $setting->banner_beranda) : 'https://sph.edu/wp-content/uploads/2023/06/overview-SC-landscape_1.jpg' }}');">

        <!-- Overlay -->
        <div class="absolute inset-0 bg-black/50"></div>

        <!-- Content -->
        <div class="relative z-10 text-center text-white px-6" data-aos="fade-up">
            <h1 class="text-4xl md:text-6xl font-extrabold mb-4 drop-shadow-lg">
                Selamat Datang di <br> {{ $setting->nama_sekolah ?? 'Nama Sekolah' }}
            </h1>
            <p class="text-lg md:text-xl mb-6 max-w-2xl mx-auto">
                Membangun generasi berkarakter, cerdas, dan kompeten untuk masa depan bangsa.
            </p>
            <a target="_blank" href="{{ $setting->link_ppdb ?? 'https://ridhokurniawan.my.id/' }}"
                class="relative inline-block px-8 py-3 font-bold text-white rounded-full bg-indigo-600
          shadow-lg overflow-hidden group glitch-btn">
                <span class="relative z-10">DAFTAR PPDB</span>
            </a>
        </div>
    </section>

    <!-- Sambutan -->
    <section id="sambutan" class="bg-gray-50 py-20 px-6" data-aos="fade-up">
        <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center">
            <img src="{{ asset('storage/' . $setting->foto_kepsek ?? 'default-logo.png') }}"
                onerror="this.src='https://images.unsplash.com/photo-1588072432836-e10032774350?auto=format&fit=crop&w=800&q=80';"
                alt="Kepala Sekolah" class="rounded-2xl shadow-lg w-full h-96 object-cover" data-aos="zoom-in">
            <div>
                <h2 class="text-3xl font-bold text-blue-700 mb-4">Sambutan Kepala Sekolah</h2>
                <p class="text-gray-700 leading-relaxed mb-4 text-justify">
                    Assalamu'alaikum warahmatullahi wabarakatuh.
                    Selamat datang di website resmi <strong>{{ $setting->nama_sekolah ?? 'Nama Sekolah' }}</strong>.
                    {{ $setting->sambutan_kepsek ?? 'Sambutan Kepala Sekolah' }}
                </p>
                <p class="text-gray-700 leading-relaxed italic">
                    “Mari bersama membangun generasi emas yang cerdas, santun, dan berakhlak mulia.”
                </p>
                <p class="mt-6 font-semibold text-blue-700">- Kepala Sekolah</p>
            </div>
        </div>
    </section>

    <!-- Statistik -->
    <section id="statistik" class="bg-blue-700 text-white py-20" data-aos="fade-up">
        <div class="max-w-6xl mx-auto text-center">
            <h2 class="text-3xl font-bold mb-12">Data Sekilas Sekolah</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-10">

                <!-- Siswa -->
                <div class="flex flex-col items-center space-y-3 hover:scale-105 transition-transform duration-300">
                    <div class="bg-white/20 p-4 rounded-full">
                        <i data-lucide="users" class="w-10 h-10 text-white"></i>
                    </div>
                    <h3 class="text-5xl font-bold mb-2 counter" data-target="{{ $setting->total_siswa ?? '1525' }}">0</h3>
                    <p class="text-sm uppercase tracking-wide">Siswa</p>
                </div>

                <!-- Guru -->
                <div class="flex flex-col items-center space-y-3 hover:scale-105 transition-transform duration-300">
                    <div class="bg-white/20 p-4 rounded-full">
                        <i data-lucide="book-open" class="w-10 h-10 text-white"></i>
                    </div>
                    <h3 class="text-5xl font-bold mb-2 counter" data-target="{{ $setting->total_guru ?? '65' }}">0</h3>
                    <p class="text-sm uppercase tracking-wide">Guru</p>
                </div>

                <!-- Ruang Kelas -->
                <div class="flex flex-col items-center space-y-3 hover:scale-105 transition-transform duration-300">
                    <div class="bg-white/20 p-4 rounded-full">
                        <i data-lucide="school" class="w-10 h-10 text-white"></i>
                    </div>
                    <h3 class="text-5xl font-bold mb-2 counter" data-target="{{ $setting->ruang_kelas ?? '30' }}">0</h3>
                    <p class="text-sm uppercase tracking-wide">Ruang Kelas</p>
                </div>

                <!-- Tahun Berdiri -->
                <div class="flex flex-col items-center space-y-3 hover:scale-105 transition-transform duration-300">
                    <div class="bg-white/20 p-4 rounded-full">
                        <i data-lucide="calendar" class="w-10 h-10 text-white"></i>
                    </div>
                    <h3 class="text-5xl font-bold mb-2 counter" data-target="{{ $setting->tahun_berdiri ?? '1990' }}">0</h3>
                    <p class="text-sm uppercase tracking-wide">Tahun Berdiri</p>
                </div>

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

    <!-- Berita -->
<section id="berita" class="bg-gray-50 py-20 px-6" data-aos="fade-up">
    <div class="max-w-6xl mx-auto">
        <h2 class="text-3xl font-bold text-center text-blue-700 mb-10">Berita Terbaru</h2>

        <div class="grid md:grid-cols-3 gap-8">
            @forelse ($berita as $item)
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:-translate-y-1 hover:shadow-2xl transition"
                    data-aos="zoom-in">
                    <img src="{{ asset('storage/' . $item->image) }}"
                        onerror="this.src='https://via.placeholder.com/600x400?text=No+Image';"
                        alt="{{ $item->title }}" class="h-48 w-full object-cover">

                    <div class="p-6">
                        <p class="text-sm text-gray-500 mb-1">
                            {{ \Carbon\Carbon::parse($item->news_date)->translatedFormat('d F Y') }}
                        </p>
                        <h3 class="font-semibold text-lg mb-2 text-gray-800">{{ $item->title }}</h3>
                        <p class="text-sm text-gray-600 line-clamp-3">
                            {{ Str::limit(strip_tags($item->content), 100) }}
                        </p>
                        <a href="{{ route('berita.detail', ['slug' => $item->slug]) }}"
                            class="text-blue-600 font-medium mt-3 inline-block hover:underline">
                            Baca Selengkapnya →
                        </a>
                    </div>
                </div>
            @empty
                <p class="text-center text-gray-500 col-span-3">Belum ada berita.</p>
            @endforelse
        </div>
    </div>
</section>

    @if (!empty($setting->flyer_image))
        <!-- Modal Popup Flyer -->
        <div id="flyerModal"
            class="fixed inset-0 bg-black/80 flex items-center justify-center z-[9999] hidden backdrop-blur-sm">
            <div class="relative w-full h-full flex items-center justify-center">
                <!-- Gambar Flyer -->
                <img id="flyerImage" src="{{ asset('storage/' . $setting->flyer_image) }}" alt="Flyer"
                    class="max-w-[90%] max-h-[85vh] object-contain rounded-2xl z-10">
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const flyerModal = document.getElementById('flyerModal');
                const flyerImage = document.getElementById('flyerImage');

                // 🔒 Kunci scroll saat modal aktif
                document.body.style.overflow = 'hidden';

                // 🔹 Tampilkan modal
                flyerModal.classList.remove('hidden');

                // 🔹 Klik di luar gambar → tutup modal
                flyerModal.addEventListener('click', (e) => {
                    // jika target klik bukan gambar
                    if (!flyerImage.contains(e.target)) {
                        flyerModal.classList.add('hidden');
                        document.body.style.overflow = ''; // aktifkan scroll lagi
                    }
                });
            });
        </script>
    @endif

@endsection