@{
    Layout = "~/Views/WebNew/Shared/_Layout.cshtml";
    ViewData["Title"] = "Beranda";
}

<section class="hero-slider">

    <div class="hero-wrapper" id="hero-wrapper">

        <div class="hero-slide slide-1 active">
            <div class="hero-content">
                <div class="hero-logo mb-3 bg-white">
                    <img src="~/webnew/assets/image/logo/logo update.png" />
                    <img src="~/webnew/assets/image/logo/Logo-KAN-LLHD.png" />
                    <img src="~/webnew/assets/image/logo/Logo Registrasi LLHD-KLHK.png" />
                    <img src="~/webnew/assets/image/logo/Wilayah_Bebas_dari_Korupsi.png" />
                    <img src="~/webnew/assets/image/logo/logo-dlh.png" />
                </div>
                <h1>Laboratorium Lingkungan Hidup Daerah</h1>
                <p>Pemerintah Provinsi DKI Jakarta</p>
                <a href="/Layanan" class="btn btn-light rounded-pill px-4">
                    Lihat Layanan
                </a>
            </div>
        </div>

        <div class="hero-slide slide-2">
            <div class="hero-content">
                <div class="hero-logo mb-3 bg-white">
                    <img src="~/webnew/assets/image/logo/logo update.png" />
                    <img src="~/webnew/assets/image/logo/Logo-KAN-LLHD.png" />
                    <img src="~/webnew/assets/image/logo/Logo Registrasi LLHD-KLHK.png" />
                    <img src="~/webnew/assets/image/logo/Wilayah_Bebas_dari_Korupsi.png" />
                    <img src="~/webnew/assets/image/logo/logo-dlh.png" />
                </div>
                <h1>Laboratorium Lingkungan Hidup Daerah</h1>
                <p>Pemerintah Provinsi DKI Jakarta</p>
                <a href="/Layanan" class="btn btn-light rounded-pill px-4">
                    Lihat Layanan
                </a>
            </div>
        </div>

    </div>

    <button class="hero-btn prev" onclick="prevSlide()">‹</button>
    <button class="hero-btn next" onclick="nextSlide()">›</button>

    <div class="hero-dots" id="hero-dots"></div>

</section>

<!-- Layanan Kami -->

