<!-- HERO -->
<div class="public-hero">
  <div style="font-size:3.5rem;margin-bottom:12px">🗺</div>
  <h1>SINERGI</h1>
  <p>Sistem Informasi Geografis Penanganan Kemiskinan Berbasis Kolaborasi Rumah Ibadah, Masyarakat, dan Pemerintah Kota Pontianak</p>
  <div style="margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
    <a href="<?= APP_URL ?>/lapor" style="background:var(--clr-accent);color:var(--clr-primary-d);padding:12px 28px;border-radius:8px;font-weight:700;font-size:1rem;text-decoration:none">📝 Lapor Warga Membutuhkan</a>
    <a href="<?= APP_URL ?>/cek-laporan" style="background:rgba(255,255,255,0.12);color:#fff;padding:12px 28px;border-radius:8px;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid rgba(255,255,255,0.2)">🔍 Cek Status Laporan</a>
  </div>
</div>

<!-- STATS -->
<div class="public-container" style="margin-top:-40px">
  <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:40px">
    <?php $sItems = [
      ['👥', number_format($stats['total_warga']??0), 'Warga Terdata'],
      ['⛪', number_format($stats['total_ri']??0), 'Rumah Ibadah'],
      ['📋', number_format($stats['total_laporan']??0), 'Total Laporan'],
      ['📦', number_format($stats['total_bantuan']??0), 'Bantuan Disalurkan'],
    ]; foreach($sItems as [$icon,$val,$label]): ?>
    <div style="background:#fff;border-radius:12px;padding:20px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.08);border:1px solid var(--clr-border)">
      <div style="font-size:2rem"><?= $icon ?></div>
      <div style="font-size:1.6rem;font-weight:800;color:var(--clr-primary);margin-top:4px"><?= $val ?></div>
      <div style="font-size:0.78rem;color:var(--clr-text-muted)"><?= $label ?></div>
    </div>
    <?php endforeach; ?>
    <div style="background:var(--clr-primary);border-radius:12px;padding:20px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.15)">
      <div style="font-size:2rem">🏛</div>
      <div style="font-size:0.9rem;font-weight:700;color:#fff;margin-top:8px">Kota Pontianak</div>
      <div style="font-size:0.72rem;color:rgba(255,255,255,0.6)">6 Kecamatan</div>
    </div>
  </div>
</div>

<!-- PETA PUBLIK -->
<div class="public-container" style="margin-bottom:48px">
  <h2 style="font-size:1.4rem;font-weight:800;color:var(--clr-text);margin-bottom:8px">Peta Persebaran Kemiskinan</h2>
  <p style="color:var(--clr-text-muted);margin-bottom:16px;font-size:0.9rem">Data real-time persebaran warga miskin dan rumah ibadah di Kota Pontianak</p>
  <div style="border-radius:16px;overflow:hidden;border:1px solid var(--clr-border);box-shadow:0 8px 32px rgba(0,0,0,0.1);position:relative">
    <div id="public-map" style="height:460px"></div>
    <div class="map-legend">
      <h4>Keterangan</h4>
      <div class="map-legend-item"><div class="map-legend-dot legend-dot-ekstrem"></div> Miskin Ekstrem</div>
      <div class="map-legend-item"><div class="map-legend-dot legend-dot-miskin"></div> Miskin</div>
      <div class="map-legend-item"><div class="map-legend-dot legend-dot-rentan"></div> Rentan Miskin</div>
      <div class="map-legend-item"><div class="map-legend-dot legend-dot-ri"></div> Rumah Ibadah</div>
    </div>
  </div>
</div>

<!-- CARA MELAPOR -->
<div style="background:#f8fafc;padding:60px 0">
  <div class="public-container">
    <h2 style="text-align:center;font-size:1.4rem;font-weight:800;margin-bottom:8px">Cara Melapor</h2>
    <p style="text-align:center;color:var(--clr-text-muted);margin-bottom:36px">Mudah dan cepat, tanpa perlu daftar atau login</p>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:24px">
      <?php $steps = [
        ['1','📝','Isi Formulir','Isi nama warga, alamat, dan kondisi yang dialami'],
        ['2','📷','Upload Foto','Unggah foto kondisi tempat tinggal (opsional)'],
        ['3','📍','Tandai Lokasi','Pilih lokasi tepat pada peta interaktif'],
        ['4','✅','Kirim Laporan','Simpan kode laporan untuk memantau status'],
      ]; foreach($steps as [$num,$icon,$title,$desc]): ?>
      <div style="text-align:center;padding:24px 16px">
        <div style="width:52px;height:52px;border-radius:50%;background:var(--clr-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto 12px">
          <?= $icon ?>
        </div>
        <div style="font-size:0.72rem;font-weight:700;color:var(--clr-accent);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px">Langkah <?= $num ?></div>
        <div style="font-weight:700;margin-bottom:6px"><?= $title ?></div>
        <div style="font-size:0.82rem;color:var(--clr-text-muted)"><?= $desc ?></div>
      </div>
      <?php endforeach; ?>
    </div>
    <div style="text-align:center;margin-top:28px">
      <a href="<?= APP_URL ?>/lapor" style="background:var(--clr-primary);color:#fff;padding:13px 32px;border-radius:8px;font-weight:700;font-size:1rem;text-decoration:none;display:inline-block">📝 Mulai Melapor Sekarang</a>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  const map = GISMap.init('public-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
  const [wArgaData, riData] = await Promise.all([
    App.fetchJSON('<?= APP_URL ?>/api/warga-peta'),
    App.fetchJSON('<?= APP_URL ?>/api/rumah-ibadah')
  ]);
  if(wArgaData) GISMap.addWargaLayer(wArgaData);
  if(riData)    GISMap.addRILayer(riData);
  // Auto zoom ke seluruh Kota Pontianak setelah marker dimuat
  GISMap.autoFitBounds();
});
</script>
