<section id="hero" class="hero section">
    <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="hero-content" data-aos="fade-up" data-aos-delay="200">
                    <div class="company-badge mb-4">
                        <i class="bi bi-gear-fill me-2"></i> Ayo ciptakan kedamaian bersama
                    </div>
                    <h1 class="mb-4">
                        Pemerintahan Kantor <br> Desa Pelem
                        <span class="accent-text">Siap Disiplin</span>
                    </h1>
                    <p class="mb-4 mb-md-5">
                        Sekarang, informasi dan absensi pegawai desa bisa dipantau langsung lewat website resmi desa.
                        Yuk cek biar kita semua bisa sama-sama menjaga kedisiplinan dan transparansi kerja aparat desa.
                        Mudah, cepat, dan terbuka untuk semua
                    </p>
                    <div class="hero-buttons">
                        <a href="#about" class="btn btn-primary me-0 me-sm-2 mx-1">Baca Lebih Lanjut</a>
                        {{-- <a href="https://www.youtube.com/watch?v=Y7f98aduVJ8"
                            class="btn btn-link mt-2 mt-sm-0 glightbox">
                            <i class="bi bi-play-circle me-1"></i> Video Tentang Desa Pelem
                        </a> --}}
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="hero-image" data-aos="zoom-out" data-aos-delay="300">
                    <img src="{{ asset('landing/assets/img/illustration-1.webp') }}" alt="Hero Image" class="img-fluid">

                    <div class="customers-badge">
                        <div class="customer-avatars">
                            <img src="{{ asset('landing/assets/img/avatar-1.webp') }}" alt="Customer 1" class="avatar">
                            <img src="{{ asset('landing/assets/img/avatar-2.webp') }}" alt="Customer 2" class="avatar">
                            <img src="{{ asset('landing/assets/img/avatar-3.webp') }}" alt="Customer 3" class="avatar">
                            <img src="{{ asset('landing/assets/img/avatar-4.webp') }}" alt="Customer 4" class="avatar">
                            <img src="{{ asset('landing/assets/img/avatar-5.webp') }}" alt="Customer 5" class="avatar">
                            <span class="avatar more">12+</span>
                        </div>
                        <p class="mb-0 mt-2">12,000+ lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row stats-row gy-4 mt-5" data-aos="fade-up" data-aos-delay="500">
            <!-- Desa -->
            <div class="col-lg-3 col-md-6">
                <div class="stat-item">
                    <div class="stat-icon"><i class="bi bi-house-door"></i></div>
                    <div class="stat-content">
                        <h4>Desa Pelem</h4>
                        <p class="mb-0">Nganjuk, Kertosono</p>
                    </div>
                </div>
            </div>

            <!-- Dusun -->
            <div class="col-lg-3 col-md-6">
                <div class="stat-item">
                    <div class="stat-icon"><i class="bi bi-diagram-3"></i></div>
                    <div class="stat-content">
                        <h4>Dusun</h4>
                        <p class="mb-0">Memiliki 3 Dusun</p>
                    </div>
                </div>
            </div>

            <!-- Penduduk -->
            <div class="col-lg-3 col-md-6">
                <div class="stat-item">
                    <div class="stat-icon"><i class="bi bi-people"></i></div>
                    <div class="stat-content">
                        <h4>Penduduk</h4>
                        <p class="mb-0">Jumlah Penduduk 8571</p>
                    </div>
                </div>
            </div>

            <!-- Luas Wilayah -->
            <div class="col-lg-3 col-md-6">
                <div class="stat-item">
                    <div class="stat-icon"><i class="bi bi-map"></i></div>
                    <div class="stat-content">
                        <h4>Luas Wilayah</h4>
                        <p class="mb-0">1,79 ㎢</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