<div class="container py-5">

    <div class="container mb-4 text-center">
        <h4 class="fw-bold">Layanan Kami</h4>
        <p class="text-muted">
            Senin - Jumat, 08:00 - 16:00
        </p>
        <a href="https://wa.me/6281511930751" class="btn btn-outline-success rounded-pill bi bi-whatsapp mt-2 px-4">
            WA DASALEWA (text only) →
        </a>
    </div>

    <div class="row g-4 justify-content-center">

        <div class="col-md-6 col-lg-4">
            <a href="/Layanan?jenis=pcu" class="service-card-link">

                <div class="service-card">

                    <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/1.jpeg')"></div>
                    <div class="service-overlay"></div>

                    <div class="service-content">
                        <div class="top-content">
                            <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#094f9a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pipette-icon lucide-pipette"><path d="m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12" /><path d="m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z" /><path d="m2 22 .414-.414" /></svg>
                                
                            </div>
                            <p class="title">Pengambilan Contoh Uji (PCU) Air</p>
                        </div>

                        <div class="service-list">
                            <p>
                                Kegiatan laboratorium untuk memperoleh sampel air secara representatif dari sumber tertentu, seperti air permukaan, air tanah, air limbah, maupun air minum sesuai dengan standar dan prosedur yang berlaku oleh personel yang kompeten.
                            </p>
                        </div>
                        @*<ul class="service-list">
                                <li>Air Limbah</li>
                                <li>Air Sungai</li>
                                <li>Air Tanah</li>
                                <li>Air Perpipaan</li>
                            </ul>*@
                    </div>

                </div>

            </a>
        </div>
        <div class="col-md-6 col-lg-4">
            <a href="/Layanan?jenis=air" class="service-card-link">
                <div class="service-card">

                    <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/2.jpeg')"></div>
                    <div class="service-overlay"></div>

                    <div class="service-content" asp-controller="Layanan" asp-action="Air">
                        <div class="top-content">
                            <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#094f9a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zodiac-aquarius-icon lucide-zodiac-aquarius"><path d="m2 10 2.456-3.684a.7.7 0 0 1 1.106-.013l2.39 3.413a.7.7 0 0 0 1.096-.001l2.402-3.432a.7.7 0 0 1 1.098 0l2.402 3.432a.7.7 0 0 0 1.098 0l2.389-3.413a.7.7 0 0 1 1.106.013L22 10" /><path d="m2 18.002 2.456-3.684a.7.7 0 0 1 1.106-.013l2.39 3.413a.7.7 0 0 0 1.097 0l2.402-3.432a.7.7 0 0 1 1.098 0l2.402 3.432a.7.7 0 0 0 1.098 0l2.389-3.413a.7.7 0 0 1 1.106.013L22 18.002" /></svg>
                            </div>
                            <p class="title">Layanan Pengujian Air</p>
                        </div>
                        <br />

                        <div class="service-list">
                            <p>
                                Kegiatan laboratorium untuk menganalisis dan menilai kualitas air berdasarkan parameter fisika, kimia, maupun mikrobiologi pada air minum, air limbah, maupun air tanah, yang dilakukan oleh tenaga profesional dengan metode tervalidasi serta peralatan terkalibrasi.
                            </p>
                        </div>
                        @*<ul class="service-list">
                                <li>Air Limbah</li>
                                <li>Air Sungai</li>
                                <li>Air Tanah</li>
                                <li>Air Perpipaan</li>
                            </ul>*@
                    </div>

                </div>
            </a>
        </div>

        <div class="col-md-6 col-lg-4">
            <a href="/Layanan?jenis=udara" class="service-card-link">
                <div class="service-card">

                    <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/3.jpeg')"></div>
                    <div class="service-overlay"></div>

                    <div class="service-content" asp-controller="Layanan" asp-action="Udara">
                        <div class="top-content">
                            <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#094f9a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wind-icon lucide-wind"><path d="M12.8 19.6A2 2 0 1 0 14 16H2" /><path d="M17.5 8a2.5 2.5 0 1 1 2 4H2" /><path d="M9.8 4.4A2 2 0 1 1 11 8H2" /></svg>
                            </div>
                            <p class="title">Layanan Pengujian Udara</p>
                        </div>
                        <br />

                        <div class="service-list">
                            <p>
                                Kegiatan laboratorium untuk mengetahui kualitas udara ambien maupun udara emisi dari suatu sumber, seperti industri, kendaraan, atau lingkungan kerja. Selain itu, pengujian udara juga melayani pengujian kualitas udara dalam ruang, kebisingan lingkungan, serta stasiun pemantau kualitas udara.
                            </p>
                        </div>



                        @*<ul class="service-list">
                                <li>Pengujian Ambient</li>
                                <li>Kualitas Udara</li>
                                <li>Dalam Rungan</li>
                                <li>Emisi Sumber Bergerak Emisi Sumber</li>
                                <li>Tidak Bergerak</li>
                                <li>Kebisingan dan Getaran</li>
                            </ul>*@
                    </div>

                </div>
            </a>
        </div>
    </div>

</div>

<!-- Tentang Kami -->

