@{
    Layout = "_Layout";

    ViewData["Title"] = "Bidang, UPT dan Suku Dinas - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Description"] = "Bidang, UPT dan Suku Dinas - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["Keywords"] = "Bidang, UPT dan Suku Dinas, DLH, Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgTitle"] = "Bidang, UPT dan Suku Dinas - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["OgDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterTitle"] = "Bidang, UPT dan Suku Dinas - Dinas Lingkungan Hidup DKI Jakarta";
    ViewData["TwitterDescription"] = "Dinas Lingkungan Hidup DKI Jakarta";

    // Breadcumb
    ViewData["BreadcrumbText"] = "Bidang, UPT dan Suku Dinas";
    ViewData["TitleBeforeHighlight"] = "Bidang, UPT";
    ViewData["TitleHighlight"] = "dan Suku Dinas";
}
    <!-- Breadcumb -->
    <partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

    <!-- Content Section -->
<section class="container mx-auto px-6 lg:px-12 py-16">
  <div class="max-w-6xl mx-auto space-y-12">
    <!-- Accordion Container -->
    <div class="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100 space-y-4">
      <!-- Main Accordion Container -->
      <div class="accordion" id="mainAccordion">

        <!-- Sekretariat Dinas Lingkungan Hidup -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('sekretariat')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="building-2"></i>
              <h3 class="text-lg font-semibold text-gray-800">Sekretariat Dinas Lingkungan Hidup</h3>
            </div>
            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsekretariat"></i>
          </button>
          <div id="sekretariat" class="px-6 py-4 bg-white">
            <p class="text-gray-700 leading-relaxed text-md mb-6">
              Sekretariat Dinas Lingkungan Hidup mempunyai tugas menyelenggarakan kesekretariatan di lingkungan Dinas Lingkungan Hidup.
            </p>
            <div class="mt-4">
              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
              <ul class="space-y-2">
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">
                    Pengoordinasian penyusunan rencana strategis, rencana kerja, dan anggaran Dinas Lingkungan Hidup
                  </span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pengelolaan kepegawaian, keuangan, dan barang Dinas Lingkungan Hidup</span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pelaksanaan kegiatan ketatausahaan dan kerumahtanggaan Dinas Lingkungan Hidup</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Bidang PSMDI -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('psmdi')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="hard-drive"></i>
              <h3 class="text-lg font-semibold text-gray-800">Bidang Peran Serta Masyarakat</h3>
            </div>
            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconpsmdi"></i>
          </button>
          <div id="psmdi" class="hidden px-6 py-4 bg-white">
            <p class="text-gray-700 leading-relaxed text-md mb-6">
              Bidang Peran Serta Masyarakat merupakan Unit Kerja lini Dinas Lingkungan Hidup untuk pengembangan peran serta masyarakat dalam pengelolaan lingkungan dan kebersihan.
            </p>
            <div class="mt-4">
              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
              <ul class="space-y-2">
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">
                   Penyusunan bahan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Peran Serta Masyarakat.
                  </span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Peran Serta Masyarakat.</span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pelaksanaan penyuluhan kepada masyarakat di bidang lingkungan dan kebersihan.</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Bidang Pengawasan dan Penataan Hukum -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('pph')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="scale"></i>
              <h3 class="text-lg font-semibold text-gray-800">Bidang Pengawasan dan Penataan Hukum</h3>
            </div>
            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconpph"></i>
          </button>
          <div id="pph" class="hidden px-6 py-4 bg-white">
            <p class="text-gray-700 leading-relaxed text-md mb-6">
              Bidang Pengawasan dan Penaatan Hukum merupakan Unit Iini Dinas Lingkungan Hidup dalam penanganan pengaduan dan penyelesaian sengketa, pengawasan lingkungan dan kebersihan serta penegakan hukum.
            </p>
            <div class="mt-4">
              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
              <ul class="space-y-2">
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">
                  Penyusunan bahan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Pengawasan dan Penaatan Hukum.
                  </span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Pengawasan dan Penaatan Hukum.</span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Penyusunan kebijakan tentang tata cara penanganan pengaduan, penyelesaian sengketa dan pengawasan lingkungan hidup dan kebersihan.</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Bidang Prasarana dan Sarana -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('pps')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="align-end-horizontal"></i>
              <h3 class="text-lg font-semibold text-gray-800">Bidang Prasarana dan Sarana</h3>
            </div>
            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconpps"></i>
          </button>
          <div id="pps" class="hidden px-6 py-4 bg-white">
            <p class="text-gray-700 leading-relaxed text-md mb-6">
              Bidang Prasarana dan Sarana merupakan Unit Kerja lini Dinas Lingkungan Hidup dalam pengadaan, penyimpanan dan penyaluran serta pemeliharaan prasarana dan sarana.
            </p>
            <div class="mt-4">
              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
              <ul class="space-y-2">
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">
                  Penyusunan bahan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Prasarana dan Sarana.
                  </span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Prasarana dan Sarana.</span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Penyusunan kebutuhan pengadaan, penyimpanan dan penyaluran serta pemeliharaan prasarana dan sarana.</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Bidang Tata Lingkungan -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('tataLingkungan')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="leaf"></i>
              <h3 class="text-lg font-semibold text-gray-800">Bidang Tata Lingkungan dan Kebersihan</h3>
            </div>
            <i
              class="text-gray-600 transition-transform duration-200"
              data-lucide="chevron-down"
              id="icontataLingkungan"
            ></i>
          </button>
          <div id="tataLingkungan" class="hidden px-6 py-4 bg-white">
            <p class="text-gray-700 leading-relaxed text-md mb-6">
              Bidang Tata Lingkungan merupakan unit kerja lini Dinas Lingkungan Hidup mempunyai tugas melaksanakan perencanaan lingkungan, kajian dampak lingkungan, dan pemeliharaan lingkungan.
            </p>
            <div class="mt-4">
              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
              <ul class="space-y-2">
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Penyusunan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Tata Lingkungan</span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Tata Lingkungan</span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">
                    Penyusunan bahan kebijakan, pedoman dan standar perencanaan lingkungan, kajian dampak lingkungan, dan pemeliharaan lingkungan
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Bidang Pengelolaan Sampah dan Limbah B3 -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('sampahLimbah')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="recycle"></i>
              <h3 class="text-lg font-semibold text-gray-800">Bidang Pengelolaan Sampah dan Limbah B3</h3>
            </div>
            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsampahLimbah"></i>
          </button>
          <div id="sampahLimbah" class="hidden px-6 py-4 bg-white">
            <p class="text-gray-700 leading-relaxed text-md mb-6">
              Bidang Pengelolaan Sampah dan Limbah B3 mempunyai tugas melaksanakan Pengelolaan Sampah, pengelolaan Limbah B3, dan pengembangan fasilitas teknis.
            </p>
            <div class="mt-4">
              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
              <ul class="space-y-2">
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">
                    Penyusunan bahan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Pengelolaan Sampah dan Limbah B3
                  </span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Pengelolaan Sampah dan Limbah B3</span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pengelolaan sampah dan limbah B3 serta pengembangan fasilitas teknis pengelolaan</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('pengendalianPencemaran')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="shield"></i>
              <h3 class="text-lg font-semibold text-gray-800">Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan</h3>
            </div>
            <i
              class="text-gray-600 transition-transform duration-200"
              data-lucide="chevron-down"
              id="iconpengendalianPencemaran"
            ></i>
          </button>
          <div id="pengendalianPencemaran" class="hidden px-6 py-4 bg-white">
            <p class="text-gray-700 leading-relaxed text-md mb-6">
              Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan mempunyai tugas melaksanakan pemantauan lingkungan, penanggulangan pencemaran lingkungan, dan penanggulangan kerusakan lingkungan.
            </p>
            <div class="mt-4">
              <h4 class="font-semibold text-gray-800 mb-3">Fungsi:</h4>
              <ul class="space-y-2">
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">
                    Penyusunan Rencana Strategis dan Rencana Kerja dan Anggaran Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan
                  </span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">Pelaksanaan Rencana Strategis dan Dokumen Pelaksanaan Anggaran Bidang Pengendalian Pencemaran dan Kerusakan Lingkungan</span>
                </li>
                <li class="flex items-start space-x-2">
                  <div
                    class="flex-shrink-0 w-5 h-5 bg-green-500 text-white rounded-full flex items-center justify-center mt-0.5"
                  >
                    <i data-lucide="check" class="w-3 h-3"></i>
                  </div>
                  <span class="text-gray-700">
                    Penyusunan regulasi dan kebijakan teknis pemantauan kualitas lingkungan, pencegahan pencemaran dan/atau kerusakan lingkungan hidup
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Suku Dinas Section -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('sukuDinas')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="building"></i>
              <h3 class="text-lg font-semibold text-gray-800">Suku Dinas Lingkungan Hidup</h3>
            </div>
            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconsukuDinas"></i>
          </button>
          <div id="sukuDinas" class="hidden px-6 py-4 bg-white">
            <p class="text-gray-700 leading-relaxed text-md mb-6">
              Dinas Lingkungan Hidup Provinsi DKI Jakarta membawahi 5 (lima) wilayah Suku Dinas Lingkungan Hidup Kota Administrasi dan 1 (satu) Kabupaten Administrasi.
            </p>

            <h4 class="font-semibold text-gray-800 mb-3 mt-4">Suku Dinas Lingkungan Hidup Kota Administrasi</h4>
            <p class="text-gray-700 mb-4">
              Suku Dinas Lingkungan Hidup Kota Administrasi mempunyai tugas menyelenggarakan urusan pemerintahan bidang lingkungan hidup dan urusan pemerintahan bidang pekerjaan umum dan penataan ruang pada sub urusan persampahan di Kota Administrasi.
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
              <div
                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
              >
                <h5 class="font-semibold text-gray-800 flex items-center">
                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
                  Jakarta Pusat
                </h5>
                <p class="text-sm text-gray-600 mt-1">Suku Dinas Lingkungan Hidup Kota Administrasi Jakarta Pusat</p>
              </div>

              <div
                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
              >
                <h5 class="font-semibold text-gray-800 flex items-center">
                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
                  Jakarta Utara
                </h5>
                <p class="text-sm text-gray-600 mt-1">Jl. Alur Laut 9, RT.9/RW.5, Rawabadak Sel., Kec. Koja, Jakarta Utara</p>
              </div>


              <div
                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
              >
                <h5 class="font-semibold text-gray-800 flex items-center">
                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
                  Jakarta Barat
                </h5>
                <p class="text-sm text-gray-600 mt-1">Jl. Perdana No.2 8, RT.1/RW.4, Wijaya Kusuma, Kec. Grogol Petamburan</p>
              </div>

              <div
                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
              >
                <h5 class="font-semibold text-gray-800 flex items-center">
                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
                  Jakarta Selatan
                </h5>
                <p class="text-sm text-gray-600 mt-1">Jl. Hj. Tutty Alawiyah No.41, RT.2/RW.5, Kalibata, Kec. Pancoran</p>
              </div>
              <div
                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
              >
                <h5 class="font-semibold text-gray-800 flex items-center">
                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
                  Jakarta Timur
                </h5>
                <p class="text-sm text-gray-600 mt-1">Pinang Ranti, Kec. Makasar, Kota Jakarta Timur</p>
              </div>

              <div
                class="bg-gradient-to-r from-green-50 to-teal-50 rounded-lg p-4 border border-green-100"
              >
                <h5 class="font-semibold text-gray-800 flex items-center">
                  <i data-lucide="map-pin" class="w-4 h-4 mr-2 text-green-600"></i>
                  Kepulauan Seribu
                </h5>
                <p class="text-sm text-gray-600 mt-1">Kab. Administrasi Kepulauan Seribu, DKI Jakarta</p>
              </div>
            </div>
          </div>
        </div>

        <!-- UPT Section -->
        <div class="border border-gray-200 rounded-xl overflow-hidden mb-4">
          <button
            class="w-full px-6 py-4 text-left bg-gradient-to-r from-green-50 to-red-50 hover:from-green-100 hover:to-cyan-100 transition-colors duration-200 flex items-center justify-between"
            onclick="toggleAccordion('upt')"
          >
            <div class="flex items-center space-x-3">
              <i class="text-orange-600" data-lucide="wrench"></i>
              <h3 class="text-lg font-semibold text-gray-800">Unit Pelaksana Teknis</h3>
            </div>
            <i class="text-gray-600 transition-transform duration-200" data-lucide="chevron-down" id="iconupt"></i>
          </button>
          <div id="upt" class="hidden px-6 py-4 bg-white">
            <!-- Nested sections for UPTs -->
            <div class="space-y-6">
              <!-- Laboratorium Lingkungan Hidup Daerah -->
              <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
                <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
                  <i data-lucide="flask" class="w-5 h-5 mr-2 text-orange-600"></i>
                  Laboratorium Lingkungan Hidup Daerah
                </h4>
                <p class="text-gray-700 mb-4">
                  Laboratorium Lingkungan Hidup Daerah mempunyai tugas melaksanakan pengambilan contoh uji, pengujian, dan analisis lingkungan secara laboratoris.
                </p>
                <div class="mt-3">
                  <h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
                  <ul class="space-y-1">
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Melaksanakan pengambilan sampel uji pengujian dan analisa lingkungan</span>
                    </li>
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Melakukan pemantauan kualitas air dan udara</span>
                    </li>
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Menyediakan data dan informasi kualitas lingkungan</span>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Unit Penanganan Sampah Badan Air -->
              <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
                <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
                  <i data-lucide="droplet" class="w-5 h-5 mr-2 text-orange-600"></i>
                  Unit Penanganan Sampah Badan Air
                </h4>
                <p class="text-gray-700 mb-4">
                  Unit Penanganan Sampah Badan Air mempunyai tugas melaksanakan penanganan sampah di badan air.
                </p>
                <div class="mt-3">
                  <h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
                  <ul class="space-y-1">
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Melaksanakan pengelolaan sampah di badan air</span>
                    </li>
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Melakukan pemeliharaan kebersihan badan air</span>
                    </li>
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Mengelola sarana dan prasarana kebersihan badan air</span>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- Unit Pengelola Sampah Terpadu -->
              <div class="bg-gray-50 rounded-lg p-5 border border-gray-200">
                <h4 class="font-semibold text-gray-800 mb-3 flex items-center">
                  <i data-lucide="recycle" class="w-5 h-5 mr-2 text-orange-600"></i>
                  Unit Pengelola Sampah Terpadu
                </h4>
                <p class="text-gray-700 mb-4">
                  Unit Pengelola Sampah Terpadu mempunyai tugas melaksanakan Pengelolaan Sampah secara terpadu.
                </p>
                <div class="mt-3">
                  <h5 class="font-medium text-gray-800 mb-2">Tugas dan Fungsi:</h5>
                  <ul class="space-y-1">
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Pengelolaan dan pelaksanaan kegiatan pengangkutan sampah di tempat pengolahan sampah terpadu</span>
                    </li>
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Pengaturan dan pelaksanaan kegiatan pengelolaan sampah di tempat pengolahan sampah terpadu</span>
                    </li>
                    <li class="flex items-start space-x-2">
                      <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i>
                      <span class="text-sm text-gray-700">Penyusunan pedoman, standar dan prosedur teknis Unit Pengelola Sampah Terpadu</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- End mainAccordion -->
    </div>
  </div>
</section>


    <register-block dynamic-section="scripts" key="jsProgramUdara">
        <script>
            function toggleAccordion(accordionId) {
                const accordion = document.getElementById(accordionId);
                const icon = document.getElementById('icon' + accordionId.slice(-1));
                
                if (accordion.classList.contains('hidden')) {
                    accordion.classList.remove('hidden');
                    icon.style.transform = 'rotate(180deg)';
                } else {
                    accordion.classList.add('hidden');
                    icon.style.transform = 'rotate(0deg)';
                }
            }
        </script>
    </register-block>