<?php
declare(strict_types=1);

require_once __DIR__ . '/../admin/bootstrap.php';

if (!defined('ORPHAN_PUBLIC_BASE')) {
    define('ORPHAN_PUBLIC_BASE', '/zaka/orphan');
}

$pdo = getPDO();

$orphansCount = (int)$pdo->query("SELECT COUNT(*) FROM beneficiaries WHERE beneficiary_type_id=2")->fetchColumn();
$requestsCount = (int)$pdo->query("SELECT COUNT(*) FROM sponsor_access_requests")->fetchColumn();
$approved30 = (int)$pdo->query("SELECT COUNT(*) FROM sponsor_access_requests WHERE status='approved' AND created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY)")->fetchColumn();
?>
<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>كفالة اليتيم | لجنة زكاة وصدقات مخيم حطين</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="<?= ORPHAN_PUBLIC_BASE ?>/assets/style.css">
  <style>
    .hero{
      border-radius:22px;
      padding:26px;
      background: radial-gradient(1200px 600px at 10% 10%, #eaf2ff 0%, #ffffff 55%, #f6fff8 100%);
      border:1px solid #e8eef7;
      overflow:hidden;
      position:relative;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:-120px -120px auto auto;
      width:320px;height:320px;
      background: radial-gradient(circle at 30% 30%, rgba(45,108,223,.20), rgba(45,108,223,0) 60%);
      transform: rotate(12deg);
    }
    .hero h1{margin:0 0 8px;font-size:34px;color:#0f2f5f}
    .hero p{margin:0;color:#415a77;line-height:1.8}
    .hero .actions{margin-top:14px;gap:10px;flex-wrap:wrap}
    .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    .badge{
      display:inline-flex;align-items:center;gap:8px;
      border:1px solid #e0e7f2;background:#fff;border-radius:999px;
      padding:8px 12px;font-weight:800;color:#0f2f5f;font-size:14px;
    }
    .grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
    @media(max-width:900px){.grid2{grid-template-columns:1fr}}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
    @media(max-width:900px){.cards{grid-template-columns:1fr}}
    .mini{
      border:1px solid #e8eef7;background:#fff;border-radius:18px;padding:14px;
      box-shadow:0 10px 25px rgba(15,47,95,.06);
    }
    .mini h3{margin:0 0 6px;color:#0f2f5f}
    .mini p{margin:0;color:#5b6b7a;line-height:1.7}
    .icon{
      width:44px;height:44px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,#2d6cdf,#1d5ac8);
      color:#fff;font-weight:900;
      margin-bottom:10px;
    }
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
    @media(max-width:900px){.steps{grid-template-columns:1fr}}
    .step{
      border:1px dashed #cfe0fb;background:#fbfdff;border-radius:18px;padding:14px
    }
    .step strong{color:#0f2f5f}
  </style>
</head>
<body>
<div class="container">

  <div class="card hero">
    <div class="grid2">
      <div>
        <h1>لجنة زكاة وصدقات مخيم حطين</h1>
        <p>
          نعمل على إيصال الكفالة لمستحقيها بكل شفافية واحترام للخصوصية.
          يمكنك تقديم طلب كفالة يتيم، وبعد مراجعة الطلب سيتم تزويدك بكود دخول للوصول إلى
          معلومات الحالة والوثائق المسموحة فقط.
        </p>

        <div class="actions">
          <a class="btn" href="<?= ORPHAN_PUBLIC_BASE ?>/public/request_access.php">ابدأ كفالة يتيم</a>
          <a class="btn btn-light" href="<?= ORPHAN_PUBLIC_BASE ?>/public/verify.php">تحقق بالكود</a>
          <a class="btn btn-light" href="<?= ORPHAN_PUBLIC_BASE ?>/public/admin_requests.php">إدارة الطلبات (أدمن)</a>
        </div>

        <div class="badges">
          <span class="badge">عدد الأيتام المسجلين: <?= (int)$orphansCount ?></span>
          <span class="badge">إج  الي طلبات الوصول: <?= (int)$requestsCount ?></span>
          <span class="badge">طلبات مُعتمدة آخر 30 يوم: <?= (int)$approved30 ?></span>
        </div>
      </div>

      <div>
        <div class="mini">
          <div class="icon">♥</div>
          <h3>خصوصية وأمان</h3>
          <p>لا يتم عرض وثائق حساسة للعامة. فقط ا  وثائق المفعّلة “قابل للمشاركة” تظهر بعد التحقق بالكود.</p>
        </div>
        <div style="height:12px"></div>
        <div class="mini">
          <div class="icon">✓</div>
          <h3>إجراء بسيط</h3>
          <p>ابحث عن اليتيم، أرسل الطلب، بعد الموافقة يصلك كود عبر واتساب.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <h2 style="margin:0 0 8px;color:#0f2f5f">كيف تتم كفالة اليتيم؟</h2>
    <div class="steps">
      <div class="step"><strong>1) إرسال الطلب</strong><div class="muted">اختيار اليتيم وإرسال بيانات التواصل.</div></div>
      <div class="step"><strong>2) مراجعة الإدارة</strong><div class="muted">يتم التحقق واعتماد الطلب وإصدار كود.</div></div>
      <div class="step"><strong>3) التحقق بالكود</strong><div class="muted">تدخل بالكود وتعرض معلومات الحالة والوثائق المسموحة فقط.</div></div>
    </div>

    <div class="cards">
      <div class="mini">
        <div class="icon">★</div>
        <h3>أثر مستمر</h3>
        <p>كفالة اليتيم تساهم في التعليم والغذاء والكساء والرعاية العامة.</p>
      </div>
      <div class="mini">
        <div class="icon">⚑</div>
        <h3>تقارير واضحة</h3>
        <p>نطوّر النظام تدريجيًا لإضافة ملخصات وتقارير غير حساسة للكفيل.</p>
      </div>
      <div class="mini">
        <div class="icon">⎋</div>
        <h3>مرونة التطوير</h3>
        <p>يمكن تعديل النصوص والمعلومات لاحقًا بسهولة حسب ما تتفقون عليه.</p>
      </div>
    </div>
  </div>

</div>
</body>
</html>