<?php
// Public Landing PRO App Rengel Tuban
// Patch tampilan seperti Si KUMBANG Kuwurejo, tetapi branding PRO App Rengel Tuban.
require_once __DIR__ . '/app/db.php';
require_once __DIR__ . '/app/helpers.php';

function pro_excerpt($t, $n=165){
  $t = trim(strip_tags((string)$t));
  if (function_exists('mb_strlen') && mb_strlen($t) <= $n) return $t;
  if (!function_exists('mb_strlen') && strlen($t) <= $n) return $t;
  return function_exists('mb_substr') ? mb_substr($t, 0, $n-1) . '…' : substr($t, 0, $n-1) . '…';
}
function pro_asset($path){ return url('assets/' . ltrim($path, '/')); }
function pro_img($path){
  $path = trim((string)$path);
  if ($path === '') return '';
  if (preg_match('~^https?://~i', $path)) return $path;
  return pict_url($path);
}

$q     = trim($_GET['q'] ?? '');
$kat   = trim($_GET['kategori'] ?? '');
$page  = max(1, (int)($_GET['page'] ?? 1));
$limit = 9;
$off   = ($page - 1) * $limit;

$params = [];
$where = ["status='TERBIT'", "tampil_di_app=1", "(tanggal_mulai IS NULL OR tanggal_mulai<=CURDATE())", "(tanggal_selesai IS NULL OR tanggal_selesai>=CURDATE())"];
if ($q !== '') {
  $where[] = "(judul LIKE ? OR ringkasan LIKE ? OR isi LIKE ?)";
  $like = "%$q%";
  array_push($params, $like, $like, $like);
}
if ($kat !== '') {
  $where[] = "kategori=?";
  $params[] = $kat;
}
$whereSql = 'WHERE ' . implode(' AND ', $where);

