@extends('layouts.landing')

@section('title', 'SIPEDAS')
@section('content')

<!-- ======================== HERO ======================== -->
<section class="banner bg-tertiary position-relative overflow-hidden">
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-6 mb-5 mb-lg-0">
        <div class="block text-center text-lg-start pe-0 pe-xl-5">
          <h1 class="text-capitalize mb-4">
            Salurkan Aspirasi Anda <br>dengan <span class="text-primary">Cepat & Transparan</span>
          </h1>
          <p class="mb-4">
            SIPEDAS adalah sistem pengaduan masyarakat Desa Bandasari yang memudahkan Anda
            menyampaikan keluhan, aspirasi, dan laporan terkait pembangunan desa
            secara online — kapan saja, di mana saja.
          </p>
          <a href="/register" class="btn btn-primary">
            Buat Pengaduan Sekarang
            <span style="font-size:14px;" class="ms-2 fas fa-arrow-right"></span>
          </a>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="ps-lg-5 text-center">
          <img loading="lazy" decoding="async"
               src="{{ asset('landingpage/theme/images/banner/banner.png') . '?v=' . time() }}"
               alt="SIPEDAS Banner" class="w-100 rounded shadow">
        </div>
      </div>
    </div>
  </div>
  <div class="has-shapes">
    <svg class="shape shape-left text-light" viewBox="0 0 192 752" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M-30.883 0C-41.3436 36.4248 -22.7145 75.8085 4.29154 102.398C31.2976 128.987 65.8677 146.199 97.6457 166.87C129.424 187.542 160.139 213.902 172.162 249.847C193.542 313.799 149.886 378.897 129.069 443.036C97.5623 540.079 122.109 653.229 191 728.495" stroke="currentColor" stroke-miterlimit="10"/>
      <path d="M-55.5959 7.52271C-66.0565 43.9475 -47.4274 83.3312 -20.4214 109.92C6.58466 136.51 41.1549 153.722 72.9328 174.393C104.711 195.064 135.426 221.425 147.449 257.37C168.829 321.322 125.174 386.42 104.356 450.559C72.8494 547.601 97.3965 660.752 166.287 736.018" stroke="currentColor" stroke-miterlimit="10"/>
    </svg>
    <svg class="shape shape-right text-light" viewBox="0 0 731 746" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12.1794 745.14C1.80036 707.275 -5.75764 666.015 8.73984 629.537C27.748 581.745 80.4729 554.968 131.538 548.843C182.604 542.703 234.032 552.841 285.323 556.748C336.615 560.64 391.543 557.276 433.828 527.964C492.452 487.323 511.701 408.123 564.607 360.255C608.718 320.353 675.307 307.183 731.29 327.323" stroke="currentColor" stroke-miterlimit="10"/>
    </svg>
  </div>
</section>

<!-- ======================== TENTANG ======================== -->
<section id="tentang" class="about-section section bg-tertiary position-relative overflow-hidden">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-5">
        <div class="section-title">
          <p class="text-primary text-uppercase fw-bold mb-3">Tentang SIPEDAS</p>
          <h1>Mewujudkan Pelayanan Desa yang Transparan & Akuntabel</h1>
          <div class="lead mb-0 mt-4">
            <p>SIPEDAS (Sistem Pengaduan Masyarakat Desa Bandasari) adalah platform digital
              yang dirancang untuk memfasilitasi komunikasi antara masyarakat dan pemerintah
              desa dalam hal penyampaian aspirasi, keluhan, dan laporan pembangunan.</p>
            <p>Dengan SIPEDAS, setiap laporan yang masuk akan dipantau secara langsung oleh
              perangkat desa, diproses dengan transparan, dan hasilnya dapat dilihat oleh
              masyarakat kapan saja.</p>
          </div>
          <a class="btn btn-primary mt-4" href="/register">Mulai Laporkan</a>
        </div>
      </div>
      <div class="col-lg-7 text-center text-lg-end">
        <img loading="lazy" decoding="async"
             src="{{ asset('landingpage/theme/images/about-us.png') . '?v=' . time() }}"
             alt="Tentang SIPEDAS" class="img-fluid rounded shadow" style="max-width:80%">
      </div>
    </div>
  </div>
  <div class="has-shapes">
    <svg class="shape shape-left text-light" width="381" height="443" viewBox="0 0 381 443" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M334.266 499.007C330.108 469.108 304.151 446.496 276.261 435.921C248.372 425.346 218.077 424.035 188.666 419.32C159.254 414.589 128.795 405.375 108.664 383.129C72.8533 343.535 83.3445 282.01 77.7634 228.587C69.3017 147.754 15.4873 73.3967 -58.0001 40.9907" stroke="currentColor" stroke-miterlimit="10"/>
    </svg>
  </div>
