{{-- resources/views/public/home.blade.php --}}
<section id="home" class="hero-section">
 <div class="container">
  <div class="row align-items-center g-5">
   <div class="col-lg-6 hero-content">
    
    <div class="d-flex align-items-center gap-3 mb-4">
      <img src="{{ $profil && $profil->logo_path ? asset('storage/'.$profil->logo_path) : 'https://dummyimage.com/90x90/81C784/0B2C5E.png&text=MA' }}"
        alt="Logo {{ $profil->nama_madrasah ?? 'MA Al Idrus' }}"
        style="width:125px; height:125px; border-radius:50%; border:3px solid #FFD600; box-shadow:0 4px 15px rgba(0,0,0,0.2); background:white; padding:5px; flex-shrink:0; object-fit:contain;">
        
      <h1 class="hero-title mb-0" style="background: linear-gradient(135deg, #81C784 0%, #A5D6A7 40%, #FFD600 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size:2.3rem; font-weight:900; line-height:1.2; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));">
        {{ $beranda->hero_title ?? 'Membentuk Generasi Qurani, Cerdas, dan Berakhlak Mulia' }}
     </h1>
    </div>

    <p class="hero-subtitle">{{ $beranda->hero_subtitle ?? 'Pendidikan Islam modern yang mengintegrasikan nilai-nilai Qur\'an, sains, teknologi, dan karakter mulia untuk generasi masa depan yang cemerlang.' }}</p>

    <div class="hero-buttons">
      <a href="#ppdb" class="btn btn-primary-hero">Daftar PPDB</a>
      <a href="#programs" class="btn btn-secondary-hero">Lihat Program</a>
    </div>

    <div class="hero-stats">
        <div class="stat-card"><span class="stat-number">{{ $beranda->stat_siswa ?? '1500+' }}</span><p class="stat-label">Siswa</p></div>
        <div class="stat-card"><span class="stat-number">{{ $beranda->stat_guru ?? '150+' }}</span><p class="stat-label">Guru</p></div>
        <div class="stat-card"><span class="stat-number">{{ $beranda->stat_lulusan ?? '500+' }}</span><p class="stat-label">Lulusan</p></div>
    </div>
   </div>

   <div class="col-lg-6 hero-image">
    @if(isset($beranda) && !empty($beranda->hero_images) && count($beranda->hero_images) > 0)
        <div id="heroCarousel" class="carousel slide carousel-fade shadow-lg" data-bs-ride="carousel" style="border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);">
            <div class="carousel-indicators">
                @foreach($beranda->hero_images as $index => $img)
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $index }}" class="{{ $index == 0 ? 'active' : '' }}" aria-current="{{ $index == 0 ? 'true' : 'false' }}" aria-label="Slide {{ $index + 1 }}"></button>
                @endforeach
            </div>
            <div class="carousel-inner">
                @foreach($beranda->hero_images as $index => $img)
                    <div class="carousel-item {{ $index == 0 ? 'active' : '' }}" data-bs-interval="4000">
                        <img src="{{ asset('storage/beranda/slider/' . $img) }}" class="d-block w-100 object-fit-cover" alt="Banner {{ $index + 1 }}" style="height: 400px;">
                    </div>
                @endforeach
            </div>
            @if(count($beranda->hero_images) > 1)
            <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
            @endif
        </div>
    @else
        <svg width="100%" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><defs>
          <linearGradient id="gradBg" x1="0%" y1="0%" x2="100%" y2="100%">
           <stop offset="0%" style="stop-color:#1E88E5;stop-opacity:1" />
           <stop offset="100%" style="stop-color:#1565C0;stop-opacity:1" />
          </linearGradient>
         </defs> <rect width="400" height="400" rx="20" fill="url(#gradBg)" /> <circle cx="100" cy="80" r="35" fill="rgba(255,255,255,0.2)" /> <circle cx="300" cy="120" r="50" fill="rgba(212,175,55,0.1)" /> <g id="group">
          <circle cx="120" cy="150" r="25" fill="rgba(255,200,100,0.9)" />
          <path d="M 100 175 Q 100 190 120 190 Q 140 190 140 175" fill="rgba(255,200,100,0.9)" />
          <rect x="95" y="180" width="15" height="40" fill="rgba(255,255,255,0.8)" />
          <rect x="130" y="180" width="15" height="40" fill="rgba(255,255,255,0.8)" />
          <circle cx="220" cy="140" r="28" fill="rgba(200,150,80,0.9)" />
          <path d="M 195 170 Q 195 188 220 188 Q 245 188 245 170" fill="rgba(200,150,80,0.9)" />
          <rect x="188" y="175" width="16" height="45" fill="rgba(100,200,150,0.8)" />
          <rect x="226" y="175" width="16" height="45" fill="rgba(100,200,150,0.8)" />
          <circle cx="280" cy="165" r="24" fill="rgba(220,170,100,0.9)" />
          <path d="M 262 188 Q 262 203 280 203 Q 298 203 298 188" fill="rgba(220,170,100,0.9)" />
          <rect x="258" y="195" width="14" height="38" fill="rgba(255,200,100,0.8)" />
          <rect x="288" y="195" width="14" height="38" fill="rgba(255,200,100,0.8)" />
          <rect x="140" y="210" width="25" height="35" fill="rgba(212,175,55,0.7)" />
          <rect x="170" y="215" width="25" height="30" fill="rgba(16,185,129,0.7)" />
          <path d="M 50 300 Q 100 280 150 300 T 250 300 T 350 300" stroke="rgba(255,255,255,0.2)" stroke-width="3" fill="none" />
         </g> <circle cx="350" cy="350" r="30" fill="rgba(212,175,55,0.15)" /> <circle cx="50" cy="320" r="40" fill="rgba(255,255,255,0.1)" />
        </svg>
    @endif
   </div>
  </div>
 </div>
</section>