<section class="section-about rounded-3 bg-white px-3 py-5 py-2">
    <div class="container">

        <div class="row align-items-center">

            <div class="col-md-6 mb-4">
                <div class="about-video">
                    <iframe src="https://www.youtube.com/embed/4hCwevKy3yU"
                            title="YouTube video"
                            frameborder="0"
                            allowfullscreen>
                    </iframe>
                </div>
            </div>

            <div class="col-md-6">

                <span class="badge-about">Tentang LLHD</span>

                <div class="about-logo mb-3">
                    <img src="~/webnew/assets/image/logo/logo update.png" />
                    <img src="~/webnew/assets/image/logo/Logo-KAN-LLHD.png" />
                    <img src="~/webnew/assets/image/logo/Logo Registrasi LLHD-KLHK.png" />
                    <img src="~/webnew/assets/image/logo/Wilayah_Bebas_dari_Korupsi.png" />
                    <img src="~/webnew/assets/image/logo/logo-dlh.png" />
                </div>

                <h4 class="fw-bold mb-3">
                    Tentang Laboratorium Lingkungan Hidup Daerah (LLHD)
                </h4>

                <p class="text-muted mb-3">
                    Laboratorium Lingkungan Hidup Daerah (LLHD) Provinsi DKI Jakarta adalah Unit Pelaksana Teknis di bawah Dinas Lingkungan Hidup yang menyediakan layanan pengujian kualitas lingkungan (air, udara ambien, dan kebisingan).
                </p>

                <p class="text-muted">
                    LLHD telah terregistrasi dan menerapkan standar ISO/IEC 17025:2017 untuk menjamin keabsahan hasil uji serta pelayanan pelanggan.
                </p>

                <div class="row g-3 mt-4">

                    <div class="col-6">
                        <div class="about-item">
                            <i class="bi bi-shield-check"></i>
                            <span>Integritas</span>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="about-item">
                            <i class="bi bi-briefcase"></i>
                            <span>Profesional</span>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="about-item">
                            <i class="bi bi-clipboard"></i>
                            <span>Akuntabel</span>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="about-item">
                            <i class="bi bi-recycle"></i>
                            <span>Berkelanjutan</span>
                        </div>
                    </div>

                </div>

                <a asp-controller="Home" asp-action="TentangKami" class="btn btn-outline-dark rounded-pill mt-4 px-4">
                    Lihat Selengkapnya →
                </a>

            </div>

        </div>

    </div>
</section>


<!-- Data Capaian -->
<section class="section-capaian">
    <div class="container">

        <div class="capaian-header">
            <hr />
            <span>Data Capaian</span>
            <hr />
        </div>

        <div class="row g-3 text-center">

            <div class="col-md-4 col-sm-6">
                <div class="stat-item">
                    <h2 class="stat-number counter" data-target="1369">0</h2>
                    <p class="stat-desc">Jumlah Sampel yang Diuji per Tahun</p>
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="stat-item">
                    <h2 class="stat-number counter" data-target="171">0</h2>
                    <p class="stat-desc">Jumlah Layanan Uji Sampel Tersedia</p>
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="stat-item">
                    <div class="text-column">
                        <h2 class="stat-number counter" data-target="9">0</h2>
                        <p>Hari Kerja</p>
                    </div>

                    <p class="stat-desc">Rata-rata Waktu Penyelesaian</p>
                </div>
            </div>

        </div>

        <div class="container my-5">
            <div class="card rounded-4 border-0 shadow-sm">
                <div class="card-body">

                    <h5 class="fw-semibold mb-4 text-center">
                        Statistik Sampel
                    </h5>

                    <div style="height: 350px;">
                        <canvas id="chartSampel"></canvas>
                    </div>

                </div>
            </div>
        </div>

    </div>
</section>