</section>

<!-- ======================== ALUR PENGADUAN ======================== -->
<section id="alur" class="section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 mb-5">
        <div class="section-title text-center">
          <p class="text-primary text-uppercase fw-bold mb-3">Alur Pengaduan</p>
          <h1>Bagaimana Cara Melaporkan?</h1>
          <p class="lead">Hanya 3 langkah mudah untuk menyampaikan aspirasi Anda kepada pemerintah desa.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-6">
        <div class="text-center p-4">
          <span class="colored-box text-center h3 mb-4 d-inline-flex justify-content-center align-items-center" style="width:70px;height:70px;">01</span>
          <h3 class="mb-3">Daftar Akun</h3>
          <p class="mb-0">Buat akun SIPEDAS dengan mendaftarkan data diri Anda. Proses registrasi cepat dan mudah.</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="text-center p-4">
          <span class="colored-box text-center h3 mb-4 d-inline-flex justify-content-center align-items-center" style="width:70px;height:70px;">02</span>
          <h3 class="mb-3">Buat Laporan</h3>
          <p class="mb-0">Isi detail pengaduan, pilih kategori, upload bukti gambar, dan tandai lokasi di peta interaktif.</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="text-center p-4">
          <span class="colored-box text-center h3 mb-4 d-inline-flex justify-content-center align-items-center" style="width:70px;height:70px;">03</span>
          <h3 class="mb-3">Pantau Progres</h3>
          <p class="mb-0">Pantau status pengaduan Anda secara real-time. Dapatkan notifikasi email setiap ada perubahan.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ======================== LAYANAN KATEGORI ======================== -->
<section class="section bg-tertiary position-relative overflow-hidden">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6">
        <div class="section-title pt-4">
          <p class="text-primary text-uppercase fw-bold mb-3">Kategori Laporan</p>
          <h1>Jenis Pengaduan yang Bisa Dilaporkan</h1>
          <p>SIPEDAS menerima berbagai kategori laporan terkait pembangunan dan pelayanan di Desa Bandasari.</p>
        </div>
      </div>
      @php $categories = \App\Models\Category::where('slug', '!=', 'lainnya')->orderBy('nama')->get(); @endphp
      @foreach($categories as $cat)
      <div class="col-lg-4 col-md-6 service-item">
        <a class="text-black" href="{{ session()->has('user_id') ? '/dashboard/pengaduan/tambah?kategori_slug=' . $cat->slug : '/login' }}">
          <div class="block">
            <span class="colored-box text-center h3 mb-4 d-inline-flex justify-content-center align-items-center" style="width:70px;height:70px;">
              <i class="fas {{ $cat->icon }} fa-2x"></i>
            </span>
            <h3 class="mb-3 service-title">{{ $cat->nama }}</h3>
            <p class="mb-0 service-description">
              {{ $cat->deskripsi ?: 'Laporkan masalah terkait ' . strtolower($cat->nama) . ' di Desa Bandasari melalui SIPEDAS sekarang.' }}
            </p>
          </div>
        </a>
      </div>
      @endforeach
    </div>
  </div>
  <div class="has-shapes">
    <svg class="shape shape-left text-light" width="381" height="443" viewBox="0 0 381 443" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M334.266 499.007C330.108 469.108 304.151 446.496 276.261 435.921C248.372 425.346 218.077 424.035 188.666 419.32C159.254 414.589 128.795 405.375 108.664 383.129C72.8533 343.535 83.3445 282.01 77.7634 228.587C69.3017 147.754 15.4873 73.3967 -58.0001 40.9907" stroke="currentColor" stroke-miterlimit="10"/>
    </svg>
  </div>
</section>

