<?php
declare(strict_types=1);

require_once __DIR__ . '/public/_public_bootstrap.php';
require_once __DIR__ . '/app/public_site.php';

$pdo = public_db(['set_names' => db_charset()]);
$svc = new PublicSiteService($pdo);

$counts            = $svc->getCounts();
$totals            = $svc->getTotals();
$completionPercent = $svc->getCompletionPercentFromEvaluations();
$attendancePercent = $svc->getAttendancePercent();
$gallery           = $svc->getGalleryImages();
$gradCerts4        = $svc->getGraduateCertificates(4, true);
$heroMedia         = $svc->getHeroMedia();

$systemSiteName = function_exists('app_display_name') ? app_display_name() : (defined('APP_NAME') ? APP_NAME : 'البرنامج الذهبي');
$systemSiteTagline = function_exists('app_tagline') ? app_tagline() : 'نظام متكامل لمتابعة حفظ القرآن الكريم';
$systemLogoUrl = function_exists('logo_url') ? logo_url() : (function_exists('asset_url') ? asset_url('golden.png') : 'golden.png');
$systemFooter = function_exists('system_footer_settings') ? system_footer_settings() : [
    'copyright' => $systemSiteName,
    'org_name' => $systemSiteName,
    'help_label' => 'المساعدة',
    'help_url' => '',
    'whatsapp_number' => '',
    'programmer_text' => '',
    'motto' => $systemSiteTagline,
];
$supportDigits = preg_replace('/\D+/', '', (string)($systemFooter['whatsapp_number'] ?? ''));
$supportPhoneLabel = $supportDigits;
if (preg_match('/^966(\d{2})(\d{3})(\d{4})$/', $supportDigits, $m)) {
    $supportPhoneLabel = '+966 ' . $m[1] . ' ' . $m[2] . ' ' . $m[3];
} elseif ($supportDigits !== '') {
    $supportPhoneLabel = '+' . $supportDigits;
}
$supportWhatsAppUrl = $supportDigits !== '' ? ('https://wa.me/' . $supportDigits) : '';
$footerHelpUrl = trim((string)($systemFooter['help_url'] ?? ''));
$footerHelpHref = $footerHelpUrl !== '' ? $footerHelpUrl : ($supportWhatsAppUrl ?: '#');
$siteBrand = $systemSiteName;
$heroTitle = trim(site_setting('public_home_hero_title', 'تعليم وتحفيظ القرآن الكريم')) ?: 'تعليم وتحفيظ القرآن الكريم';
$heroSubtitle = trim(site_setting('public_home_hero_subtitle', 'بجامع الملك سلطان بن عبدالعزيز – نُعنى بالنشء والشباب، ونسعى لغرس حب القرآن والانضباط، مع برامج تحفيزية.'));
$homeMetaDescription = trim(site_setting('public_home_meta_description', $heroSubtitle));
$pageTitle = trim(site_setting('public_home_page_title', $siteBrand . ' – الصفحة الرئيسية')) ?: ($siteBrand . ' – الصفحة الرئيسية');
$footerRights = trim(site_setting('public_footer_rights', $siteBrand . ' - جميع الحقوق محفوظة'));
$heroTitle = $systemSiteName;
$heroSubtitle = $systemSiteTagline;
$homeMetaDescription = $systemSiteTagline;
$pageTitle = $systemSiteName . ' - الصفحة الرئيسية';
$footerRights = trim((string)($systemFooter['copyright'] ?? $systemSiteName)) ?: $systemSiteName;

$heroSrc    = e((string)($heroMedia['src'] ?? asset_url('img/3.jpg')));
$heroType   = (string)($heroMedia['media_type'] ?? 'image');
$heroPoster = e((string)($heroMedia['poster_url'] ?? ''));
$ogImage = $heroType === 'video' ? ($heroPoster ?: $heroSrc) : $heroSrc;

$TOTAL_TEACHERS = (int)($totals['TOTAL_TEACHERS'] ?? 0);
$TOTAL_STUDENTS = (int)($totals['TOTAL_STUDENTS'] ?? 0);
$TOTAL_EVALS    = (int)($totals['TOTAL_EVALS'] ?? 0);
$TOTAL_FACES    = (float)($totals['TOTAL_FACES'] ?? 0);
$TOTAL_CIRCLES        = (int)($counts['circles'] ?? 0);
$TOTAL_ACTIVE_CIRCLES = (int)($counts['halaqat_active'] ?? 0);
$HP_PERCENT           = $TOTAL_CIRCLES > 0 ? (int)round(($TOTAL_ACTIVE_CIRCLES / $TOTAL_CIRCLES) * 100) : 0;
$STUDENTS_PER_TEACHER = ($TOTAL_TEACHERS > 0) ? ($TOTAL_STUDENTS / $TOTAL_TEACHERS) : 0.0;
$ramadanRegUrl = route_url('courses/view.php?slug=cour24');
$subscribeResult = null;
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= e($pageTitle) ?></title>
  <meta name="description" content="<?= e($systemSiteName) ?> - <?= e($homeMetaDescription) ?>">
  <meta property="og:title" content="<?= e($siteBrand) ?>">
  <meta property="og:description" content="<?= e($homeMetaDescription) ?>">
  <meta property="og:image" content="<?= $ogImage ?>">
  <meta property="og:url" content="<?= e(public_site_root_url()) ?>">
  <meta name="twitter:card" content="summary_large_image">

<?= function_exists('system_font_head_tags') ? system_font_head_tags() : '' ?>
  <link rel="icon" href="<?= e(function_exists('favicon_url') ? favicon_url() : $systemLogoUrl) ?>">
  <?php render_external_styles(['fontawesome-6.5.2']); ?>
  <link rel="stylesheet" href="<?= e(asset_url('css/core.css')) ?>">
  <link rel="stylesheet" href="<?= e(asset_url('css/style.css')) ?>">
