@extends('layouts.frontend')
@section('main-content')
        <section class="relative">
            <div class="absolute inset-0">
                <img src="{{ asset('storage/uploads/beranda') }}/{{ $beranda->banner }}" alt="Suasana Belajar di Kelas" class="w-full h-full object-cover">
            </div>
            <div class="absolute inset-0 bg-gradient-to-t from-aksen-gelap/70 to-black/30"></div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center min-h-[85vh]">
                <div class="text-center text-white">
                    <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-shadow-lg">
                        <span class="block">SMK Kesehatan</span>
                        <span class="block text-aksen mt-2">Bhakti Kencana Subang</span>
                    </h1>
                    <p class="mt-6 max-w-2xl mx-auto text-lg md:text-xl text-gray-100 text-shadow-md">
                        {{ $beranda->tag_line }}
                    </p>
                    <a href="https://smkbksubang.site/ppdb-pendaftaran/blog/registrasi" class="mt-8 inline-block bg-aksen text-aksen-gelap font-bold py-3 px-8 rounded-full hover:bg-utama-gelap transition duration-300 text-lg shadow-xl hover:shadow-2xl transform hover:scale-105">
                        Daftar Sekarang
                    </a>
                </div>
            </div>
        </section>

        <section class="py-20 px-4 sm:px-6 lg:px-8 relative z-10 -mt-16 md:-mt-24">
            <div class="max-w-5xl mx-auto bg-white rounded-3xl shadow-2xl overflow-hidden p-8 md:p-12 border-b-8 border-utama-gelap flex flex-col md:flex-row items-center gap-12 transform hover:scale-[1.01] transition-transform duration-350 ease-in-out">
                <div class="md:w-1/3 text-center flex-shrink-0 relative">
                    <div class="relative inline-block">
                        <img src="{{ asset('storage/uploads/beranda') }}/{{ $beranda->sejarah }}" alt="Kepala Sekolah" class="rounded-full shadow-xl mx-auto w-52 h-52 object-cover border-4 border-utama ring-4 ring-utama/20">
                        <div class="absolute -bottom-4 left-1/2 -translate-x-1/2 bg-aksen text-aksen-gelap px-5 py-2 rounded-full shadow-lg font-bold text-lg whitespace-nowrap border border-utama-gelap">
                            Kepala Sekolah
                        </div>
                    </div>
                    <h3 class="mt-10 text-2xl font-bold text-aksen-gelap">{{$beranda->kepsek}}</h3>
                </div>
                <div class="md:w-2/3 text-center md:text-left">
                    <span class="text-utama-gelap text-6xl font-extrabold block mb-4 leading-none select-none">"</span>
                    <h2 class="text-4xl font-extrabold text-aksen-gelap mb-6 leading-tight">Selamat Datang di SMK Kes Bhakti Kencana Subang</h2>
                    <p class="text-gray-800 leading-relaxed text-lg italic border-l-4 border-utama pl-4">
                        {!! $beranda->isi_sejarah !!}
                    </p>
                </div>
            </div>
        </section>

        <section class="bg-white/70 backdrop-blur-sm py-20 px-4 sm:px-6 lg:px-8 rounded-t-3xl shadow-inner relative z-0 -mt-8 pt-16">
            <div class="max-w-5xl mx-auto text-center">
                <h2 class="text-4xl font-extrabold text-aksen-gelap sm:text-5xl mb-4">Visi & Misi Kami</h2>
                <p class="text-xl text-gray-600 mb-12">Fondasi kami dalam mencetak generasi masa depan.</p>
            </div>
            <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 text-left">
                <div class="bg-white p-8 rounded-xl shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border-l-4 border-utama">
                    <h3 class="text-3xl font-bold text-teks-utama mb-4">Visi</h3>
                    <p class="text-gray-700 leading-relaxed">
                        {!! $beranda->visi !!}
                    </p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 border-l-4 border-utama-gelap">
                    <h3 class="text-3xl font-bold text-teks-utama mb-4">Misi</h3>
                    {!! $beranda->misi !!}
                </div>
            </div>
        </section>

        <section class="bg-gradient-to-r from-utama to-utama-gelap py-16">
            <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 text-center px-4">
                <div class="flex items-center justify-center gap-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-aksen-gelap opacity-80" viewBox="0 0 20 20" fill="currentColor"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" /></svg>
                    <div>
                        <h3 class="text-5xl font-extrabold text-aksen-gelap text-shadow-md">{{ $student_1 }}</h3>
                        <p class="mt-1 text-xl font-semibold text-gray-800">Melanjutkan Kuliah</p>
                    </div>
                </div>
                <div class="flex items-center justify-center gap-4">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-aksen-gelap opacity-80" viewBox="0 0 20 20" fill="currentColor"><path d="M10.394 2.08a1 1 0 00-.788 0l-7 3.5a1 1 0 00.002 1.84L5.5 8.094a1 1 0 01.91 0l3.096 1.548a1 1 0 00.91 0l3.096-1.548a1 1 0 01.91 0l2.103 1.052a1 1 0 00.002-1.84l-7-3.5z" /><path d="M10 6a1 1 0 00-1 1v3.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7a1 1 0 00-1-1z" /></svg>
                    <div>
                        <h3 class="text-5xl font-extrabold text-aksen-gelap text-shadow-md">{{ $student_2 }}</h3>
                        <p class="mt-1 text-xl font-semibold text-gray-800">Langsung Bekerja</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-20 px-4 sm:px-6 lg:px-8">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-3xl font-bold text-aksen-gelap mb-8">Video Profil Sekolah</h2>
                <div class="video-container rounded-2xl shadow-2xl overflow-hidden border-4 border-utama">
                    <iframe src="{{$beranda->url_vidio}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
        </section>
        
        <section class="bg-white/70 backdrop-blur-sm py-20 px-4 sm:px-6 lg:px-8 rounded-b-3xl shadow-inner">
            <div class="max-w-7xl mx-auto">
                <h2 class="text-4xl font-extrabold text-center text-aksen-gelap mb-12">Berita & Artikel Terbaru</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach ($indeks as $vidx)
                    <div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 group">
                        <div class="overflow-hidden">
                            <img src="{{ asset('storage/uploads/blog_thumbnail/' . $vidx->thumbnail) }}" alt="{{ $vidx->image_title }}" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                        </div>
                        <div class="p-6 flex flex-col flex-grow">
                            <span class="text-sm text-gray-500">{{ \Carbon\Carbon::parse($vidx->date_post)->locale('id')->translatedFormat('d M Y') }}</span>
                            <h3 class="mt-2 text-xl font-bold text-aksen-gelap">{{ $vidx->title }}</h3>
                            <p class="mt-2 text-gray-600 flex-grow">{{ $vidx->meta_description }}</p>
                            <a href="{{ url('/blog') }}/{{ $vidx->slug }}" class="mt-4 inline-block text-utama-gelap font-semibold hover:text-aksen-gelap">Baca Selengkapnya &rarr;</a>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="text-center mt-12">
                    <a href="{{url('/blog')}}" class="mt-12 inline-block bg-aksen text-aksen-gelap font-bold py-3 px-8 rounded-full hover:bg-utama-gelap transition duration-300 text-lg shadow-xl hover:shadow-2xl transform hover:scale-105 mx-auto">Lihat Semua Berita</a>
                </div>
            </div>
        </section>
        <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-100 rounded-t-3xl shadow-inner">
            <div class="max-w-7xl mx-auto">
                <h2 class="text-3xl font-bold text-center text-aksen-gelap mb-8">Galeri Kegiatan</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    @foreach ($imagepage as $vimg)
                        <div class="group relative cursor-zoom-in">
                            <img onclick="openImageModal('{{ asset('storage/uploads/image_page/' . $vimg->source) }}')"
                                src="{{ asset('storage/uploads/image_page/' . $vimg->source) }}"
                                class="w-full h-full object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105"
                                alt="{{ $vimg->title }}">
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
@endsection