<!-- ======================== STATISTIK ======================== -->
<section id="statistik" class="section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 mb-4">
        <div class="section-title text-center">
          <p class="text-primary text-uppercase fw-bold mb-3">Statistik</p>
          <h1>Transparansi Data Pengaduan</h1>
          <p class="lead">Seluruh data pengaduan dapat dipantau secara terbuka oleh masyarakat.</p>
        </div>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-lg-3 col-md-6 mb-4">
        <div class="shadow rounded bg-white p-4">
          <h1 class="text-primary fw-bold">{{ $total }}</h1>
          <p class="mb-0 text-muted">Total Laporan</p>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 mb-4">
        <div class="shadow rounded bg-white p-4">
          <h1 class="text-warning fw-bold">{{ $pending }}</h1>
          <p class="mb-0 text-muted">Menunggu</p>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 mb-4">
        <div class="shadow rounded bg-white p-4">
          <h1 class="text-info fw-bold">{{ $proses }}</h1>
          <p class="mb-0 text-muted">Diproses</p>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 mb-4">
        <div class="shadow rounded bg-white p-4">
          <h1 class="text-success fw-bold">{{ $selesai }}</h1>
          <p class="mb-0 text-muted">Selesai</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ======================== KEUNGGULAN ======================== -->
<section class="section bg-tertiary position-relative overflow-hidden">
  <div class="container">
    <div class="row align-items-center justify-content-between">
      <div class="col-lg-5">
        <div class="section-title">
          <p class="text-primary text-uppercase fw-bold mb-3">Keunggulan</p>
          <h1>Kenapa Harus SIPEDAS?</h1>
          <div class="content mb-0 mt-4">
            <p>SIPEDAS hadir untuk menjawab kebutuhan masyarakat akan layanan pengaduan
              yang cepat, transparan, dan dapat diakses kapan saja tanpa harus datang
              ke kantor desa.</p>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="difference-of-us-item p-3 rounded mr-0 me-lg-4">
          <div class="d-block d-sm-flex align-items-center m-2">
            <div class="icon me-4 mb-4 mb-sm-0">
              <i class="fas fa-globe mt-4 text-primary" style="font-size:36px"></i>
            </div>
            <div class="block">
              <h3 class="mb-3">Berbasis Online</h3>
              <p class="mb-0">Laporkan dari mana saja, kapan saja — cukup dengan koneksi internet.</p>
            </div>
          </div>
        </div>
        <div class="difference-of-us-item p-3 rounded mr-0 me-lg-4">
          <div class="d-block d-sm-flex align-items-center m-2">
            <div class="icon me-4 mb-4 mb-sm-0">
              <i class="fas fa-eye mt-4 text-primary" style="font-size:36px"></i>
            </div>
            <div class="block">
              <h3 class="mb-3">Transparan</h3>
              <p class="mb-0">Pantau status laporan Anda secara real-time dari awal hingga selesai.</p>
            </div>
          </div>
        </div>
        <div class="difference-of-us-item p-3 rounded mr-0 me-lg-4">
          <div class="d-block d-sm-flex align-items-center m-2">
            <div class="icon me-4 mb-4 mb-sm-0">
              <i class="fas fa-map-marked-alt mt-4 text-primary" style="font-size:36px"></i>
            </div>
            <div class="block">
              <h3 class="mb-3">Lokasi Presisi</h3>
              <p class="mb-0">Tandai lokasi kejadian langsung di peta untuk respons yang lebih cepat.</p>
            </div>
          </div>
        </div>
        <div class="difference-of-us-item p-3 rounded mr-0 me-lg-4">
          <div class="d-block d-sm-flex align-items-center m-2">
            <div class="icon me-4 mb-4 mb-sm-0">
              <i class="fas fa-bell mt-4 text-primary" style="font-size:36px"></i>
            </div>
            <div class="block">
              <h3 class="mb-3">Notifikasi Email</h3>
              <p class="mb-0">Dapatkan pemberitahuan setiap ada perkembangan status pengaduan Anda.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="has-shapes">
    <svg class="shape shape-left text-light" width="290" height="709" viewBox="0 0 290 709" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M-119.511 58.4275C-120.188 96.3185 -92.0001 129.539 -59.0325 148.232C-26.0649 166.926 11.7821 174.604 47.8274 186.346C83.8726 198.088 120.364 215.601 141.281 247.209C178.484 303.449 153.165 377.627 149.657 444.969C144.34 546.859 197.336 649.801 283.36 704.673" stroke="currentColor" stroke-miterlimit="10"/>
    </svg>
  </div>
</section>

