{{-- resources/views/public/about.blade.php --}}
  <section id="about" class="section-spacing section-bg-light">
   <div class="container">
    <div class="text-center mb-5">
     <h2 class="section-title">Tentang Kami</h2>
     <p class="text-muted" style="font-size: 1.1rem;">Mengenal Lebih Dekat Madrasah Kami</p>
    </div>

    @if(isset($beranda) && ($beranda->kepsek_nama || $beranda->kepsek_sambutan))
    <div class="row justify-content-center mb-5 fade-in">
        <div class="col-lg-10">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden" style="background: white;">
                <div class="row g-0 align-items-center">
                    <div class="col-md-4 text-center p-5" style="background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-emerald) 100%);">
                        <img src="{{ $beranda->kepsek_foto ? asset('storage/beranda/' . $beranda->kepsek_foto) : 'https://ui-avatars.com/api/?name='.urlencode($beranda->kepsek_nama ?? 'Kepala Madrasah').'&background=random&size=200' }}" 
                             alt="Kepala Madrasah" 
                             class="img-fluid rounded-3 border border-white shadow-sm mb-3 d-block mx-auto" 
                             style="width: 160px; height: 210px; object-fit: cover; object-position: top center; border-width: 4px !important;">
                        <h5 class="text-white fw-bold mb-1" style="font-family: 'Poppins', sans-serif;">{{ $beranda->kepsek_nama ?? 'Nama Kepala Madrasah' }}</h5>
                        <p class="text-white-50 small mb-0">Kepala Madrasah</p>
                    </div>
                    <div class="col-md-8 position-relative">
                        <div class="card-body p-4 p-md-5">
                            <i class="bi bi-quote position-absolute" style="font-size: 5rem; color: var(--primary-emerald); opacity: 0.1; top: 10px; left: 20px;"></i>
                            <h5 class="fw-bold text-dark mb-3" style="font-family: 'Poppins', sans-serif;">Sambutan Kepala Madrasah</h5>
                            <p class="text-muted fst-italic" style="line-height: 1.8; text-align: justify; font-size: 1.05rem;">
                                "{{ $beranda->kepsek_sambutan ?? 'Selamat datang di website resmi madrasah kami. Kami berkomitmen memberikan pendidikan terbaik bagi putra-putri bangsa untuk mencetak generasi yang cerdas dan berakhlak mulia.' }}"
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="row g-4 mt-2">
     <div class="col-md-6 col-lg-4">
      <div class="about-card">
       <div class="visi-icon"><i class="bi bi-eye"></i>
       </div>
       <h4>Visi</h4>
       <p>{{ $profil->visi ?? 'Menjadi lembaga pendidikan Islam terdepan yang menghasilkan generasi Qurani, cerdas akademik, dan berakhlak mulia dalam bingkai kecintaan terhadap ilmu pengetahuan.' }}</p>
      </div>
     </div>
     <div class="col-md-6 col-lg-4">
      <div class="about-card">
       <div class="visi-icon"><i class="bi bi-bullseye"></i>
       </div>
       <h4>Misi</h4>
       <p>{{ $profil->misi ?? 'Menyelenggarakan pendidikan berkualitas dengan standar internasional, mengintegrasikan nilai-nilai Islam dalam setiap pembelajaran, dan memberdayakan peserta didik menjadi pemimpin masa depan.' }}</p>
      </div>
     </div>
     <div class="col-md-6 col-lg-4">
      <div class="about-card">
       <div class="visi-icon"><i class="bi bi-star"></i>
       </div>
       <h4>Keunggulan</h4>
       <p>{{ $profil->keunggulan ?? 'Kurikulum terintegrasi, guru bersertifikat, fasilitas modern, program tahfidz Qur\'an, lingkungan Islami yang kondusif, dan beasiswa untuk siswa berprestasi.' }}</p>
      </div>
     </div>
    </div>
    <div class="row mt-5 g-4">
     <div class="col-lg-6">
      <h3 style="color: var(--primary-dark); margin-bottom: 1.5rem;">Sejarah Singkat</h3>
      <p style="color: var(--text-light); line-height: 1.8;">{{ $profil->sejarah ?? 'Madrasah Madrasah Al Idrus Lengkong didirikan pada tahun 2010 oleh para pendidik dan tokoh masyarakat yang memiliki visi mendirikan institusi pendidikan Islam berkualitas tinggi. Dengan dedikasi dan kerja keras selama lebih dari satu dekade, Madrasah Al Idrus Lengkong telah berkembang menjadi lembaga pendidikan terpercaya dengan ribuan alumni yang tersebar di berbagai bidang profesional.' }}</p>
     </div>
     <div class="col-lg-6">
      <div style="background: linear-gradient(135deg, rgba(6, 78, 59, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%); padding: 2rem; border-radius: 15px; border-left: 4px solid var(--primary-emerald);">
       <h5 style="color: var(--primary-dark); margin-bottom: 1rem;"><i class="bi bi-award" style="color: var(--accent-gold); margin-right: 0.5rem;"></i> Prestasi Kami</h5>
       <ul style="list-style: none; padding: 0; color: var(--text-light);">
        @foreach($profil->prestasi ?? ['Akreditasi A (BAN-SM)','Juara Tilawah Nasional 2023','Program Hafidz Qur\'an Terbaik','Standar Internasional Cambridge'] as $prestasi)
        <li style="margin-bottom: 0.8rem;"><i class="bi bi-check-circle-fill" style="color: var(--primary-emerald); margin-right: 0.5rem;"></i> {{ $prestasi }}</li>
        @endforeach
       </ul>
      </div>
     </div>
    </div>
   </div>
  </section>