<?= function_exists('system_inline_style_tag') ? system_inline_style_tag() : '' ?>
<?= function_exists('system_favicon_runtime_tag') ? system_favicon_runtime_tag() : '' ?>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css"/>

  <?php if (!empty($ogImage)): ?><link rel="preload" href="<?= $ogImage ?>" as="image"><?php endif; ?>

  <style>
    :root{
      --ink:var(--app-ink,#0e2330);
      --gold:var(--app-gold,#dcb734);
      --muted:var(--app-muted,#6b7a86);
      --card:#ffffff;
      --bg:var(--app-bg,#f5f7fb);
      --line:var(--app-border,#e9ecef);
      --home-ink:var(--ink);
      --home-gold:var(--gold);
      --home-muted:var(--muted);
      --home-bg:var(--bg);
      --home-line:var(--line);
    }
    html,body{margin:0 !important;min-height:100%}
    body{font-family:var(--app-font-family,"IBM Plex Sans Arabic","Cairo",system-ui,sans-serif);background:
      radial-gradient(90% 120% at 100% 0%, rgba(220,183,52,.10) 0%, rgba(14,35,48,0) 40%),
      radial-gradient(120% 140% at 0% 100%, rgba(32,146,230,.08) 0%, rgba(14,35,48,0) 50%),
      var(--bg);}
    body.scope-public.page-index .container{width:min(100% - 32px, 1160px);max-width:1160px;padding-inline:0}
    a{text-decoration:none}
    a:hover{text-decoration:none}
    .topbar{background:var(--app-brand-dark,#0d2431);color:#dbe4ea;font-size:.84rem}
    .topbar .container{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-height:34px}
    .topbar .soc{display:flex;gap:.35rem;align-items:center}
    .topbar .soc a{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;transition:.2s ease}
    .topbar .soc a:hover{background:var(--gold);color:#10202d;transform:translateY(-1px)}
    .header{position:sticky;top:0;z-index:1030;backdrop-filter:blur(12px);background:color-mix(in srgb, #fff 92%, var(--app-bg,#f5f7fb));border-bottom:1px solid color-mix(in srgb, var(--app-brand,#0e2330) 10%, transparent);transition:transform .25s ease, box-shadow .25s ease}
    .header .nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:62px;width:min(100% - 32px, 1160px);max-width:1160px;padding-block:.35rem}
    .brand{display:flex;align-items:center;gap:10px;color:var(--home-ink);min-width:0}
    .brand img{height:42px;width:auto;object-fit:contain}
    .brand b{font-size:1rem;font-weight:800}
    .brand-copy{display:flex;flex-direction:column;gap:3px;line-height:1.25}
    .brand-copy small{color:var(--muted);font-size:.78rem;font-weight:700}
    .menu-btn{display:none;border:1px solid rgba(14,35,48,.12);background:#fff;color:var(--home-ink);border-radius:12px;padding:.5rem .75rem;font-weight:700;box-shadow:0 10px 24px rgba(0,59,115,.07)}
    .navlinks{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap}
    .navlinks a{color:var(--home-ink);font-weight:700;padding:.52rem .68rem;border-radius:999px;font-size:.9rem;transition:.18s ease}
    .navlinks a:hover{background:rgba(14,35,48,.06);color:#0b4566}
    footer{background:linear-gradient(135deg,var(--app-brand-dark,#0f1f2b),var(--app-brand,#123f32));border-top:4px solid var(--gold)}

    .hero{position:relative;isolation:isolate;border-radius:18px;overflow:hidden;min-height:430px;background-size:cover;background-position:center;display:grid;place-items:center;box-shadow:0 24px 60px rgba(0,59,115,.16)}
    .hero::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.22);border-radius:18px;z-index:1;pointer-events:none}
    .hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,38,29,.72), rgba(0,38,29,.22))}
    .hero .inner{position:relative;z-index:2;text-align:center;color:#fff;padding:52px 18px;max-width:840px}
    .hero h1{font:800 38px/1.25 var(--app-font-family,"IBM Plex Sans Arabic",system-ui,sans-serif);margin:0 0 8px}
    .hero .inner p{margin:0 auto 1.1rem;max-width:680px;line-height:1.9;color:rgba(255,255,255,.92)}
    .hero-brand-mark{display:inline-flex;align-items:center;gap:.65rem;margin-bottom:1rem;padding:.45rem .75rem;border-radius:999px;background:rgba(255,255,255,.92);color:var(--home-ink);box-shadow:0 12px 24px rgba(0,0,0,.12)}
    .hero-brand-mark img{width:36px;height:36px;object-fit:contain}
    .hero-brand-mark span{font-weight:800;font-size:.9rem}
    .hero-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.7rem}
    .cta-golden{background:var(--gold);color:var(--app-brand-dark,#10202d) !important;border-radius:999px;padding:10px 18px;font-weight:700;display:inline-block}
    .cta-outline{color:#fff !important;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);border-radius:999px;padding:10px 18px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}

    .row.g-3 .kpi{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.06);padding:14px;transition:transform .25s ease}
    .row.g-3 .kpi:hover{transform:translateY(-3px)}
    .row.g-3 .kpi .ic{width:46px;height:46px;border-radius:12px;background:#f3f5f7;display:flex;align-items:center;justify-content:center;font-size:20px}
    .row.g-3 .kpi .v{font-weight:800;font-size:22px;line-height:1}
    .row.g-3 .kpi .l{color:var(--muted);font-size:13px}
    .num-en{direction:ltr}

    .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px auto 0}
    .tile{background:#fff;color:var(--home-ink);border:1px solid rgba(14,35,48,.06);border-radius:14px;padding:16px 14px;box-shadow:0 10px 24px rgba(0,59,115,.07);transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
    .tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,59,115,.12);border-color:rgba(220,183,52,.35)}
    .tile .ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(220,183,52,.17), rgba(0,59,115,.08));font-size:1.35rem;margin-bottom:10px}
    .gallery-section{margin:28px auto}
    .gallery-section .card,
    .certs-section .card,
    .split .card,
    .newsletter{
      border:1px solid rgba(14,35,48,.07);
      border-radius:16px;
      box-shadow:0 14px 34px rgba(0,59,115,.08);
      background:rgba(255,255,255,.96);
    }
    .gallery-section h3,
    .certs-section h3,
    .split h3,
    .stats h3,
    .newsletter h3{
      color:var(--home-ink);
      font-weight:800;
      letter-spacing:0;
    }
    .swiper{width:100%;height:100%}
    .swiper-slide{position:relative;overflow:hidden;border-radius:16px;background:#f3f5f7;aspect-ratio:16/10;display:block;box-shadow:0 10px 24px rgba(0,0,0,.06)}
    .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
    .swiper-slide:hover img{transform:scale(1.04)}
    .swiper-button-prev,.swiper-button-next{color:#0e2330;background:#fff;width:42px;height:42px;border-radius:50%;box-shadow:0 8px 20px rgba(0,0,0,.12)}
    .swiper-pagination-bullet{background:#cad5dd;opacity:1}
    .swiper-pagination-bullet-active{background:#0e2330}

    /* ===== شهادات المجتازين ===== */
    .certs-section{margin:24px auto}
    .certs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .cert-card{
      position:relative; background:#fff; border-radius:16px; overflow:hidden;
      box-shadow:0 12px 32px rgba(0,59,115,.10); border:1px solid var(--line);
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .cert-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,59,115,.14); }
    .cert-media{aspect-ratio:16/11; background:#f7f9fb; display:block; overflow:hidden;}
    .cert-media img{width:100%;height:100%;object-fit:cover;display:block}
    .cert-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px dashed var(--line)}
    .cert-name{font-weight:700;color:#243037;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cert-open{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;background:var(--gold);color:#10202d;text-decoration:none;font-weight:700}
    .cert-open i{font-size:12px}
    .cert-empty{padding:18px;background:#fff;border:1px dashed var(--line);border-radius:12px;color:#6c757d;text-align:center}

    .certs-more{text-align:center;margin-top:14px}
    .certs-more a{display:inline-block;padding:10px 16px;border-radius:999px;background:#0e2330;color:#fff;text-decoration:none;font-weight:700}
    .certs-more a:hover{opacity:.9}

    @media (max-width:991px){ .certs-grid{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:575px){ .certs-grid{grid-template-columns:1fr} }
    footer .brand img{filter:none;background:rgba(255,255,255,.94);border-radius:16px;padding:.45rem}
    .split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;margin:26px auto}
    .exemplary{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:stretch}
    .exemplary .img{min-height:250px;border-radius:18px;background-size:cover;background-position:center;box-shadow:0 10px 24px rgba(0,59,115,.07)}
    .about .lead,.exemplary .lead{color:#50616d;line-height:2}
    .badge-mini{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .8rem;border-radius:999px;background:#f3f6f9;color:var(--home-ink);font-weight:700;border:1px solid rgba(14,35,48,.08)}
    .badge-mini--success{margin-bottom:10px;background:#e9f9ee;color:#0b6b3a}
    .badge-mini--error{margin-bottom:10px;background:#fdeaea;color:#7c1d1d}
    .inline-badges{display:flex;gap:10px;flex-wrap:wrap}
    .inline-badges--sm{gap:8px;margin-top:8px}
    .top-cta{margin-top:16px}
    .hero-media{width:100%;height:100%;object-fit:cover;display:block}
    .stats{margin:28px auto}
    .stats .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}
    .stats .grid > .col-md-3{min-width:0}
    .stats-grid--progress{margin-top:14px}
    .bar{display:grid;gap:.7rem;margin-top:12px}
    .meter{height:11px;border-radius:999px;background:#edf2f7;overflow:hidden}
    .meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0e2330 0%, #0a5c31 55%, #dcb734 100%)}
    .newsletter{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;align-items:start}
    .newsletter input[type="email"]{width:100%;border:1px solid #d9e2e8;border-radius:14px;padding:.95rem 1rem;box-shadow:inset 0 1px 2px rgba(0,0,0,.02);background:#fff}
    .newsletter button{border:0;border-radius:14px;padding:.95rem 1.1rem;background:#0e2330;color:#fff;font-weight:800}
    .footer-org{color:#dbe8df}
    .footer-list{list-style:none;padding:0;margin:0;color:#cfe0e9;line-height:2}
    footer .cols{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:24px;padding:24px 0}
    footer h4{margin:0 0 12px;font-size:1.05rem}
    footer a{color:#dfeaf1}
    footer a:hover{color:#fff}
    .footbar{border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#c7d4de;padding:14px 12px}

    /* =========================================================
       ✅ بطاقة رمضان (Creative Premium Design)
    ========================================================== */
    .tile.tile-ramadan {
      position: relative;
      overflow: hidden;
      color: #fff !important;
      border-radius: 18px;
      /* حدود شبه شفافة */
      border: 1px solid rgba(220,183,52,0.3);
      /* خلفية متدرجة تجمع الكحلي والزيتي والذهبي */
      background: 
        radial-gradient(circle at 10% 20%, rgba(220,183,52,0.25) 0%, transparent 40%),
        linear-gradient(145deg, #0e2330 0%, #084a2b 60%, #0e2330 100%);
      box-shadow: 0 16px 46px rgba(11, 107, 58, 0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      will-change: transform;
    }

    /* تأثير اللمعة المتحركة (Sheen) */
    .tile.tile-ramadan::after {
      content: "";
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
      transform: skewX(-25deg);
      animation: ramadanSheen 4s infinite;
      pointer-events: none;
    }

    /* زخرفة نجوم في الخلفية */
    .tile.tile-ramadan::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: 
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
      background-size: 40px 40px;
      background-position: 0 0, 20px 20px;
      opacity: 0.1;
      pointer-events: none;
    }

    .tile.tile-ramadan:hover {
      transform: translateY(-5px) scale(1.01);
      box-shadow: 0 20px 50px rgba(11, 107, 58, 0.3);
    }

    /* تحسين شكل الأيقونة وحركتها */
    .tile.tile-ramadan .ico {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(4px);
      animation: moonWiggle 3s ease-in-out infinite;
      box-shadow: 0 0 15px rgba(220,183,52,0.3);
    }

    .tile.tile-ramadan b {
      font-size: 1.25rem;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .tile.tile-ramadan small {
      color: rgba(255,255,255,0.9);
      font-size: 0.9rem;
    }

    /* شارة تنبيه نابضة */
    .ramadan-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border-radius: 99px;
      font-weight: 800;
      font-size: 0.75rem;
      color: #0e2330;
      background: #dcb734;
      box-shadow: 0 0 0 0 rgba(220, 183, 52, 0.7);
      animation: pulseGold 2s infinite;
      z-index: 2;
    }

    /* زر داخل البطاقة */
    .ramadan-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      padding: 8px 16px;
      border-radius: 99px;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      font-weight: 700;
      font-size: 0.9rem;
      width: 100%;
      transition: background 0.2s;
    }
    .tile.tile-ramadan:hover .ramadan-cta {
      background: rgba(255,255,255,0.25);
    }

    /* Animations */
    @keyframes pulseGold {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 183, 52, 0.7); }
      70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(220, 183, 52, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 183, 52, 0); }
    }
    @keyframes moonWiggle {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(-10deg) scale(1.1); }
    }
    @keyframes ramadanSheen {
      0% { left: -100%; }
      20% { left: 200%; } /* Fast pass */
      100% { left: 200%; }
    }

    @media (max-width:575px){
      .hero{min-height:320px;border-radius:16px}
      .hero .inner{padding:36px 14px}
      .hero h1{font-size:28px}
      .ramadan-badge{top:10px;left:10px}
    }

    /* Professional homepage tuning while keeping the slider section */
    body.scope-public.page-index{
      background:
        radial-gradient(85% 100% at 100% 0%, rgba(220,183,52,.08) 0%, rgba(220,183,52,0) 42%),
        radial-gradient(75% 95% at 0% 100%, rgba(0,59,115,.06) 0%, rgba(0,59,115,0) 48%),
        linear-gradient(180deg, #f7f9fc 0%, #f3f6fa 100%);
    }
    body.scope-public.page-index .header{
      background:rgba(255,255,255,.94);
      box-shadow:0 12px 32px rgba(0,42,82,.06);
    }
    body.scope-public.page-index .header .nav{
      min-height:58px;
      width:min(100% - 28px, 1160px);
    }
    body.scope-public.page-index .navlinks{
      flex:1;
      justify-content:flex-end;
      gap:.2rem;
    }
    body.scope-public.page-index .navlinks a{
      font-size:.9rem;
      font-weight:600;
      padding:.55rem .78rem;
    }
    body.scope-public.page-index section.container{
      margin-top:20px !important;
      margin-bottom:0 !important;
    }
    body.scope-public.page-index .home-hero-section{
      margin-top:18px !important;
      width:min(100% - 32px, 1160px);
      max-width:1160px;
    }
    body.scope-public.page-index .home-section{
      width:min(100% - 32px, 1160px);
      max-width:1160px;
    }
    body.scope-public.page-index .home-section--services{
      margin-top:16px !important;
      position:relative;
      overflow:hidden;
      padding:22px;
      border-radius:26px;
      border:1px solid rgba(0,42,82,.06);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,253,.96));
      box-shadow:0 18px 42px rgba(0,42,82,.08);
    }
    body.scope-public.page-index .home-section--services::before,
    body.scope-public.page-index .section-panel::before,
    body.scope-public.page-index .stats::before{
      content:"";
      position:absolute;
      inset:0 auto auto 0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, rgba(220,183,52,.92), rgba(15,109,99,.88));
      opacity:.95;
    }
    body.scope-public.page-index .section-panel{
      width:100%;
      min-height:100%;
      padding:24px !important;
      border-radius:24px;
      border:1px solid rgba(0,42,82,.06);
      box-shadow:0 18px 42px rgba(0,42,82,.08);
      background:rgba(255,255,255,.98);
      position:relative;
      overflow:hidden;
    }
    body.scope-public.page-index .section-title{
      margin:0 0 16px !important;
      font-size:1.18rem;
      font-weight:700;
      color:var(--home-ink);
    }
    body.scope-public.page-index .section-title--sm{
      font-size:1.12rem;
      margin-bottom:10px !important;
    }
    body.scope-public.page-index .section-title--xs{
      font-size:1rem;
      margin-bottom:12px !important;
    }
    body.scope-public.page-index .section-copy{
      margin:0 0 12px !important;
      color:#5b6a76 !important;
      line-height:1.9;
    }
    body.scope-public.page-index .hero{
      min-height:480px;
      border-radius:28px;
      box-shadow:0 28px 72px rgba(0,42,82,.18);
    }
    body.scope-public.page-index .hero::before{
      inset:18px;
      border-color:rgba(255,255,255,.16);
    }
    body.scope-public.page-index .hero::after{
      background:linear-gradient(180deg, rgba(5,34,50,.16) 0%, rgba(5,34,50,.72) 100%);
    }
    body.scope-public.page-index .hero .inner{
      max-width:760px;
      padding:64px 24px;
    }
    body.scope-public.page-index .hero h1{
      font-size:clamp(2rem, 4vw, 3.2rem);
      font-weight:700;
    }
    body.scope-public.page-index .hero .inner p{
      font-size:1rem;
      line-height:1.95;
    }
    body.scope-public.page-index .hero-brand-mark{
      padding:.55rem .95rem;
      gap:.75rem;
    }
    body.scope-public.page-index .tiles{
      grid-template-columns:repeat(auto-fit, minmax(195px, 1fr));
      gap:14px;
      margin-top:0;
    }
    body.scope-public.page-index .tile{
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      min-height:182px;
      border-radius:20px;
      padding:18px 16px;
      background:linear-gradient(180deg, #fff, #fbfcfe);
    }
    body.scope-public.page-index .tile b{font-size:1rem}
    body.scope-public.page-index .tile small{
      display:block;
      font-size:.9rem;
    }
    body.scope-public.page-index .gallery-section .card,
    body.scope-public.page-index .certs-section .card,
    body.scope-public.page-index .split .card,
    body.scope-public.page-index .newsletter{
      padding:22px !important;
    }
    body.scope-public.page-index .home-section h3,
    body.scope-public.page-index .home-section h4{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin:0 0 16px !important;
      color:var(--home-ink);
      font-weight:700;
      line-height:1.4;
    }
    body.scope-public.page-index .home-section h3::after,
    body.scope-public.page-index .home-section h4::after{
      content:"";
      flex:0 0 54px;
      height:3px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(15,109,99,.92), rgba(220,183,52,.92));
    }
    body.scope-public.page-index .gallery-section h3,
    body.scope-public.page-index .certs-section h3,
    body.scope-public.page-index .split h3,
    body.scope-public.page-index .stats h3,
    body.scope-public.page-index .newsletter h3{
      margin:0 0 14px !important;
      font-size:1.18rem;
      font-weight:700;
    }
    body.scope-public.page-index .swiper-slide{
      border-radius:22px;
      aspect-ratio:16/9;
    }
    body.scope-public.page-index .swiper-button-prev,
    body.scope-public.page-index .swiper-button-next{
      width:46px;
      height:46px;
    }
    body.scope-public.page-index .certs-grid{
      grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
      gap:16px;
    }
    body.scope-public.page-index .cert-card{
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    body.scope-public.page-index .split{
      grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
      gap:18px;
    }
    body.scope-public.page-index .split .card{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:22px;
    }
    body.scope-public.page-index .exemplary{
      grid-template-columns:minmax(230px, .8fr) minmax(0, 1fr);
      align-items:start;
    }
    body.scope-public.page-index .split ul{
      margin:0;
      padding-inline-start:1.1rem;
      line-height:1.95;
    }
    body.scope-public.page-index .split .lead{
      margin-bottom:14px;
      font-size:.97rem;
    }
    body.scope-public.page-index .about > div:last-child{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:auto;
    }
    body.scope-public.page-index .badge-mini{
      min-height:42px;
      background:#f4f7fa;
      border-color:#d9e4ec;
      box-shadow:0 8px 18px rgba(0,42,82,.05);
    }
    body.scope-public.page-index .stats{
      position:relative;
      overflow:hidden;
      padding:24px;
      border-radius:26px;
      border:1px solid rgba(0,42,82,.06);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,253,.96));
      box-shadow:0 18px 42px rgba(0,42,82,.08);
    }
    body.scope-public.page-index .stats .grid{
      grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
      gap:14px;
      margin-bottom:14px;
    }
    body.scope-public.page-index .stats .grid > .col-md-3 > .kpi,
    body.scope-public.page-index .stats .grid > .kpi{
      padding:16px;
      border-radius:18px;
      background:linear-gradient(180deg, #fff, #fbfcfe);
      border:1px solid rgba(0,42,82,.05);
      box-shadow:0 12px 28px rgba(0,42,82,.06);
    }
    body.scope-public.page-index .newsletter{
      grid-template-columns:minmax(0, 1.2fr) minmax(250px, .8fr);
      gap:20px;
      align-items:center;
    }
    body.scope-public.page-index .newsletter h4{
      margin:0 0 12px !important;
      font-size:1rem;
      font-weight:700;
      color:var(--home-ink);
    }
    body.scope-public.page-index .newsletter form{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
    }
    body.scope-public.page-index .newsletter > div:first-child > p{
      margin:0 0 12px !important;
      color:#5b6a76 !important;
      line-height:1.9;
    }
    body.scope-public.page-index .newsletter > div:last-child{
      padding-inline-start:10px;
      border-inline-start:1px solid rgba(0,42,82,.08);
    }
    body.scope-public.page-index footer{
      margin-top:24px;
    }
    body.scope-public.page-index footer .cols{
      grid-template-columns:1.3fr .9fr .9fr;
      gap:20px;
      padding:26px 0;
    }
    body.scope-public.page-index footer .brand{
      gap:18px !important;
    }
    body.scope-public.page-index .footer-brand{
      display:flex;
      align-items:center;
      gap:18px !important;
    }
    body.scope-public.page-index .footer-brand-logo{
      height:104px !important;
      width:auto;
      flex:0 0 auto;
    }
    body.scope-public.page-index .footer-copy{
      color:#dbe8df !important;
      line-height:2;
      margin-top:10px;
    }
    body.scope-public.page-index footer .brand img{
      height:104px !important;
    }

    @media (max-width:991.98px){
      .menu-btn{display:inline-flex;align-items:center;justify-content:center}
      .navlinks{
        position:absolute;
        inset-inline:16px;
        top:calc(100% + 8px);
        display:none;
        flex-direction:column;
        align-items:stretch;
        background:#fff;
        border:1px solid rgba(14,35,48,.08);
        border-radius:20px;
        padding:10px;
        box-shadow:0 22px 60px rgba(0,0,0,.12);
      }
      .navlinks.show{display:flex}
      .navlinks a{padding:.95rem 1rem;border-radius:14px}
      body.scope-public.page-index .navlinks{
        justify-content:stretch;
      }
      body.scope-public.page-index .hero{
        min-height:420px;
      }
      body.scope-public.page-index .split,
      body.scope-public.page-index .newsletter,
      body.scope-public.page-index footer .cols,
      body.scope-public.page-index .exemplary{
        grid-template-columns:1fr;
      }
      body.scope-public.page-index .newsletter > div:last-child{
        padding-inline-start:0;
        border-inline-start:none;
        border-top:1px solid rgba(0,42,82,.08);
        padding-top:16px;
      }
    }

    @media (max-width:575.98px){
      body.scope-public.page-index .container{
        width:min(100% - 20px, 1160px);
      }
      .topbar .container{
        flex-direction:column;
        justify-content:center;
        padding:.35rem 0;
      }
      .brand img{height:38px}
      .brand b{font-size:.92rem}
      .brand-copy small{display:none}
      body.scope-public.page-index .home-section{
        width:min(100% - 20px, 1160px);
      }
      body.scope-public.page-index .home-hero-section{
        width:min(100% - 20px, 1160px);
      }
      body.scope-public.page-index .header .nav{
        width:min(100% - 20px, 1160px);
      }
      body.scope-public.page-index .hero{
        min-height:340px;
        border-radius:20px;
      }
      body.scope-public.page-index .hero .inner{
        padding:40px 16px;
      }
      body.scope-public.page-index .gallery-section .card,
      body.scope-public.page-index .certs-section .card,
      body.scope-public.page-index .split .card,
      body.scope-public.page-index .newsletter{
        padding:18px !important;
        border-radius:20px;
      }
      body.scope-public.page-index .home-section--services,
      body.scope-public.page-index .stats{
        padding:18px;
        border-radius:20px;
      }
      body.scope-public.page-index .newsletter form{
        grid-template-columns:1fr;
      }
      body.scope-public.page-index footer .brand img{
        height:88px !important;
      }
      .hero-brand-mark{max-width:100%;border-radius:14px}
      .tiles,
      .stats .grid{grid-template-columns:1fr}
    }
  </style>
</head>
<body <?= function_exists('body_attrs') ? body_attrs() : '' ?>>
  <div class="topbar">
    <div class="container">
      <div><?= e((string)($systemFooter['motto'] ?? $systemSiteTagline)) ?></div>
      <div class="soc">
        <?php if ($supportWhatsAppUrl !== ''): ?>
          <a href="<?= e($supportWhatsAppUrl) ?>" target="_blank" rel="noopener" title="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
        <?php endif; ?>
        <a href="<?= e($footerHelpHref) ?>" <?= $footerHelpHref !== '#' ? 'target="_blank" rel="noopener"' : '' ?> title="<?= e((string)($systemFooter['help_label'] ?? 'المساعدة')) ?>">✉</a>
      </div>
    </div>
  </div>

  <header class="header">
    <div class="container nav">
      <div class="brand">
        <img src="<?= e($systemLogoUrl) ?>" alt="<?= e($systemSiteName) ?>">
        <span class="brand-copy">
          <b><?= e($siteBrand) ?></b>
          <small><?= e($systemSiteTagline) ?></small>
        </span>
      </div>
      <button class="menu-btn" type="button" onclick="document.querySelector('.navlinks').classList.toggle('show')">القائمة ☰</button>
      <nav class="navlinks">
        <a href="#services">الخدمات</a>
        <a href="#gallery">معرض الحلقات</a>
        <a href="#certs">شهادات المجتازين</a>
        <a href="#about">من نحن</a>
        <a href="#stats">الإحصائيات</a>
        <a href="#contact">تواصل</a>
        <a class="cta-golden" href="<?= e(route_url('index.php')) ?>" title="<?= e($systemSiteName) ?>">الدخول إلى <?= e($systemSiteName) ?></a>
      </nav>
    </div>
  </header>

  <section class="container home-hero-section">
    <?php if ($heroType === 'video'): ?>
      <div class="hero">
        <video autoplay muted loop playsinline preload="metadata" class="hero-media" poster="<?= $heroPoster ?: $heroSrc ?>">
          <source src="<?= $heroSrc ?>" type="video/mp4">
        </video>
        <div class="inner">
          <div class="hero-brand-mark">
            <img src="<?= e($systemLogoUrl) ?>" alt="<?= e($systemSiteName) ?>">
            <span><?= e((string)($systemFooter['org_name'] ?? $systemSiteName)) ?></span>
          </div>
          <h1><?= e($heroTitle) ?></h1>
          <p><?= e($heroSubtitle) ?></p>
          <div class="hero-actions">
            <a class="cta-golden" href="<?= e(route_url('index.php')) ?>"><i class="fa-solid fa-arrow-right-to-bracket ms-1"></i> الدخول إلى <?= e($systemSiteName) ?></a>
            <a class="cta-outline" href="#contact"><i class="fa-solid fa-headset ms-1"></i> <?= e((string)($systemFooter['help_label'] ?? 'المساعدة')) ?></a>
          </div>
        </div>
      </div>
    <?php else: ?>
      <div class="hero" style="background-image:url('<?= $heroSrc ?>')">
        <div class="inner">
          <div class="hero-brand-mark">
            <img src="<?= e($systemLogoUrl) ?>" alt="<?= e($systemSiteName) ?>">
            <span><?= e((string)($systemFooter['org_name'] ?? $systemSiteName)) ?></span>
          </div>
          <h1><?= e($heroTitle) ?></h1>
          <p><?= e($heroSubtitle) ?></p>
          <div class="hero-actions">
            <a class="cta-golden" href="<?= e(route_url('index.php')) ?>"><i class="fa-solid fa-arrow-right-to-bracket ms-1"></i> الدخول إلى <?= e($systemSiteName) ?></a>
            <a class="cta-outline" href="#contact"><i class="fa-solid fa-headset ms-1"></i> <?= e((string)($systemFooter['help_label'] ?? 'المساعدة')) ?></a>
          </div>
        </div>
      </div>
    <?php endif; ?>
  </section>

  <section id="services" class="container home-section home-section--services">
    <div class="tiles">
      <a class="tile" href="#about"><div class="ico">💡</div><b>من نحن</b><small>الرؤية والرسالة والقيم</small></a>

      <a class="tile" href="https://maps.app.goo.gl/YBUrjckHPDiqTNa98/" target="_blank" rel="noopener noreferrer">
        <div class="ico">🕌</div><b>جامع الملك سلطان</b><small>الموقع وبيانات التواصل</small>
      </a>

      <a class="tile tile-ramadan"
         href="<?= e($ramadanRegUrl) ?>" target="_blank" rel="noopener noreferrer"
         aria-label="التسجيل في الدورة الرمضانية">
        <span class="ramadan-badge"><i class="fa-solid fa-bell"></i> بدأ التسجيل</span>
        <div class="ico">🌙</div>
        <b>الدورة الرمضانية</b>
        <small>برامج قرآنية مكثفة • جوائز يومية • أجواء روحانية</small>
        <span class="ramadan-cta">سجّل الآن <i class="fa-solid fa-arrow-left-long"></i></span>
      </a>

      <a class="tile" href="<?= e(route_url('courses/index.php')) ?>"><div class="ico">🎓</div><b>الدورات التدريبية</b><small>دورات للمعلمين والطلاب</small></a>
      <a class="tile" href="<?= e(route_url('register_student.php')) ?>"><div class="ico">📝</div><b>التسجيل في الحلقات</b><small>تلقين، ابتدائي، متوسط، ثانوي</small></a>
    </div>
  </section>

  <section id="gallery" class="container home-section gallery-section">
    <div class="card section-panel section-panel--gallery">
      <h3 class="section-title">معرض الحلقات</h3>
      <div class="swiper" dir="rtl">
        <div class="swiper-wrapper">
          <?php foreach ($gallery as $g): $src=e((string)($g['src'] ?? '')); if(!$src) continue; ?>
            <a class="swiper-slide glightbox" href="<?= $src ?>" data-gallery="halaqat" data-title="صورة من الحلقات">
              <img loading="lazy" src="<?= $src ?>" alt="صورة من الحلقات">
            </a>
          <?php endforeach; ?>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </section>

  <section class="container home-section certs-section" id="certs">
    <div class="card section-panel section-panel--certs">
      <h3 class="section-title">شهادات المجتازين</h3>
      <?php if ($gradCerts4): ?>
        <div class="certs-grid">
          <?php foreach ($gradCerts4 as $c):
            $src = e((string)($c['src'] ?? '')); if(!$src) continue;
            $title = e((string)($c['title'] ?? ''));
          ?>
            <div class="cert-card">
              <a class="cert-media glightbox" href="<?= $src ?>" data-gallery="certs" data-title="<?= $title ?: 'شهادة اجتياز' ?>">
                <img loading="lazy" src="<?= $src ?>" alt="<?= $title ?: 'شهادة اجتياز' ?>">
              </a>
              <div class="cert-footer">
                <div class="cert-name" title="<?= $title ?>"><?= $title ?: '—' ?></div>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      <?php else: ?>
        <div class="cert-empty">لا توجد شهادات مجتازين متاحة حاليًا.</div>
      <?php endif; ?>
      <div class="certs-more">
        <a href="<?= e(public_site_root_url('achievers.php')) ?>" aria-label="عرض جميع شهادات المجتازين">المزيد</a>
      </div>
    </div>
  </section>

  <section class="container home-section split" id="about">
    <div class="card section-panel">
      <h3>الطالب المثالي</h3>
      <div class="exemplary">
        <div class="img" style="background-image:url('<?= e($gallery[0]['src'] ?? '/assets/slide2.jpg') ?>')"></div>
        <div>
          <p class="lead">تكريم الطلاب المثاليين شهريًا وفق معايير الانضباط والإنجاز وحسن الخلق.</p>
          <ul>
            <li>شهادة تقدير + هدية</li>
            <li>نشر الأسماء في لوحة الشرف</li>
            <li>نقاط إضافية في نظام التحفيز</li>
          </ul>
          <a class="badge-mini" href="<?= e(public_site_root_url('achievers.php')) ?>">عرض لوحة الشرف ↗</a>
        </div>
      </div>
    </div>
    <div class="card section-panel about">
      <h3>قالوا عنّا</h3>
      <p class="lead">نسهم في تعزيز مكانة كتاب الله في نفوس الأبناء، ببيئة جاذبة وبرامج تحفيزية ممتدة على مدار العام.</p>
      <div class="inline-badges inline-badges--sm">
        <span class="badge-mini">📌 التلاوة المتقنة</span>
        <span class="badge-mini">📌 مراجعة راسخة</span>
        <span class="badge-mini">📌 انضباط ومسؤولية</span>
      </div>
    </div>
  </section>

  <section class="container home-section stats" id="stats">
    <h3 class="section-title">إحصائيات منتصف الفصل 1447هـ (تُحدَّث آليًا)</h3>

    <div class="grid">
      <div class="col-md-3"><div class="kpi"><div class="ic"><i class="fa-solid fa-chalkboard-teacher text-primary"></i></div><div><div class="v num-en"><?= nfi($TOTAL_TEACHERS) ?></div><div class="l">إجمالي المعلمين</div></div></div></div>
      <div class="col-md-3"><div class="kpi"><div class="ic"><i class="fa-solid fa-user-graduate text-success"></i></div><div><div class="v num-en"><?= nfi($TOTAL_STUDENTS) ?></div><div class="l">إجمالي الطلاب</div></div></div></div>
      <div class="col-md-3"><div class="kpi"><div class="ic"><i class="fa-solid fa-clipboard-check text-warning"></i></div><div><div class="v num-en"><?= nfi($TOTAL_EVALS) ?></div><div class="l">إجمالي التقييمات</div></div></div></div>
      <div class="col-md-3"><div class="kpi"><div class="ic"><i class="fa-solid fa-book-open text-danger"></i></div><div><div class="v num-en"><?= nf($TOTAL_FACES,2) ?></div><div class="l">مجموع الأوجه (كلي)</div></div></div></div>
    </div>

    <div class="grid">
      <div class="col-md-3"><div class="kpi"><div class="ic"><i class="fa-solid fa-layer-group text-info"></i></div><div><div class="v num-en"><?= nfi($TOTAL_CIRCLES) ?></div><div class="l">إجمالي الحلقات</div></div></div></div>
      <div class="col-md-3"><div class="kpi"><div class="ic"><i class="fa-solid fa-bolt text-success"></i></div><div><div class="v num-en"><?= nfi($TOTAL_ACTIVE_CIRCLES) ?></div><div class="l">الحلقات النشطة</div></div></div></div>
      <div class="col-md-3"><div class="kpi"><div class="ic"><i class="fa-solid fa-gauge text-primary"></i></div><div><div class="v num-en"><?= nfi($HP_PERCENT) ?>%</div><div class="l">نسبة الحلقات النشطة</div></div></div></div>
      <div class="col-md-3"><div class="kpi"><div class="ic"><i class="fa-solid fa-people-line text-secondary"></i></div><div><div class="v num-en"><?= nf($STUDENTS_PER_TEACHER,1) ?></div><div class="l">طالب/معلم (متوسط)</div></div></div></div>
    </div>

    <div class="grid stats-grid--progress">
      <div class="kpi">
        <b>نسبة الإنجاز</b>
        <div class="bar">
          <div class="meter"><i style="width:<?= (int)$completionPercent ?>%"></i></div>
          <div><b><?= (int)$completionPercent ?>%</b></div>
        </div>
      </div>
      <div class="kpi">
        <b>نسبة الحضور</b>
        <div class="bar">
          <div class="meter"><i style="width:<?= (int)$attendancePercent ?>%"></i></div>
          <div><b><?= (int)$attendancePercent ?>%</b></div>
        </div>
      </div>
      <div class="kpi">
        <b>الحلقات النشطة</b>
        <div class="bar">
          <div class="meter"><i style="width:<?= (int)$HP_PERCENT ?>%"></i></div>
          <div><b><?= (int)$HP_PERCENT ?>%</b></div>
        </div>
      </div>
      <div class="kpi">
        <b>المعلمون/الطلاب</b>
        <div class="bar">
          <?php $meter = ($TOTAL_STUDENTS>0 && $TOTAL_TEACHERS>0)? (int)min(100, round(($TOTAL_TEACHERS/$TOTAL_STUDENTS)*100*6)) : 0; ?>
          <div class="meter"><i style="width:<?= $meter ?>%"></i></div>
          <div><b><?= ($TOTAL_TEACHERS>0)? nf($STUDENTS_PER_TEACHER,1) : '—' ?> طالب/معلم</b></div>
        </div>
      </div>
    </div>
  </section>

  <section class="container home-section" id="contact">
    <div class="card section-panel newsletter">
      <div>
        <h3 class="section-title section-title--sm">تابع جديدنا</h3>
        <p class="section-copy">اشترك في القائمة البريدية ليصلك أخبار الحلقات والفعاليات.</p>
        <?php if ($subscribeResult === true): ?>
          <div class="badge-mini badge-mini--success">تم الاشتراك بنجاح</div>
        <?php elseif ($subscribeResult === false): ?>
          <div class="badge-mini badge-mini--error">فشل الاشتراك – تحقق من البريد أو أعد المحاولة</div>
        <?php endif; ?>
        <form method="post">
          <input type="email" name="newsletter_email" placeholder="بريدك الإلكتروني" required>
          <input type="hidden" name="csrf" value="<?= e(csrf_token()) ?>">
          <button type="submit">اشتراك</button>
        </form>
      </div>
      <div>
        <h4 class="section-title section-title--xs">قنواتنا</h4>
        <div class="inline-badges">
          <a class="badge-mini" href="<?= e($footerHelpHref) ?>" <?= $footerHelpHref !== '#' ? 'target="_blank" rel="noopener"' : '' ?>><?= e((string)($systemFooter['help_label'] ?? 'المساعدة')) ?></a>
          <?php if ($supportWhatsAppUrl !== ''): ?>
            <a class="badge-mini" href="<?= e($supportWhatsAppUrl) ?>" target="_blank" rel="noopener">WhatsApp</a>
          <?php endif; ?>
        </div>
        <div class="top-cta"><a class="cta-golden" href="<?= e(route_url('index.php')) ?>">الدخول إلى <?= e($systemSiteName) ?></a></div>
      </div>
    </div>
  </section>

  <footer>
    <div class="container cols">
      <div>
        <div class="brand footer-brand">
          <img class="footer-brand-logo" src="<?= e($systemLogoUrl) ?>" alt="<?= e($systemSiteName) ?>">
          <div>
            <b><?= e($siteBrand) ?></b>
            <div class="footer-org"><?= e((string)($systemFooter['org_name'] ?? $systemSiteName)) ?></div>
          </div>
        </div>
        <p class="footer-copy"><?= e((string)($systemFooter['motto'] ?? $systemSiteTagline)) ?></p>
      </div>
      <div>
        <h4>روابط سريعة</h4>
        <ul class="footer-list">
          <li><a href="#services">الخدمات</a></li>
          <li><a href="#gallery">معرض الحلقات</a></li>
          <li><a href="#certs">شهادات المجتازين</a></li>
          <li><a href="#stats">الإحصائيات</a></li>
          <li><a href="<?= e(route_url('index.php')) ?>"><?= e($systemSiteName) ?></a></li>
        </ul>
      </div>
      <div>
        <h4>تواصل</h4>
        <ul class="footer-list">
          <?php if ($supportPhoneLabel !== ''): ?><li>الهاتف: <a href="<?= e($supportWhatsAppUrl ?: '#') ?>" <?= $supportWhatsAppUrl !== '' ? 'target="_blank" rel="noopener"' : '' ?>><?= e($supportPhoneLabel) ?></a></li><?php endif; ?>
          <li><a href="<?= e($footerHelpHref) ?>" <?= $footerHelpHref !== '#' ? 'target="_blank" rel="noopener"' : '' ?>><?= e((string)($systemFooter['help_label'] ?? 'المساعدة')) ?></a></li>
          <?php if (!empty($systemFooter['programmer_text'])): ?><li><?= e((string)$systemFooter['programmer_text']) ?></li><?php endif; ?>
        </ul>
      </div>
    </div>
    <div class="footbar">© <?= date('Y') ?> <?= e($footerRights) ?></div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
  <script>
  document.addEventListener('DOMContentLoaded', function(){
    const swiper = new Swiper('.swiper', {
      rtl: true, loop: true, speed: 700,
      autoplay: { delay: 3500, disableOnInteraction: false },
      slidesPerView: 1.15, spaceBetween: 16,
      breakpoints: { 640:{slidesPerView:2,spaceBetween:16}, 1024:{slidesPerView:3,spaceBetween:18} },
      pagination: { el: '.swiper-pagination', clickable: true },
      navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
    });
    GLightbox({ selector: '.glightbox', touchNavigation: true, loop: true });

    // إخفاء الهيدر عند النزول
    let last=window.scrollY; const header=document.querySelector('.header');
    function onScroll(){
      if(window.scrollY>last && window.scrollY>100){ header.style.transform='translateY(-100%)'; }
      else { header.style.transform='translateY(0)'; }
      last=window.scrollY;
    }
    window.addEventListener('scroll', onScroll, {passive:true});
  });
  </script>
</body>
</html>