<!-- ======================== FAQ ======================== -->
<section id="faq" class="section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="section-title text-center mb-5 pb-2">
          <p class="text-primary text-uppercase fw-bold mb-3">FAQ</p>
          <h1>Pertanyaan yang Sering Diajukan</h1>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="accordion shadow rounded py-5 px-0 px-lg-4 bg-white" id="accordionFAQ">
          <div class="accordion-item p-1 mb-2">
            <h2 class="accordion-header accordion-button h5 border-0 active"
                type="button" data-bs-toggle="collapse" data-bs-target="#q1" aria-expanded="true">
              Apa itu SIPEDAS?
            </h2>
            <div id="q1" class="accordion-collapse collapse border-0 show" data-bs-parent="#accordionFAQ">
              <div class="accordion-body py-0 content">
                SIPEDAS adalah Sistem Pengaduan Masyarakat Desa Bandasari — platform online
                untuk menyampaikan aspirasi, keluhan, dan laporan terkait pembangunan desa.
              </div>
            </div>
          </div>
          <div class="accordion-item p-1 mb-2">
            <h2 class="accordion-header accordion-button h5 border-0"
                type="button" data-bs-toggle="collapse" data-bs-target="#q2" aria-expanded="false">
              Apakah SIPEDAS gratis?
            </h2>
            <div id="q2" class="accordion-collapse collapse border-0" data-bs-parent="#accordionFAQ">
              <div class="accordion-body py-0 content">
                Ya, SIPEDAS gratis untuk seluruh masyarakat Desa Bandasari. Tidak ada biaya
                apapun untuk membuat dan memantau pengaduan.
              </div>
            </div>
          </div>
          <div class="accordion-item p-1 mb-2">
            <h2 class="accordion-header accordion-button h5 border-0"
                type="button" data-bs-toggle="collapse" data-bs-target="#q3" aria-expanded="false">
              Berapa lama pengaduan diproses?
            </h2>
            <div id="q3" class="accordion-collapse collapse border-0" data-bs-parent="#accordionFAQ">
              <div class="accordion-body py-0 content">
                Setiap pengaduan akan diproses maksimal 3x24 jam. Status pengaduan dapat
                dipantau secara langsung melalui akun Anda.
              </div>
            </div>
          </div>
          <div class="accordion-item p-1 mb-2">
            <h2 class="accordion-header accordion-button h5 border-0"
                type="button" data-bs-toggle="collapse" data-bs-target="#q4" aria-expanded="false">
              Data apa saja yang harus dilampirkan?
            </h2>
            <div id="q4" class="accordion-collapse collapse border-0" data-bs-parent="#accordionFAQ">
              <div class="accordion-body py-0 content">
                Cukup isi nama, kategori, deskripsi pengaduan, dan lokasi kejadian. Foto
                pendukung bersifat opsional tapi sangat disarankan.
              </div>
            </div>
          </div>
          <div class="accordion-item p-1 mb-2">
            <h2 class="accordion-header accordion-button h5 border-0"
                type="button" data-bs-toggle="collapse" data-bs-target="#q5" aria-expanded="false">
              Bagaimana jika saya lupa password?
            </h2>
            <div id="q5" class="accordion-collapse collapse border-0" data-bs-parent="#accordionFAQ">
              <div class="accordion-body py-0 content">
                Anda bisa menghubungi perangkat desa untuk reset password, atau menggunakan
                fitur lupa password pada halaman login.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="kontak" class="col-lg-4 mt-4 mt-lg-0">
        <div class="shadow rounded py-5 px-4 ms-0 ms-lg-4 bg-white">
          <div class="block mx-0 mx-lg-3 mt-0">
            <h4 class="h5">Masih Punya Pertanyaan?</h4>
            <div class="content">
              Hubungi Kantor Desa Bandasari<br>
              <strong>Senin - Jumat</strong><br>
              08:00 - 15:00 WIB
            </div>
          </div>
          <div class="block mx-0 mx-lg-3 mt-4">
            <h4 class="h5">Kantor Desa</h4>
            <div class="content">
              Desa Bandasari<br>
              Kecamatan Dukuhturi<br>
              Kabupaten Tegal
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ======================== CTA ======================== -->
<section class="section bg-primary position-relative overflow-hidden">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <h2 class="text-white mb-4">Siap Menyampaikan Aspirasi Anda?</h2>
        <p class="text-white lead mb-4">Bergabunglah dengan warga Desa Bandasari yang telah menggunakan SIPEDAS untuk menyuarakan aspirasi mereka.</p>
        <a href="/register" class="btn btn-light btn-lg">Daftar Sekarang</a>
        <a href="/login" class="btn btn-outline-light btn-lg ms-2">Masuk</a>
      </div>
    </div>
  </div>
</section>

@endsection