@extends('layouts.app')
@section('css')
@endsection
@section('content')
<!-- Navbar -->
  <!-- Navbar -->
  
  <?php $asset = asset('assets/Background.png'); ?>
  <section 
    class="relative h-[90vh] mb-10 md:h-screen bg-cover bg-center flex items-center bg-[#1E4D8B] md:bg-white md:bg-[url({{ $asset }})]"
    style="">

    {{-- <div class="absolute md:hidden bottom-0 left-0 w-full">
      <svg viewBox="0 0 1440 320">
        <path fill="#ffffff" fill-opacity="1" 
          d="M0,224L60,224C120,224,240,224,360,202.7C480,181,600,139,720,128C840,117,960,139,1080,160C1200,181,1320,203,1380,213.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">
        </path>
      </svg>
    </div> --}}

    <div class="container relative z-10 mx-auto px-6">
      <h2 class="text-3xl md:text-4xl active font-bold text-white mb-4">Dokumen Informasi Kinerja</h2>
      <h3 class="text-3xl md:text-4xl font-bold text-white mb-6">Pengelolaan Lingkungan Hidup Daerah</h3>
      <p class="text-white mb-6 md:w-130">
        Dinas Lingkungan Hidup di tingkat daerah, menyediakan data dan informasi
        tentang kondisi lingkungan hidup dan kinerja pengelolaan lingkungan di wilayahnya.
      </p>
      <form action="">
        <div class="relative w-full max-w-md">
                <!-- Input -->
                <input 
                type="text" 
                placeholder="Apa yang ingin kamu cari ?" 
                style="border: none;"
                class="w-full pl-5 pr-16 py-5 rounded-full text-[#fff] focus:outline-none"
                />
                <!-- Tombol cari -->
                <button 
                class="absolute top-15.5 right-0 text-white -translate-y-1/2 px-6 py-5 rounded-full"
                style="background: #E9811A;">
                <i class="ri-search-line"></i>
                </button>
            </div>
        
      </form>
    </div>
  </section>
  

  <!-- Stats Section -->
  <section class="container relative z-10 mx-auto px-6 md:-mt-45 grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="bg-[#F08787] rounded-2xl shadow-lg p-6 text-white text-left">
        <div class="relative z-10 flex flex-col gap-6 justify-between h-full">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Keseluruhan Dataset</h3>
                </div>
                <div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
                    <svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M24.5 8C16.4887 8 10 11.2817 10 15.3333C10 19.385 16.4887 22.6667 24.5 22.6667C32.5112 22.6667 39 19.385 39 15.3333C39 11.2817 32.5112 8 24.5 8ZM10 19V24.5C10 28.5517 16.4887 31.8333 24.5 31.8333C32.5112 31.8333 39 28.5517 39 24.5V19C39 23.0517 32.5112 26.3333 24.5 26.3333C16.4887 26.3333 10 23.0517 10 19ZM10 28.1667V33.6667C10 37.7183 16.4887 41 24.5 41C32.5112 41 39 37.7183 39 33.6667V28.1667C39 32.2183 32.5112 35.5 24.5 35.5C16.4887 35.5 10 32.2183 10 28.1667Z" fill="white"/>
                    </svg>
                    <div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
                </div>
            </div>
            <div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
                <div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="367">367</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-[#A3DC9A] rounded-2xl shadow-lg p-6 text-white text-left">
        <div class="relative z-10 flex flex-col gap-6 justify-between h-full">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Keseluruhan Resource Data</h3>
                </div>
                <div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
                    <svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M33.6875 20.9271L42.875 25.5208L24.5 34.7083L6.125 25.5208L15.3125 20.9271M33.6875 31.1354L42.875 35.7292L24.5 44.9167L6.125 35.7292L15.3125 31.1354M24.5 6.125L42.875 15.3125L24.5 24.5L6.125 15.3125L24.5 6.125Z" stroke="white" stroke-width="2"/>
                    </svg>

                    <div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
                </div>
            </div>
            <div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
                <div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="60">60</div>
                </div>
            </div>
        </div>
    </div>
    <!-- Card 3 -->
    <div class="bg-[#7F55B1] rounded-2xl shadow-lg p-6 text-white text-left">
        <div class="relative z-10 flex flex-col gap-6 justify-between h-full">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="text-lg md:text-xl leading-tight text-white">Jumlah Total Organisasi Terintegrasi</h3>
                </div>
                <div class="icon-container relative" style="translate: none; rotate: none; scale: none; transform: translate(5px, -5px) scale(1.2);">
                    <svg width="45" height="45" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M24.526 45.9283C12.7216 45.9283 3.10843 36.335 3.08852 24.5275C3.0761 21.7112 3.62273 18.9204 4.69673 16.3169C5.77073 13.7134 7.35074 11.3489 9.34521 9.36047L11.515 11.5226C9.80564 13.2272 8.4514 15.2539 7.53067 17.4854C6.60993 19.7169 6.141 22.1089 6.15103 24.5229C6.14865 26.937 6.62517 29.3275 7.553 31.5561C8.48083 33.7848 9.84154 35.8072 11.5563 37.5064C13.2577 39.2112 15.2796 40.5625 17.5055 41.4823C19.7315 42.4022 22.1175 42.8723 24.526 42.8658H24.5567C26.579 42.8678 28.5873 42.5303 30.4979 41.8674L31.5116 44.7584C29.2771 45.5345 26.9282 45.93 24.5628 45.9283H24.526Z" fill="white"/>
                    <path d="M22.9688 24.5H26.0312V30.625H29.0938C29.906 30.625 30.6849 30.9477 31.2593 31.522C31.8336 32.0963 32.1562 32.8753 32.1562 33.6875V38.2812H29.0938V33.6875H26.0312V38.2812H22.9688V33.6875H19.9062V38.2812H16.8438V33.6875C16.8438 32.8753 17.1664 32.0963 17.7407 31.522C18.3151 30.9477 19.094 30.625 19.9062 30.625H22.9688V24.5ZM35.2188 39.8125C35.6249 39.8125 36.0143 39.9738 36.3015 40.261C36.5887 40.5482 36.75 40.9376 36.75 41.3438C36.75 41.7499 36.5887 42.1393 36.3015 42.4265C36.0143 42.7137 35.6249 42.875 35.2188 42.875C34.8126 42.875 34.4232 42.7137 34.136 42.4265C33.8488 42.1393 33.6875 41.7499 33.6875 41.3438C33.6875 40.9376 33.8488 40.5482 34.136 40.261C34.4232 39.9738 34.8126 39.8125 35.2188 39.8125ZM13.7812 6.125C14.1874 6.125 14.5768 6.28633 14.864 6.57349C15.1512 6.86066 15.3125 7.25014 15.3125 7.65625C15.3125 8.06236 15.1512 8.45184 14.864 8.73901C14.5768 9.02617 14.1874 9.1875 13.7812 9.1875C13.3751 9.1875 12.9857 9.02617 12.6985 8.73901C12.4113 8.45184 12.25 8.06236 12.25 7.65625C12.25 7.25014 12.4113 6.86066 12.6985 6.57349C12.9857 6.28633 13.3751 6.125 13.7812 6.125Z" fill="white"/>
                    <path d="M32.0338 15.4748C31.3876 11.9039 28.2546 9.1875 24.5 9.1875C20.7454 9.1875 17.6124 11.9039 16.9662 15.4748C15.6247 15.7947 14.4299 16.5568 13.5744 17.6385C12.7188 18.7202 12.2523 20.0584 12.25 21.4375C12.25 24.8154 14.9971 27.5625 18.375 27.5625H19.9062V24.5H18.375C16.686 24.5 15.3125 23.1265 15.3125 21.4375C15.3125 19.7485 16.686 18.375 18.375 18.375H19.9062V16.8438C19.9062 14.3111 21.9673 12.25 24.5 12.25C27.0327 12.25 29.0938 14.3111 29.0938 16.8438V18.375H30.625C32.314 18.375 33.6875 19.7501 33.6875 21.4375C33.6875 23.1249 32.314 24.5 30.625 24.5H29.0938V27.5625H30.625C34.0029 27.5625 36.75 24.8154 36.75 21.4375C36.7477 20.0584 36.2812 18.7202 35.4256 17.6385C34.5701 16.5568 33.3753 15.7947 32.0338 15.4748Z" fill="white"/>
                    <path d="M39.6594 39.6426L37.4942 37.4759C39.2061 35.7743 40.5636 33.7502 41.488 31.5205C42.4124 29.2908 42.8854 26.9 42.8796 24.4863C42.8796 14.3555 34.6369 6.11127 24.5046 6.11127C22.4374 6.11127 20.4391 6.44355 18.5618 7.0974L17.5543 4.2064C19.7899 3.43426 22.1394 3.04295 24.5046 3.04877C36.3259 3.04877 45.9421 12.665 45.9421 24.4863C45.9421 30.2086 43.7111 35.5909 39.6594 39.6426Z" fill="white"/>
                    </svg>

                    <div class="icon-blob absolute inset-0 bg-white rounded-full scale-0 opacity-0" style="transform: scale(1.5); translate: none; rotate: none; scale: none; opacity: 0.15;"></div>
                </div>
            </div>
            <div class="text-left card-content-info opacity-0 pointer-events-none" style="opacity: 1;">
                <div class="flex items-end gap-2" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px);">
                    <div class="text-5xl md:text-7xl font-bold rolling-number" data-target="60">60</div>
                </div>
            </div>
        </div>
    </div>
  </section>
  
  <section class="contianer relative px-10 pt-20">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      <div class="">
        <img src="{{ asset('assets/character 2.png') }}" class="left-0">
      </div>
      <div class="p-5 flex flex-col gap-3">
        <h3 class="text-3xl poppins-bold active">Resource Data Terbaru</h3>
        <p class="lg:w-150">Temukan informasi terbaru dan terpercaya dari koleksi 60 resource data kami. Berikut beberapa data pilihan yang dapat Anda akses langsung. Untuk melihat semua data, silakan kunjungi halaman penuh</p>
        <div class="flex flex-col mt-10 gap-5">
          <div class="flex">
            <div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
              <a href="">Curah Hujan Rata-Rata Bulanan &nbsp;<i class="ri-arrow-right-line ml-10"></i></a>
            </div>
          </div>
          <div class="flex">
            <div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
              <a href="">Jumlah Rumah Tangga dan Fasilitas Tempat Buang Air Besar&nbsp;<i class="ri-arrow-right-line ml-10"></i></a>
            </div>
          </div>
          <div class="flex">
            <div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
              <a href="">Jumlah Rumah Tangga Miskin&nbsp;<i class="ri-arrow-right-line ml-10"></i></a>
            </div>
          </div>
          <div class="flex">
            <div class="bg-[#1E4D8B] p-3 rounded-[10px] text-white">
              <a href="">Jumlah Kendaraan Bermotor dan Jenis Bahan Bakar yang digunakan&nbsp;<i class="ri-arrow-right-line ml-10"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="contianer relative pt-20">
    <div class="flex gap-7 md:gap-3 bg-[#F0F0F0] p-10 overflow-x-auto">
      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
        <div class="mx-auto">
          <img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="" class="">
        </div>
        <div class="mx-auto">
          <h1>Dinas Lingkungan Hidup</h1>
        </div>
      </div>
      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
        <div class="mx-auto">
          <img src="{{ asset('assets/logo/mrt.png') }}" alt="" width="" class="">
        </div>
        <div class="mx-auto">
          <h1>MRT Jakarta</h1>
        </div>
      </div>
      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
        <div class="mx-auto">
          <img src="{{ asset('assets/logo/kai.png') }}" alt="" width="" class="">
        </div>
        <div class="mx-auto">
          <h1>KAI Commuter Line</h1>
        </div>
      </div>
      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
        <div class="mx-auto">
          <img src="{{ asset('assets/logo/pam.png') }}" alt="" width="" class="">
        </div>
        <div class="mx-auto">
          <h1>PAM Jaya</h1>
        </div>
      </div>
      <div class="bg-white md:w-55 rounded-[20px] shadow-lg flex flex-col text-center p-5 gap-3 mx-auto">
        <div class="mx-auto">
          <img src="{{ asset('assets/logo/dishub.png') }}" alt="" width="" class="">
        </div>
        <div class="mx-auto">
          <h1>Dinas Perhubungan</h1>
        </div>
      </div>

    </div>
  </section>

  <section class="container relative px-10 py-20">
    <div class="relative flex justify-between items-center content-center mb-10">
      <div>
        <h1 class="font-bold poppins-bold text-xl">Dataset Terbaru</h1>
      </div>
      <div>
        <a href="" class="p-3 bg-[#FFAD5C] text-white rounded-full">Lihat Semua Dataset</a>
      </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
        <div class="flex flex-col gap-3 mx-auto items-center">
          <img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="50" class="">
          <h1 class="font-bold">Dinas Lingkungan Hidup</h1>
        </div>
        <div class="flex flex-col gap-3 w-1/2">
          <div>
            <h5 class="font-bold">Jumlah Rumah Tangga Miskin</h5>
          </div>
          <div>
            <p>Lorem Ipsum is simply dummy text of the printing and  typesetting industry...</p>
          </div>
          <div class="mt-4">
            <a href="" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
        <div class="flex flex-col gap-3 mx-auto items-center">
          <img src="{{ asset('assets/logo/dinas.png') }}" alt="" width="50" class="">
          <h1 class="font-bold">Dinas Lingkungan Hidup</h1>
        </div>
        <div class="flex flex-col gap-3 w-1/2">
          <div>
            <h5 class="font-bold">Curah Hujan Rata-Rata Bulanan</h5>
          </div>
          <div>
            <p>Lorem Ipsum is simply dummy text of the printing and  typesetting industry...</p>
          </div>
          <div class="mt-4">
            <a href="" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
        <div class="flex flex-col gap-3 mx-auto items-center">
          <img src="{{ asset('assets/logo/dishub.png') }}" alt="" width="50" class="">
          <h1 class="font-bold">Dinas Perhubungan</h1>
        </div>
        <div class="flex flex-col gap-3 w-1/2">
          <div>
            <h5 class="font-bold">Jumlah Kendaraan Bermotor dan Jenis Bahan Bakar  yang digunakan</h5>
          </div>
          <div>
            <p>Lorem Ipsum is simply dummy text of the printing and  typesetting industry...</p>
          </div>
          <div class="mt-4">
            <a href="" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-[20px] shadow-lg p-5 py-10 gap-3 flex">
        <div class="flex flex-col gap-3 mx-auto items-center">
          <img src="{{ asset('assets/logo/pam.png') }}" alt="" width="100%" class="">
          <h1 class="font-bold">PAM JAYA</h1>
        </div>
        <div class="flex flex-col gap-3 w-1/2">
          <div>
            <h5 class="font-bold">Jumlah Rumah Tangga dan Fasilitas Tempat Buang Air Besar</h5>
          </div>
          <div>
            <p>Lorem Ipsum is simply dummy text of the printing and  typesetting industry...</p>
          </div>
          <div class="mt-4">
            <a href="" class="rounded-full text-[10px] bg-[#E9811A] text-white px-6 py-3">Lihat Detail</a>
          </div>
        </div>
      </div>

    </div>
  </section>
  
@endsection