@{
    Layout = "_Layout";

    ViewData["Title"] = "Uji Sampel Laboratorium - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Layanan uji sampel laboratorium untuk analisis kualitas air, udara, dan tanah oleh Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Uji Sampel Laboratorium, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Uji Sampel Laboratorium - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Layanan uji sampel laboratorium untuk analisis kualitas air, udara, dan tanah oleh Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Uji Sampel Laboratorium - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Layanan uji sampel laboratorium untuk analisis kualitas air, udara, dan tanah oleh Dinas Lingkungan Hidup DKI Jakarta";


    // Breadcumb
    ViewData["BreadcrumbText"] = "Uji Sampel Laboratorium";
    ViewData["TitleBeforeHighlight"] = "Uji Sampel";
    ViewData["TitleHighlight"] = "Laboratorium";
}
    <!-- Breadcumb -->
    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

    <div class="container mx-auto max-w-6xl py-8">
        <!-- Hero Section -->
        <div class="text-center py-8">
            <h2 class="text-3xl font-bold text-gray-800 mb-4">Layanan Uji Sampel Laboratorium</h2>
            <p class="text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Laboratorium Lingkungan Hidup Daerah (LLHD) merupakan salah satu Unit Pelaksana Teknis (UPT) di Dinas Lingkungan Hidup Provinsi DKI Jakarta yang mempunyai tugas melaksanakan pengambilan contoh uji, pengujian, dan analisis lingkungan secara laboratoris. Laboratorium Lingkungan Hidup Daerah telah diakreditasi oleh Komite Akreditasi Nasional (KAN) dengan standar ISO/IEC 17025:2017 sejak 2002 dan terintegrasi sebagai “Laboratorium Lingkungan” oleh Kementerian Lingkungan Hidup/ Badan Pengendalian Lingkungan Hidup sejak 2011 yang menegaskan bahwa LLHD memiliki kompetensi pengujian berbasis standar internasional. </p>
            </p>
        </div>

        <!-- Tutorial Video Section -->
        <div class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Tutorial Video</h2>
            <div class="grid md:grid-cols-2 gap-6">
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                <div class="aspect-video">
                <iframe src="https://www.youtube.com/embed/KIB0Q2gvLKw" 
                    title="Cara Pembuatan Akun" 
                    allowfullscreen
                    class="w-full h-full">
                </iframe>
                </div>
                <div class="p-4 text-center">
                <h5 class="font-semibold text-gray-800">Cara Pembuatan Akun</h5>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                <div class="aspect-video">
                <iframe src="https://www.youtube.com/embed/wO3abCNqqUU" 
                    title="Cara Pengajuan Layanan" 
                    allowfullscreen
                    class="w-full h-full">
                </iframe>
                </div>
                <div class="p-4 text-center">
                <h5 class="font-semibold text-gray-800">Cara Pengajuan Layanan</h5>
                </div>
            </div>
            </div>
        </div>

        <!-- Services Section -->
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <div>
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Layanan Pengujian Air</h2>
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="grid grid-cols-3 gap-3 mb-4">
                <div class="flex items-center p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                    <i data-lucide="droplets" class="w-5 h-5 text-blue-600 mr-3"></i>
                    <span class="text-gray-700">Air Limbah</span>
                </div>
                <div class="flex items-center p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                    <i data-lucide="waves" class="w-5 h-5 text-blue-600 mr-3"></i>
                    <span class="text-gray-700">Air Sungai</span>
                </div>
                <div class="flex items-center p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                    <i data-lucide="droplet" class="w-5 h-5 text-blue-600 mr-3"></i>
                    <span class="text-gray-700">Air Situ</span>
                </div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                <div class="flex items-center p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                    <i data-lucide="earth" class="w-5 h-5 text-blue-600 mr-3"></i>
                    <span class="text-gray-700">Air Tanah</span>
                </div>
                <div class="flex items-center p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                    <i data-lucide="candy-cane" class="w-5 h-5 text-blue-600 mr-3"></i>
                    <span class="text-gray-700">Air Perpipaan</span>
                </div>
                </div>
            </div>
            </div>

            <div>
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Layanan Pengujian Udara</h2>
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="grid grid-cols-3 gap-3 mb-4">
                <div class="flex items-center p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
                    <i data-lucide="wind" class="w-5 h-5 text-green-600 mr-3"></i>
                    <span class="text-gray-700">Ambient</span>
                </div>
                <div class="flex items-center p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
                    <i data-lucide="home" class="w-5 h-5 text-green-600 mr-3"></i>
                    <span class="text-gray-700">Kualitas Udara Dalam Ruangan</span>
                </div>
                <div class="flex items-center p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
                    <i data-lucide="car" class="w-5 h-5 text-green-600 mr-3"></i>
                    <span class="text-gray-700">Emisi Sumber Bergerak</span>
                </div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                <div class="flex items-center p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
                    <i data-lucide="factory" class="w-5 h-5 text-green-600 mr-3"></i>
                    <span class="text-gray-700">Emisi Sumber Tidak Bergerak</span>
                </div>
                <div class="flex items-center p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
                    <i data-lucide="volume-2" class="w-5 h-5 text-green-600 mr-3"></i>
                    <span class="text-gray-700">Kebisingan dan Getaran</span>
                </div>
                </div>
            </div>
            </div>
        </div>

        <!-- Schedule and Contact Section -->
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <div>
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Jadwal Pelayanan</h2>
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="space-y-4">
                <div class="p-4 bg-orange-50 rounded-lg border-l-4 border-orange-500">
                    <div class="font-semibold text-gray-800">Selasa - Kamis:</div>
                    <div class="text-gray-600">08.00 – 14.00 WIB</div>
                </div>
                <div class="p-4 bg-orange-50 rounded-lg border-l-4 border-orange-500">
                    <div class="font-semibold text-gray-800">Jumat:</div>
                    <div class="text-gray-600">08.00 – 14.00 WIB</div>
                    <div class="text-sm text-gray-500 mt-1">
                    (khusus hari Jumat tidak menerima parameter mikrobiologi)
                    </div>
                </div>
                </div>
            </div>
            </div>

            <div>
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Informasi Kontak</h2>
            <div class="bg-white rounded-lg shadow-md p-6">
                <div class="space-y-4">
                <div>
                    <div class="font-semibold text-gray-800">UPT LLHD Provinsi DKI Jakarta</div>
                    <div class="text-gray-600">Jl. Casablanca Kav. 1</div>
                    <div class="text-gray-600">Kuningan, Jakarta Selatan</div>
                </div>
                <div>
                    <div class="font-semibold text-gray-800">Customer Service (Dasalewa):</div>
                    <a href="tel:+6281511930751" class="text-blue-600 hover:text-blue-800">+62 815-1193-0751</a>
                    <span class="text-sm text-gray-500">(text only)</span>
                </div>
                <div>
                    <div class="font-semibold text-gray-800">Telepon:</div>
                    <a href="tel:+622152921061" class="text-blue-600 hover:text-blue-800">+62-21-52921061</a>
                </div>
                <div>
                    <div class="font-semibold text-gray-800">Fax:</div>
                    <div class="text-gray-600">+62-21-5265309, +62-21-52920263</div>
                </div>
                </div>
            </div>
            </div>
        </div>

        <!-- Online System Section -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Sistem Informasi Online (Sibolink)</h2>
            <div class="bg-white rounded-lg shadow-md p-6">
            <p class="text-gray-600 mb-4">
                Layanan pengujian dapat diakses melalui Sibolink (Sistem Informasi Laboratorium Lingkungan) di 
                <a href="https://llhd.jakarta.go.id" class="text-blue-600 hover:text-blue-800 font-medium">llhd.jakarta.go.id</a>
            </p>
            <p class="text-gray-800 font-semibold mb-4">Fitur yang tersedia:</p>
            <ul class="grid md:grid-cols-2 gap-3 mb-6">
                <li class="flex items-center p-3 bg-purple-50 rounded-lg border-l-4 border-purple-500">
                <span class="text-gray-700">Pendaftaran akun online</span>
                </li>
                <li class="flex items-center p-3 bg-purple-50 rounded-lg border-l-4 border-purple-500">
                <span class="text-gray-700">Pengajuan layanan pengujian</span>
                </li>
                <li class="flex items-center p-3 bg-purple-50 rounded-lg border-l-4 border-purple-500">
                <span class="text-gray-700">Laporan Hasil Uji (LHU) digital</span>
                </li>
                <li class="flex items-center p-3 bg-purple-50 rounded-lg border-l-4 border-purple-500">
                <span class="text-gray-700">Tracking status pengujian</span>
                </li>
            </ul>
            <a href="https://www.youtube.com/@@laboratoriumlingkunganjakarta" 
               class="inline-block bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-300"
               target="_blank">
                Kunjungi Channel YouTube Kami
            </a>
            </div>
        </div>
        </div>