<!-- Kompetensi Kami -->
<section>
    <div class="container-fluid py-5" style="background-color:#0b2a4a;">
        <div class="container">
            <h4 class="mb-4 text-white">Kompetensi Kami</h4>

            <div class="swiper mySwiper">
                <div class="swiper-wrapper">

                    <div class="swiper-slide">
                        <div class="service-card">

                            <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/1.jpeg')"></div>
                            <div class="service-overlay"></div>

                            <div class="service-content">
                                <div class="top-content">
                                    <div class="icon">
                                        <img src="~/webnew/assets/image/icon/icon lab.png" />
                                    </div>
                                    <p class="title">Penyelia</p>
                                </div>
                                <br />

                                <ul class="service-list">
                                    <li>Sertifikasi Pengambil Contoh Uji Air</li>
                                    <li>Sertifikasi Pengambil Contoh Uji Udara</li>
                                    <li>Sertifikasi Analisis Spektrofotometri Serapan Atom (SSA)</li>
                                    <li>Sertifikasi Petugas K3 Laboratorium</li>
                                    <li>Sertifikasi Analisis Spektrofotometri (UV -VIS)</li>
                                    <li>Pelatihan ISO 17025.</li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="service-card">

                            <div class="service-bg" style="background-image: url('/webnew/assets/image/foto/2.jpeg')"></div>
                            <div class="service-overlay"></div>

                            <div class="service-content">
                                <div class="top-content">
                                    <div class="icon">
                                        <img src="~/webnew/assets/image/icon/icon user.png" />
                                    </div>
                                    <p class="title">Pengenalan Mutu</p>
                                </div>
                                <br />

                                <ul class="service-list">
                                    <li>Sertifikasi Okupasi Instruktur (Level IV)</li>
                                    <li>Pelatihan ISO 17025 Pelatihan</li>
                                    <li>Audit Internal Pelatihan.</li>
                                    <li>Jaminan Mutu Pelatihan</li>
                                    <li>Manajemen Risiko </li>
                                    <li>Pelatihan Validasi dan Verifikasi</li>
                                    <li>Metode Pengujian Kimia.</li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="service-card">

                            <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/3.jpeg')"></div>
                            <div class="service-overlay"></div>

                            <div class="service-content">
                                <div class="top-content">
                                    <div class="icon">
                                        <img src="~/webnew/assets/image/icon/icon check.png" />
                                    </div>
                                    <p class="title">Pelayanan</p>
                                </div>
                                <br />

                                <ul class="service-list">
                                    <li>Pelatihan Pelayanan Prima</li>
                                    <li>Pelatihan ISO 17025.</li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="service-card">

                            <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/4.jpeg')"></div>
                            <div class="service-overlay"></div>

                            <div class="service-content">
                                <div class="top-content">
                                    <div class="icon">
                                        <img src="~/webnew/assets/image/icon/icon handshake.png" />
                                    </div>
                                    <p class="title">Analisis Pengujian Air dan Udara</p>
                                </div>
                                <br />

                                <ul class="service-list">
                                    <li>Sertifikasi Pengambil Contoh Uji Air</li>
                                    <li>Sertifikasi Pengambil Contoh Uji Udara</li>
                                    <li>Sertifikasi Analisis Spektrofotometri Serapan Atom (SSA)</li>
                                    <li>Sertifikasi Petugas K3 Laboratorium</li>
                                    <li>Sertifikasi Analisis Spektrofotometri (UV -VIS)</li>
                                    <li>Pelatihan ISO 17025.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="service-card">

                            <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/1.jpeg')"></div>
                            <div class="service-overlay"></div>

                            <div class="service-content">
                                <div class="top-content">
                                    <div class="icon">
                                        <img src="~/webnew/assets/image/icon/icon lab.png" />
                                    </div>
                                    <p class="title">Penyelia</p>
                                </div>
                                <br />

                                <ul class="service-list">
                                    <li>Sertifikasi Pengambil Contoh Uji Air</li>
                                    <li>Sertifikasi Pengambil Contoh Uji Udara</li>
                                    <li>Sertifikasi Analisis Spektrofotometri Serapan Atom (SSA)</li>
                                    <li>Sertifikasi Petugas K3 Laboratorium</li>
                                    <li>Sertifikasi Analisis Spektrofotometri (UV -VIS)</li>
                                    <li>Pelatihan ISO 17025.</li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="service-card">

                            <div class="service-bg" style="background-image: url('/webnew/assets/image/foto/2.jpeg')"></div>
                            <div class="service-overlay"></div>

                            <div class="service-content">
                                <div class="top-content">
                                    <div class="icon">
                                        <img src="~/webnew/assets/image/icon/icon user.png" />
                                    </div>
                                    <p class="title">Pengenalan Mutu</p>
                                </div>
                                <br />

                                <ul class="service-list">
                                    <li>Sertifikasi Okupasi Instruktur (Level IV)</li>
                                    <li>Pelatihan ISO 17025 Pelatihan</li>
                                    <li>Audit Internal Pelatihan.</li>
                                    <li>Jaminan Mutu Pelatihan</li>
                                    <li>Manajemen Risiko </li>
                                    <li>Pelatihan Validasi dan Verifikasi</li>
                                    <li>Metode Pengujian Kimia.</li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="service-card">

                            <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/3.jpeg')"></div>
                            <div class="service-overlay"></div>

                            <div class="service-content">
                                <div class="top-content">
                                    <div class="icon">
                                        <img src="~/webnew/assets/image/icon/icon check.png" />
                                    </div>
                                    <p class="title">Pelayanan</p>
                                </div>
                                <br />

                                <ul class="service-list">
                                    <li>Pelatihan Pelayanan Prima</li>
                                    <li>Pelatihan ISO 17025.</li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <div class="swiper-slide">
                        <div class="service-card">

                            <div class="service-bg" style="background-image:url('/webnew/assets/image/foto/4.jpeg')"></div>
                            <div class="service-overlay"></div>

                            <div class="service-content">
                                <div class="top-content">
                                    <div class="icon">
                                        <img src="~/webnew/assets/image/icon/icon handshake.png" />
                                    </div>
                                    <p class="title">Analisis Pengujian Air dan Udara</p>
                                </div>
                                <br />

                                <ul class="service-list">
                                    <li>Sertifikasi Pengambil Contoh Uji Air</li>
                                    <li>Sertifikasi Pengambil Contoh Uji Udara</li>
                                    <li>Sertifikasi Analisis Spektrofotometri Serapan Atom (SSA)</li>
                                    <li>Sertifikasi Petugas K3 Laboratorium</li>
                                    <li>Sertifikasi Analisis Spektrofotometri (UV -VIS)</li>
                                    <li>Pelatihan   ISO 17025.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</section>

