@extends('layouts.app')

@section('title', 'MTs Maulana Malik Ibrahim - Beji')

@section('content')
                <main id="profil" class="mt-2">
                    <style>
                    @keyframes fade-in-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
                    </style>
                    <section class="relative overflow-hidden w-screen left-1/2 -translate-x-1/2 min-h-[60vh] md:min-h-[75vh] p-0 flex items-center justify-center">
                        <video class="absolute inset-0 h-full w-full object-cover" src="{{ asset('video/hero.mp4') }}" autoplay muted loop playsinline preload="metadata" poster="{{ asset('img/gedung/gedung2.jpeg') }}"></video>
                        <div class="absolute inset-0 bg-black/40"></div>
                        <div class="relative z-10 mx-auto w-fit text-center p-6 md:p-8 text-white">
                            <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight">Profil Madrasah</h1>
                            <p class="mt-2 text-sm md:text-base text-white/90">Mengenal visi, misi, dan nilai MTs Maulana Malik Ibrahim – Beji</p>
                        </div>
                    </section>

                     <section class="mt-10 mx-auto max-w-7xl">
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                            <div class="rounded-xl bg-gradient-to-br from-white to-emerald-50 p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md" style="animation: fade-in-up .5s ease both; animation-delay: .05s;">
                                <div class="flex flex-col items-center text-center">
                                    <img src="{{ asset('img/icon/icon-sekolah/Guru.png') }}" alt="Guru" class="h-12 w-12 md:h-14 md:w-14 object-contain transition hover:scale-105" />
                                    <div class="mt-3 text-3xl font-extrabold">12</div>
                                    <div class="mt-1 text-sm text-black/60">Guru</div>
                                </div>
                            </div>
                            <div class="rounded-xl bg-gradient-to-br from-white to-emerald-50 p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md" style="animation: fade-in-up .5s ease both; animation-delay: .1s;">
                                <div class="flex flex-col items-center text-center">
                                    <img src="{{ asset('img/icon/icon-sekolah/siswa.png') }}" alt="Siswa Aktif" class="h-12 w-12 md:h-14 md:w-14 object-contain transition hover:scale-105" />
                                    <div class="mt-3 text-3xl font-extrabold">128</div>
                                    <div class="mt-1 text-sm text-black/60">Siswa Aktif</div>
                                </div>
                            </div>
                            <div class="rounded-xl bg-gradient-to-br from-white to-emerald-50 p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md" style="animation: fade-in-up .5s ease both; animation-delay: .15s;">
                                <div class="flex flex-col items-center text-center">
                                    <img src="{{ asset('img/icon/icon-sekolah/Fasilitas.png') }}" alt="Fasilitas" class="h-12 w-12 md:h-14 md:w-14 object-contain transition hover:scale-105" />
                                    <div class="mt-3 text-3xl font-extrabold">20</div>
                                    <div class="mt-1 text-sm text-black/60">Fasilitas</div>
                                </div>
                            </div>
                            <div class="rounded-xl bg-gradient-to-br from-white to-emerald-50 p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md" style="animation: fade-in-up .5s ease both; animation-delay: .2s;">
                                <div class="flex flex-col items-center text-center">
                                    <img src="{{ asset('img/icon/icon-sekolah/ekstrakurikuler.png') }}" alt="Ekstrakurikuler" class="h-12 w-12 md:h-14 md:w-14 object-contain transition hover:scale-105" />
                                    <div class="mt-3 text-3xl font-extrabold">8</div>
                                    <div class="mt-1 text-sm text-black/60">Ekstrakurikuler</div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="mt-10 mx-auto max-w-7xl">
                        <div class="grid grid-cols-1 md:grid-cols-[1.2fr_0.8fr] gap-y-6 gap-x-0">
                            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md" style="animation: fade-in-up .6s ease both; animation-delay: .05s;">
                                <h2 class="text-2xl font-bold">Sejarah Sekolah</h2>
                                <div class="mt-2 h-1 w-12 bg-emerald-500 rounded"></div>
                                <p class="mt-2 text-sm text-black/70">
                                    MTs Maulana Malik Ibrahim – Beji didirikan dengan tekad kuat untuk mencetak generasi muslim yang berilmu, beramal, dan berakhlak mulia. 
                                    Berawal dari mimpi para pendiri yang ingin menyediakan pendidikan berkualitas berbasis nilai-nilai Islam, madrasah ini terus berkembang 
                                    menyesuaikan zaman namun tetap memegang teguh prinsip-prinsip ajaran agama. Sejak berdiri, MTs Maulana Malik Ibrahim telah meluluskan 
                                    ribuan siswa yang berkontribusi positif di berbagai bidang kehidupan.
                                </p>
                            </div>
                            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md" style="animation: fade-in-up .6s ease both; animation-delay: .1s;">
                                <img src="{{ asset('img/gedung/gedung2.jpeg') }}" alt="Foto Gedung MTs Maulana Malik Ibrahim" class="w-full h-full object-cover rounded-lg" />
                            </div>
                        </div>
                    </section>

                    <section class="mt-10 mx-auto max-w-7xl">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md" style="animation: fade-in-up .6s ease both; animation-delay: .05s;">
                                <h2 class="text-2xl font-bold">Visi</h2>
                                <div class="mt-2 h-1 w-12 bg-gradient-to-r from-emerald-500 to-sky-500 rounded"></div>
                                <p class="mt-2 text-sm text-black/70">“ Berilmu Amaliah, Beramal Ilmiah, dan Berakhlakul Karimah”</p>
                            </div>
                            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md" style="animation: fade-in-up .6s ease both; animation-delay: .1s;">
                                <h2 class="text-2xl font-bold">Misi</h2>
                                <div class="mt-2 h-1 w-12 bg-gradient-to-r from-emerald-500 to-sky-500 rounded"></div>
                                <ul class="mt-2 text-sm text-black/70 space-y-1">
                                    <li>Meningkatkan kualitas pendidikan dan pengajaran yang berbasis ilmu pengetahuan dan amaliah.</li>
                                    <li>Mengintegrasikan nilai-nilai keislaman dan akhlak mulia.</li>
                                    <li>Membangun lingkungan belajar yang kondusif dan inovatif.</li>
                                    <li>Meningkatkan kemampuan guru dan staf dalam mengembangkan kurikulum.</li>
                                    <li>Mendorong siswa untuk menjadi pribadi yang beriman, berilmu, dan berakhlak mulia.</li>
                                </ul>
                            </div>
                        </div>

                    </section>
                    <section class="mt-10 mx-auto max-w-7xl">
                        <div class="bg-white border-y border-black/10 shadow-sm">
                            <div class="grid grid-cols-1 md:grid-cols-[0.7fr_1.3fr] gap-x-0 gap-y-6">
                                <div class="p-6 flex flex-col items-center text-center gap-4">
                                    <img src="{{ asset('img/kepala/kepala.jpg') }}" alt="Kepala Madrasah" class="w-24 h-24 rounded-full object-cover">
                                    <div>
                                        <h3 class="text-lg font-bold">M. Arif Rachman Hakim, S.Pd.I.</h3>
                                        <p class="text-sm text-black/70">Kepala MTs Maulana Malik Ibrahim – Beji</p>
                                    </div>
                                </div>
                                <div class="p-6 flex flex-col justify-center">
                                    <h2 class="text-2xl font-bold">Sambutan Kepala Sekolah</h2>
                                    <p class="mt-2 text-sm text-black/70">
                                        Assalamu’alaikum warahmatullahi wabarakatuh. Selamat datang di website MTs Maulana Malik Ibrahim. Melalui media ini, kami menghadirkan informasi terbaru tentang kegiatan, program, dan layanan madrasah sebagai bentuk transparansi dan pelayanan kepada masyarakat. Semoga website ini menjadi sarana komunikasi yang bermanfaat serta mendorong seluruh warga madrasah untuk terus berprestasi dan berinovasi. Wassalamu’alaikum warahmatullahi wabarakatuh.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- Slider Foto Guru & Staf -->
                    <section class="mt-10 mx-auto max-w-7xl">
                        <h2 class="text-2xl font-bold text-center mb-2">Guru & Staf</h2>
                        <div class="mx-auto h-1 w-16 rounded-full bg-gradient-to-r from-emerald-500 to-sky-500"></div>
                        <div class="relative overflow-hidden bg-white rounded-xl ring-1 ring-black/5 p-4" x-data="{ active: 0, timer: null }" x-init="timer = setInterval(() => active = (active + 1) % 3, 4000)" tabindex="0" @keydown.right="active = (active + 1) % 3" @keydown.left="active = (active + 2) % 3" style="animation: fade-in-up .6s ease both;">
                            <div class="flex transition-transform duration-700 ease-out" :style="`transform: translateX(-${active * 100}%)`">
                                <!-- Slide 1 -->
                                <div class="w-full flex-shrink-0 grid grid-cols-2 md:grid-cols-4 gap-4">
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">M. Khoirul Anam, M.Pd.I</p>
                                        <p class="text-xs text-black/60">Wakil Kepala</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Pratiwik, S.Pd.I.</p>
                                        <p class="text-xs text-black/60">Guru/Bendahara</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Anggun Riftiani, S.Pd.</p>
                                        <p class="text-xs text-black/60">Operator Sekolah</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Rasminto, S.Pd.I</p>
                                        <p class="text-xs text-black/60">Guru</p>
                                    </div>
                                </div>
                                <!-- Slide 2 -->
                                <div class="w-full flex-shrink-0 grid grid-cols-2 md:grid-cols-4 gap-4">
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Fitriani Nurnafisha, S.Pd.I</p>
                                        <p class="text-xs text-black/60">Guru Mapel</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Uswatun Nasukha, S.Pd.</p>
                                        <p class="text-xs text-black/60">Guru/TU</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Novia Suci Rahayu, S.Pd.</p>
                                        <p class="text-xs text-black/60">Guru</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Dian Purwati, S.Pd.</p>
                                        <p class="text-xs text-black/60">Guru</p>
                                    </div>
                                </div>
                                <!-- Slide 3 -->
                                <div class="w-full flex-shrink-0 grid grid-cols-2 md:grid-cols-4 gap-4">
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Nur Robi'ah, S.Pd.I.</p>
                                        <p class="text-xs text-black/60">Guru</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Surya Ningsih, S.Pd.</p>
                                        <p class="text-xs text-black/60">Guru BP/BK</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Ana Nadiro, S.Pd.I</p>
                                        <p class="text-xs text-black/60">Guru BTQ</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-4 shadow-sm ring-1 ring-black/5 text-center transition hover:-translate-y-0.5 hover:shadow-md">
                                        <img src="{{ asset('img/placeholder.jpg') }}" alt="Foto" class="w-20 h-40 rounded-full object-cover mx-auto transition hover:scale-105">
                                        <p class="mt-2 text-sm font-semibold">Sony Firdaus, S.Kom.</p>
                                        <p class="text-xs text-black/60">Guru TIK</p>
                                    </div>
                                </div>
                            </div>
                            <button class="absolute left-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/70 hover:bg-white shadow ring-1 ring-black/10" @click="active = (active + 2) % 3" aria-label="Sebelumnya">⟨</button>
                            <button class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/70 hover:bg-white shadow ring-1 ring-black/10" @click="active = (active + 1) % 3" aria-label="Berikutnya">⟩</button>
                            <div class="flex justify-center mt-4 gap-2">
                                <button class="w-3 h-3 rounded-full transition" :class="active === 0 ? 'bg-teal-600' : 'bg-gray-300'" @click="active = 0"></button>
                                <button class="w-3 h-3 rounded-full transition" :class="active === 1 ? 'bg-teal-600' : 'bg-gray-300'" @click="active = 1"></button>
                                <button class="w-3 h-3 rounded-full transition" :class="active === 2 ? 'bg-teal-600' : 'bg-gray-300'" @click="active = 2"></button>
                            </div>
                        </div>
                    </section>

                    <section id="tautan-terkait" class="mt-6 relative overflow-hidden w-screen left-1/2 -translate-x-1/2 bg-[#009e60] text-white">
                        <svg class="absolute -top-10 left-0 w-full h-16 md:h-24" viewBox="0 0 1440 120" preserveAspectRatio="none">
                            <path d="M0,64 C240,96 480,0 720,32 C960,64 1200,128 1440,96 L1440,0 L0,0 Z" fill="#50c878" />
                        </svg>
                        <div class="relative z-10 p-6 mx-auto max-w-7xl">
                            <div class="rounded-xl p-6">
                                <div class="flex items-center justify-between gap-4">
                                    <h2 class="text-xl font-semibold text-white">Link Terkait</h2>
                                    <div class="text-xs text-white/80">Klik logo untuk membuka tautan</div>
                                </div>
                                <div class="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
                                    <a href="https://kemenag.go.id/" target="_blank" rel="noopener noreferrer" class="group rounded-lg bg-white/10 p-4 border border-white hover:bg-white/20 flex items-center justify-center">
                                         <img src="{{ asset('img/support/kemenag.png') }}" alt="Kemenag" class="h-14 w-auto object-contain" />
                                     </a>
                                    <a href="https://emis.kemenag.go.id/" target="_blank" rel="noopener noreferrer" class="group rounded-lg bg-white/10 p-4 border border-white hover:bg-white/20 flex items-center justify-center">
                                         <img src="{{ asset('img/support/emis.png') }}" alt="EMIS" class="h-14 w-auto object-contain" />
                                     </a>
                                    <a href="#" class="group rounded-lg bg-white/10 p-4 border border-white hover:bg-white/20 flex items-center justify-center">
                                         <img src="{{ asset('img/support/bos.png') }}" alt="BOS" class="h-14 w-auto object-contain" />
                                     </a>
                                    <a href="#" class="group rounded-lg bg-white/10 p-4 border border-white hover:bg-white/20 flex items-center justify-center">
                                         <img src="{{ asset('img/support/ban-pdm.png') }}" alt="BAN-PDM" class="h-14 w-auto object-contain" />
                                     </a>
                                    <a href="#" class="group rounded-lg bg-white/10 p-4 border border-white hover:bg-white/20 flex items-center justify-center">
                                         <img src="{{ asset('img/support/pas.png') }}" alt="PAS" class="h-14 w-auto object-contain" />
                                     </a>
                                </div>
                            </div>
                        </div>
                        <div class="absolute bottom-0 left-0 w-full h-1 bg-white/20"></div>
                    </section>
                </main>
@endsection