$rows = [];
$total = 0;
$dbError = '';
try {
  $total = (int)(db_one("SELECT COUNT(*) c FROM siapp_pengumuman $whereSql", $params)['c'] ?? 0);
  $rows = db_all("SELECT id, judul, kategori, ringkasan, isi, gambar_url, lampiran_url, prioritas, created_at, tanggal_mulai
                  FROM siapp_pengumuman
                  $whereSql
                  ORDER BY FIELD(prioritas,'DARURAT','PENTING','NORMAL'), COALESCE(tanggal_mulai, DATE(created_at)) DESC, id DESC
                  LIMIT $limit OFFSET $off", $params);
} catch (Throwable $e) {
  $dbError = $e->getMessage();
}
$pages = max(1, (int)ceil(max(0,$total) / $limit));

function keepqs_pro($extra = []){
  $qs = $_GET;
  foreach($extra as $k=>$v) $qs[$k] = $v;
  return e($_SERVER['PHP_SELF'] . '?' . http_build_query($qs));
}
$logo = pro_asset('pro_app_icon.png');
$logoHeader = pro_asset('pro_app_header.png');
?>
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>PRO App Rengel Tuban</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Informasi, pengumuman, layanan warga, dan toko tetangga Desa Rengel, Kecamatan Rengel, Kabupaten Tuban.">
<link rel="icon" href="<?= e($logo) ?>">
<style>
:root{
  --blue:#0D47A1; --blue2:#063B87; --cyan:#12D9FF; --purple:#8B35FF; --gold:#FFEB3B;
  --soft:#f4f7fb; --text:#172033; --muted:#657086;
}
*{box-sizing:border-box} body{margin:0;font-family:Arial,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--soft);color:var(--text)}
a{text-decoration:none;color:var(--blue)}
.topbar{background:linear-gradient(100deg,#082d76,#0d47a1 55%,#4a28c9);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;box-shadow:0 10px 26px rgba(13,71,161,.26);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px}.brand img.icon{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}.brand strong{font-size:18px;letter-spacing:.3px}.brand small{display:block;font-size:11px;color:#dbeafe;margin-top:1px}.nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.nav a{color:#fff;font-size:12px;opacity:.95}.nav .login{background:rgba(255,235,59,.95);color:#082d76;padding:8px 12px;border-radius:999px;font-weight:bold}
.hero{position:relative;height:48vh;min-height:330px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 10%,rgba(18,217,255,.28),transparent 32%),radial-gradient(circle at 80% 20%,rgba(139,53,255,.30),transparent 28%),linear-gradient(135deg,#061a3d,#0d47a1 52%,#26106b)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,13,30,.55),rgba(5,13,30,.10)),url('<?= e($logoHeader) ?>') center 36%/min(720px,82vw) no-repeat;opacity:.28;filter:drop-shadow(0 0 25px rgba(18,217,255,.55))}.hero:after{content:"";position:absolute;inset:auto -10% -50% -10%;height:70%;background:radial-gradient(ellipse at center,rgba(18,217,255,.22),transparent 65%)}
.hero .inner{position:relative;text-align:center;color:#fff;padding:22px;max-width:960px}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:8px 13px;font-size:12px;backdrop-filter:blur(8px)}.hero h1{font-size:clamp(30px,5vw,56px);line-height:1.03;margin:18px 0 8px;letter-spacing:.5px}.hero p{margin:0 auto;color:#eaf6ff;max-width:760px;font-size:15px;line-height:1.55}
.quick{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.qbtn{color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);padding:10px 13px;border-radius:12px;font-size:13px;backdrop-filter:blur(8px)}.qbtn.gold{background:linear-gradient(90deg,#ffeb3b,#ffc107);color:#0b2a5d;font-weight:bold;border:none}
.searchbar{margin:22px auto 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.searchbar input,.searchbar select{padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.94);min-width:240px;font-size:14px;outline:none}.searchbar button{padding:12px 16px;border:none;border-radius:12px;background:linear-gradient(90deg,#0fd3ff,#8b35ff);color:#fff;font-weight:bold;cursor:pointer;box-shadow:0 10px 24px rgba(18,217,255,.20)}
.wrap{max-width:1120px;margin:-42px auto 36px;padding:0 14px;position:relative}.section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 13px;color:#fff}.section-title h2{margin:0;font-size:20px;text-shadow:0 2px 8px rgba(0,0,0,.28)}.section-title span{font-size:12px;color:#e9f4ff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.grid{grid-template-columns:1fr}.nav a:not(.login){display:none}.hero{min-height:390px}.searchbar input,.searchbar select{min-width:100%;width:100%}}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 16px 38px rgba(15,34,74,.10);display:flex;flex-direction:column;border:1px solid rgba(13,71,161,.08)}.thumb{height:166px;background:linear-gradient(135deg,#e7f8ff,#f1edff);display:flex;align-items:center;justify-content:center;position:relative}.thumb img{width:100%;height:100%;object-fit:cover}.thumb .emoji{font-size:44px}.body{padding:15px}.badge{display:inline-block;border-radius:999px;font-size:10px;font-weight:bold;padding:5px 8px;background:#e7f8ff;color:#075985;border:1px solid #bae6fd}.badge.danger{background:#ffe8e8;color:#b91c1c;border-color:#fecaca}.meta{font-size:11px;color:var(--muted);margin-left:4px}.card h3{font-size:17px;margin:10px 0 7px}.excerpt{font-size:13px;color:#344055;line-height:1.48}.act{margin-top:auto;padding:14px 15px;border-top:1px solid #eef2f8;display:flex;justify-content:space-between;align-items:center}.btn{display:inline-block;border-radius:12px;background:linear-gradient(90deg,#0d47a1,#4a28c9);color:#fff;padding:9px 12px;font-size:13px;font-weight:bold}.btn.ghost{background:#eef3ff;color:#0D47A1}.empty{grid-column:1/-1;background:#fff;border-radius:18px;padding:25px;text-align:center;color:var(--muted);box-shadow:0 12px 30px rgba(15,34,74,.08)}
.pager{display:flex;gap:6px;justify-content:center;margin:18px 0}.pager a,.pager span{padding:8px 11px;border:1px solid #dbe5f2;border-radius:9px;background:#fff;font-size:13px}.pager .cur{background:#0D47A1;color:#fff;border-color:#0D47A1}.footer{padding:24px 14px;text-align:center;font-size:12px;color:#6b7280}.footer b{color:#0D47A1}
</style>
</head>
<body>
<header class="topbar">
  <div class="brand"><img class="icon" src="<?= e($logo) ?>" alt="PRO App"><div><strong>PRO App Rengel Tuban</strong><small>Pelayanan Rakyat Online • Desa Rengel</small></div></div>
  <nav class="nav"><a href="<?= e(url('info.php')) ?>">Informasi</a><a href="<?= e(url('admin/index.php')) ?>">Command Center</a><a class="login" href="<?= e(url('login.php')) ?>">Login Admin</a></nav>
</header>
<section class="hero">
  <div class="inner">
    <div class="eyebrow">⚡ PRO APP • Rengel • Tuban</div>
    <h1>Informasi Desa Rengel</h1>
    <p>Berita, pengumuman resmi, pelayanan warga, laporan kejadian, Toko Tetangga, dan layanan digital Desa Rengel dalam satu platform.</p>
    <div class="quick"><a class="qbtn gold" href="<?= e(url('login.php')) ?>">Login Admin</a><a class="qbtn" href="<?= e(url('admin/index.php')) ?>">Command Center</a><a class="qbtn" href="<?= e(url('pengumuman.php')) ?>">Kelola Pengumuman</a></div>
    <form class="searchbar" method="get" action="">
      <input type="text" name="q" value="<?= e($q) ?>" placeholder="Cari pengumuman / informasi...">
      <select name="kategori">
        <option value="">Semua Kategori</option>
        <?php foreach(['UMUM','PELAYANAN','KEGIATAN','DARURAT','KESEHATAN','KEAMANAN','UMKM','SAMPAH','SURAT','LAINNYA'] as $k): ?>
          <option value="<?= e($k) ?>" <?= selected($kat,$k) ?>><?= e($k) ?></option>
        <?php endforeach; ?>
      </select>
      <button type="submit">Tampilkan</button>
    </form>
  </div>
</section>
<div class="wrap">
  <div class="section-title"><h2>Berita & Pengumuman Resmi</h2><span><?= number_format($total) ?> informasi ditemukan</span></div>
  <div class="grid">
    <?php if ($dbError): ?>
      <div class="empty">Tabel pengumuman belum siap atau koneksi bermasalah.<br><small><?= e($dbError) ?></small></div>
    <?php elseif (!$rows): ?>
      <div class="empty">Belum ada informasi yang diterbitkan.</div>
    <?php endif; ?>
    <?php foreach($rows as $r): ?>
      <?php $img = pro_img($r['gambar_url'] ?? ''); $isPdf = !empty($r['lampiran_url']) && preg_match('~\.pdf($|\?)~i', $r['lampiran_url']); $tgl = $r['tanggal_mulai'] ?: substr((string)$r['created_at'],0,10); ?>
      <article class="card">
        <div class="thumb">
          <?php if($img): ?><img src="<?= e($img) ?>" alt="<?= e($r['judul']) ?>"><?php else: ?><div class="emoji"><?= $isPdf ? '📄' : '📰' ?></div><?php endif; ?>
        </div>
        <div class="body">
          <span class="badge <?= ($r['prioritas']??'')==='DARURAT'?'danger':'' ?>"><?= e($r['kategori']) ?></span><span class="meta">• <?= e($tgl) ?></span>
          <h3><?= e($r['judul']) ?></h3>
          <div class="excerpt"><?= e($r['ringkasan'] ?: pro_excerpt($r['isi'] ?? '')) ?></div>
        </div>
        <div class="act"><a class="btn" href="<?= e(url('info.php?id='.(int)$r['id'])) ?>">Baca</a><?php if($isPdf): ?><a class="btn ghost" target="_blank" href="<?= e(pro_img($r['lampiran_url'])) ?>">Lihat PDF</a><?php endif; ?></div>
      </article>
    <?php endforeach; ?>
  </div>
  <?php if($pages>1): ?><div class="pager"><?php if($page>1): ?><a href="<?= keepqs_pro(['page'=>1]) ?>">« Awal</a><a href="<?= keepqs_pro(['page'=>$page-1]) ?>">‹ Prev</a><?php endif; ?><span class="cur"><?= e($page) ?> / <?= e($pages) ?></span><?php if($page<$pages): ?><a href="<?= keepqs_pro(['page'=>$page+1]) ?>">Next ›</a><a href="<?= keepqs_pro(['page'=>$pages]) ?>">Akhir »</a><?php endif; ?></div><?php endif; ?>
</div>
<footer class="footer">© <?= date('Y') ?> <b>PRO App Rengel Tuban</b> • Pemerintah Desa Rengel, Kecamatan Rengel, Kabupaten Tuban</footer>
</body>
</html>