<!-- Berita -->
<div class="container my-5">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold">Berita Laboratorium Lingkungan</h4>

        <a href="/Berita" class="btn btn-outline-secondary rounded-pill px-3">
            Lihat Selengkapnya →
        </a>
    </div>

    <div class="row">

        <div class="col-md-8">
            <div id="featured-berita"></div>
        </div>

        <div class="col-md-4">
            <div id="sidebar-berita"></div>
        </div>

    </div>

</div>

<!-- Mitra Kami -->

<section class="mitra py-5">
    <div class="container mb-4 text-center">
        <h4 class="fw-bold">Mitra Kami</h4>
        <p class="text-muted">
            Mitra yang sudah mempercayakan uji laboratorium air dan udara <br />
            kepada Laboratorium Lingkungan Hidup Daerah Provinsi DKI Jakarta (LLHD)
        </p>
    </div>

    <div class="logo-slider"></div>
</section>

<!-- Ulasan Pelanggan -->
<section class="testimonial-section py-5">
    <div class="item-center container py-5" style="background-color: #EAF1FF; ">

        <h4 class="testimonial-title mb-5 text-center">
            Ulasan Pelanggan
        </h4>

        <div class="swiper mySwiper">
            <div class="testimonial-card-wrapper swiper-wrapper">

                <div class="col-md-6 col-lg-4 swiper-slide">
                    <div class="testimonial-card">

                        <div class="stars mb-3">
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                        </div>

                        <p class="testimonial-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                        <div class="d-flex align-items-center mt-4">
                            <img src="https://i.pravatar.cc/40?img=1" class="avatar me-3" />
                            <div>
                                <div class="name">PT. ABC</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-6 col-lg-4 swiper-slide">
                    <div class="testimonial-card">

                        <div class="stars mb-3">
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star zero.png" />
                        </div>

                        <p class="testimonial-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                        <div class="d-flex align-items-center mt-4">
                            <img src="https://i.pravatar.cc/40?img=2" class="avatar me-3" />
                            <div>
                                <div class="name">PT. ABC</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-6 col-lg-4 swiper-slide">
                    <div class="testimonial-card">

                        <div class="stars mb-3">
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/starhalf.png" />
                        </div>

                        <p class="testimonial-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                        <div class="d-flex align-items-center mt-4">
                            <img src="https://i.pravatar.cc/40?img=3" class="avatar me-3" />
                            <div>
                                <div class="name">PT. ABC</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-6 col-lg-4 swiper-slide">
                    <div class="testimonial-card">

                        <div class="stars mb-3">
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                        </div>

                        <p class="testimonial-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                        <div class="d-flex align-items-center mt-4">
                            <img src="https://i.pravatar.cc/40?img=3" class="avatar me-3" />
                            <div>
                                <div class="name">PT. ABC</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-6 col-lg-4 swiper-slide">
                    <div class="testimonial-card">

                        <div class="stars mb-3">
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                        </div>

                        <p class="testimonial-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                        <div class="d-flex align-items-center mt-4">
                            <img src="https://i.pravatar.cc/40?img=3" class="avatar me-3" />
                            <div>
                                <div class="name">PT. ABC</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-6 col-lg-4 swiper-slide">
                    <div class="testimonial-card">

                        <div class="stars mb-3">
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/starhalf.png" />
                        </div>

                        <p class="testimonial-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                        <div class="d-flex align-items-center mt-4">
                            <img src="https://i.pravatar.cc/40?img=3" class="avatar me-3" />
                            <div>
                                <div class="name">PT. ABC</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-6 col-lg-4 swiper-slide">
                    <div class="testimonial-card">

                        <div class="stars mb-3">
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star.png" />
                            <img src="~/webnew/assets/image/icon/star zero.png" />
                        </div>

                        <p class="testimonial-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                        <div class="d-flex align-items-center mt-4">
                            <img src="https://i.pravatar.cc/40?img=3" class="avatar me-3" />
                            <div>
                                <div class="name">PT. ABC</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="mt-4 text-center">
                <a href="/ulasan" class="btn btn-outline-dark rounded-pill px-4 py-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14" /><path d="M12 5v14" /></svg>
                    Tambah Ulasan
                </a>
            </div>

        </div>
    </div>
</section>

<!-- Video -->
<section class="section-video">
    <div class="container">

        <h4 class="fw-bold mb-4 text-center">Video Kegiatan</h4>

        <div class="row g-6 justify-content-center" id="video-preview"></div>

        <div class="mt-4 text-center">
            <a href="/Video" class="btn btn-outline-dark rounded-pill px-4 py-2">
                Lihat Selengkapnya →
            </a>
        </div>

    </div>
</section>

<!-- Galeri -->
<section class="section-galeri py-5">
    <div class="container">

        <h4 class="fw-bold mb-4 text-center">
            Galeri Kegiatan
        </h4>

        <div class="galeri-scroll" id="galeri-preview"></div>

        <div class="mt-4 text-center">
            <a href="/Galeri" class="btn btn-outline-dark rounded-pill px-4 py-2">
                Lihat Selengkapnya →
            </a>
        </div>

    </div>
</section>

@section Scripts {
    <script>

        let currentSlide = 0;
        let slides = document.querySelectorAll(".hero-slide");
        let wrapper = document.getElementById("hero-wrapper");
        let dotsContainer = document.getElementById("hero-dots");

        function initSlider() {
            slides = document.querySelectorAll(".hero-slide");

            slides.forEach((_, i) => {
                let dot = document.createElement("span");
                dot.onclick = () => goToSlide(i);
                dotsContainer.appendChild(dot);
            });

            updateSlider();
        }

        function updateSlider() {
            wrapper.style.transform = `translateX(-${currentSlide * 100}%)`;

            let dots = dotsContainer.querySelectorAll("span");
            dots.forEach(d => d.classList.remove("active"));
            dots[currentSlide].classList.add("active");
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlider();
        }

        function prevSlide() {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            updateSlider();
        }

        function goToSlide(index) {
            currentSlide = index;
            updateSlider();
        }


        setInterval(nextSlide, 6000);

        document.addEventListener("DOMContentLoaded", initSlider);


        //kompetensi

        const swiper = new Swiper(".mySwiper", {
            slidesPerView: 4,
            spaceBetween: 20,
            loop: true,

            speed: 5000,

            autoplay: {
                delay: 0,
                disableOnInteraction: false,
            },

            freeMode: true,
            freeModeMomentum: false,

            breakpoints: {
                320: { slidesPerView: 1.2 },
                576: { slidesPerView: 2 },
                768: { slidesPerView: 3 },
                1200: { slidesPerView: 4 }
            }


        });


        //data capaian

        document.addEventListener("DOMContentLoaded", function () {

            const counters = document.querySelectorAll('.counter');

            const runCounter = (counter) => {
                const target = +counter.getAttribute('data-target');
                let count = 0;

                const duration = 1500;
                const stepTime = 16;
                const totalSteps = duration / stepTime;
                const increment = target / totalSteps;

                const update = () => {
                    count += increment;

                    if (count < target) {
                        counter.innerText = Math.floor(count).toLocaleString();
                        requestAnimationFrame(update);
                    } else {
                        counter.innerText = target.toLocaleString();
                    }
                };

                update();
            };

            const observer = new IntersectionObserver((entries, obs) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        runCounter(entry.target);
                        obs.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.5 });

            counters.forEach(counter => observer.observe(counter));

        });


        const ctx = document.getElementById('chartSampel').getContext('2d');

        const gradientBlue = ctx.createLinearGradient(0, 0, 0, 350);
        gradientBlue.addColorStop(0, 'rgba(59, 130, 246, 0.25)');
        gradientBlue.addColorStop(1, 'rgba(59, 130, 246, 0.02)');

        const gradientTeal = ctx.createLinearGradient(0, 0, 0, 350);
        gradientTeal.addColorStop(0, 'rgba(20, 184, 166, 0.25)');
        gradientTeal.addColorStop(1, 'rgba(20, 184, 166, 0.02)');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Tahun 2025', 'Tahun 2024', 'Tahun 2023', 'Tahun 2022'],
                datasets: [
                    {
                        label: 'Internal',
                        data: [1909, 1007, 1567, 1837],
                        borderColor: '#3b82f6',
                        backgroundColor: gradientBlue,
                        fill: true,
                        tension: 0.5,
                        borderWidth: 2,
                        pointRadius: 0,
                        pointHoverRadius: 6,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#3b82f6',
                        pointBorderWidth: 2
                    },
                    {
                        label: 'Eksternal',
                        data: [9078, 5828, 8069, 8554],
                        borderColor: '#14b8a6',
                        backgroundColor: gradientTeal,
                        fill: true,
                        tension: 0.5,
                        borderWidth: 2,
                        pointRadius: 0,
                        pointHoverRadius: 6,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#14b8a6',
                        pointBorderWidth: 2
                    },
                    {
                        label: 'Total',
                        data: [10987, 6835, 9636, 10391],
                        borderColor: '#9ca3af',
                        backgroundColor: 'rgba(156, 163, 175, 0.1)',
                        fill: true,
                        tension: 0.5,
                        borderWidth: 2,
                        pointRadius: 0,
                        pointHoverRadius: 6,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#9ca3af',
                        pointBorderWidth: 2
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,

                interaction: {
                    mode: 'index',
                    intersect: false
                },

                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            pointStyle: 'circle',
                            padding: 20
                        }
                    },

                    tooltip: {
                        backgroundColor: '#ffffff',
                        titleColor: '#000',
                        bodyColor: '#000',
                        borderColor: '#e5e7eb',
                        borderWidth: 1,
                        padding: 10,
                        displayColors: false,
                        callbacks: {
                            label: function (context) {
                                return context.dataset.label + ': ' + context.raw.toLocaleString();
                            }
                        }
                    }
                },

                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#9ca3af'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0,0,0,0.05)',
                            drawBorder: false
                        },
                        ticks: {
                            color: '#9ca3af',
                            callback: function (value) {
                                return value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });


        //mitra

        function loadLogo() {
            fetch('/webnew/json/mitra.json')
                .then(res => res.json())
                .then(data => {

                    let html = "";

                    data.forEach(row => {

                        html += `
                                        <div class="logo-track move-${row.direction}">
                                            ${renderGroup(row.logos)}
                                            ${renderGroup(row.logos)}
                                        </div>
                                    `;
                    });

                    document.querySelector(".logo-slider").innerHTML = html;
                });
        }

        function renderGroup(logos) {
            let group = '<div class="logo-group">';

            logos.forEach(src => {
                group += `<img src="${src}">`;
            });

            group += '</div>';
            return group;
        }

        document.addEventListener("DOMContentLoaded", loadLogo);


        //berita

        function formatTanggal(dateStr) {
            return new Date(dateStr).toLocaleDateString("id-ID", {
                day: "numeric",
                month: "long",
                year: "numeric"
            });
        }

        function loadLandingBerita() {
            fetch('/WebNew/Berita/GetAll')
                .then(res => res.json())
                .then(data => {

                    if (!data || data.length === 0) return;

                    const featured = data[0];

                    document.getElementById("featured-berita").innerHTML = `
                                                <img src="${Array.isArray(featured.gambar) ? featured.gambar[0] : featured.gambar}" class="featured-img">

                                                <small class="text-muted d-block mt-2">${formatTanggal(featured.tanggal)}</small>

                                                <h5 class="fw-bold mt-2">${featured.judul}</h5>

                                                <p class="text-muted">
                                                    ${featured.deskripsi}
                                                </p>

                                                <a href="/Berita/Detail?id=${featured.id}" class="text-primary fw-semibold">
                                                    Baca Selengkapnya
                                                </a>
                                            `;

                    let sidebarHTML = "";

                    data.slice(1, 5).forEach(item => {
                        sidebarHTML += `
                                                    <div class="d-flex landing-item mb-3">

                                                        <img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}" class="landing-img">

                                                        <div>
                                                            <small class="text-muted">${formatTanggal(item.tanggal)}</small>

                                                            <div class="landing-title">${item.judul}</div>

                                                            <a href="/Berita/Detail?id=${item.id}" class="text-primary small">
                                                                Baca Selengkapnya
                                                            </a>
                                                        </div>

                                                    </div>
                                                `;
                    });

                    document.getElementById("sidebar-berita").innerHTML = sidebarHTML;
                });
        }

        document.addEventListener("DOMContentLoaded", loadLandingBerita);

        function loadVideoPreview() {

            fetch('/WebNew/Video/GetAll')
                .then(res => res.json())
                .then(data => {

                    let html = "";

                    data.slice(0, 2).forEach(item => {
                        html += `
                                                <div class="col-md-5">

                                                    <div class="video-embed">
                                                        <iframe
                                                            src="https://www.youtube.com/embed/${item.youtube}"
                                                            frameborder="0"
                                                            allowfullscreen>
                                                        </iframe>
                                                    </div>

                                                </div>
                                            `;
                    });

                    document.getElementById("video-preview").innerHTML = html;
                });
        }

        document.addEventListener("DOMContentLoaded", loadVideoPreview);


        //galeri
        function loadGaleriPreview() {

            fetch('/WebNew/Galeri/GetAll')
                .then(res => res.json())
                .then(data => {

                    let html = "";

                    data.forEach(item => {

                        html += `
                                        <div class="galeri-item">
                                            <img src="${item.gambar}" alt="${item.judul}">
                                        </div>
                                    `;

                    });

                    document.getElementById("galeri-preview").innerHTML = html;

                });
        }

        document.addEventListener("DOMContentLoaded", loadGaleriPreview);
    </script>
}