<!--
                                                                                                                                    
 ▓██▓   ▓█░  ▒██████    ▒██████   ░███████              ▓██░  ███   ▒██████   ▓█▒    ██     ███▓    ▓██░  ███   ███████▓  ████████  
 ▓███▒  ▓█░ ▓█▓    ██░ ▓█▓    ██░ ░██   ▓█▓             ▓█▓█ ▒█▒█  ▓█▓    ██░ ▓█▒    ██    ▓█ ██    ▓█▓█ ▒█▒█   ██▒       ██░   ▒██ 
 ▓█░██  ▓█░ ██     ▓█▓ ██     ▓█▓ ░██   ██▒             ██ █░█▒▒█░ ██     ▓█▓ ▓█▒    ██    █▓ ▒█▓   ██ █░█▒▒█░  ██▒       ██░    ██▒
 ▓█░░██ ▓█░ ██     ▓█▓ ██     ▓█▓ ░██████░              ██ ███ ░█░ █▓     ▓█▓ ▓███▓████   ▓█░  ██   ██ ███ ░█░  ███████░  ██░    ▓█▓
 ▓█░ ▒█▓▓█░ ██     ▓█▓ ██     ▓█▓ ░██  ██▒              ██  █▒ ░█▒ ██     ▓█▓ ▓█▒    ██   ██   ▓█▓  ██  █▒ ░█▒  ██▒       ██░    ██▒
 ▓█░  ████░ ██▓    ██  ██▓    ██  ░██  ░██              █▓     ░█▓ ██▓    ██  ▓█▒    ██  ▓████████  █▓     ░█▓  ██▒       ██░   ▒██ 
 ▓█░   ███░  ███████░   ███████░  ░██   ▓██             █▓      █▓  ███████░  ▓█▒    ██  ██     ██▓ █▓      █▓  ███████▓  ████████  
 ▓█░   ▒██░    ▓█▓░       ▓█▓░    ░██    ██▒            █▓      █▓    ▓█▓░    ▓█▒    ██ ▓█▓     ▒██ █▓      █▓  ██████▓▓  ████▓▒    
                                                                                                                                    
                                                                                                                                    
   ▓████▒      ▓██░     ███████    ███████      ▓████░    █████▓    ██████░    ░█████        ▓███      ▓████░    █████▓             
  ██▓  ██▓  ▒██▓██░     ██         ██         ▒██▓       ██░  ▓██   ▒   ▒██░   ▓▓  ▓██░     ▓████    ▒██▓       ██░  ▓██            
 ██░   ░██▒     ██░     ██         ██        ░██         ██   ▓█▓        ██         ██▓    ▓█░░██   ░██         ██   ▓█▓            
 ██  ▓████▓     █▓░     ██████░    ██████░   ▓███████     █████░     ▓███▓         ░██    ▓█▒ ░██   ▓███████     █████░             
 █████░ ▓█▓     ██░         ▒██▓       ▒██▓  ▓██░  ▓██   ▒██▓███░       ▒██▓      ▒██    ▒█▓  ░██   ▓██░  ▓██   ▒██▓███░            
 ██▒    ██░     ██░          ░██        ░██  ▒█▓    ██░ ▓█▓    ██         ██    ░▓█░    ░█████████▓ ▒█▓    ██░ ▓█▓    ██            
  ██▓  ██▓      ██░     ▒   ▓██░   ▒   ▓██░   ██▓  ▓██  ▒██░  ▓██  ░░   ▒██▓   ▓█▓            ░██    ██▓  ▓██  ▒██░  ▓██            
   ▓████░    ████████   █████▓     █████▓      ▓████▒    ░█████▓   ░██████    ░████████       ░██     ▓████▒    ░█████▓             
                                                                                                                                    
-->

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
      <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TXND73W4HB"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-TXND73W4HB');
</script>
    <!-- ================= BASIC META ================= -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>مجلس الشباب المصري | البرامج</title>

    <meta
      name="description"
      content="منظومة برامج مجلس الشباب المصري: برامج وطنية ومبادرات ومنتديات وأكاديميات لدعم الشباب وتعزيز حقوق الإنسان والتنمية."
    />
    <meta
      name="keywords"
      content="مجلس الشباب المصري, البرامج, برامج وطنية, مبادرات, منتديات, أكاديميات"
    />
    <meta name="author" content="Egyptian Youth Council" />

    <!-- ================= FAVICON ================= -->
    <link rel="icon" type="image/png" href="/images/logo.png" />

    <!-- ================= GOOGLE FONT ================= -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />

    <!-- ================= ICONS ================= -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    />

    <!-- ================= YOUR HEADER SCRIPT ================= -->
    <script src="/assets/js/header.js" defer></script>
<link rel="stylesheet"href="scrollbar.css"/>
    <style>
      /* ================= RESET ================= */
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { height: 100%; }

      /* ================= BASE ================= */
      body{
        font-family:"Cairo", sans-serif;
        background:#f3f6fb;
        color:#111;
        direction:rtl;
        line-height:1.9;
      }

      .layout-root{
        min-height:100vh;
        display:flex;
        flex-direction:column;
      }

      main{ flex:1; width:100%; }

      /* ✅ Full width wrapper */
      .full{ width:100%; margin:0; padding:0; }

      /* ================= PAGE HERO ================= */
      .page-hero{
        width:100%;
        margin:0;
        padding: 110px 0 26px;
      }

      .hero-inner{ width:100%; padding: 0 18px; }
      .hero-title{ max-width: 1200px; margin: 0 auto; }

      .hero-title h1{
        font-size: 34px;
        color:#083b8a;
        margin-bottom: 8px;
        letter-spacing:.2px;
      }

      .hero-title p{
        color:#334155;
        font-size: 16.8px;
        max-width: 980px;
      }

      .crumb{
        margin-top: 10px;
        font-size: 14px;
        color:#64748b;
        display:flex;
        gap:10px;
        flex-wrap:wrap;
      }
      .crumb a{
        color:#0b5ed7;
        text-decoration:none;
        border-bottom: 1px solid rgba(11,94,215,0.25);
      }

      /* ================= SECTION (Full width + خط فاصل) ================= */
      .program-section{
        width:100%;
        margin:0;
        padding: 24px 0;
        border-top: 1px solid rgba(8,59,138,0.12);
      }
      .program-section:first-of-type{ border-top: 0; }

      .program-inner{ width:100%; margin:0; padding: 0 18px; }

      .program-head{
        width:100%;
        max-width: 1300px;
        margin: 0 auto;
        display:grid;
        grid-template-columns: 520px 1fr;
        gap: 26px;
        align-items:start;
      }

      /* ================= TITLE ================= */
      .p-title{
        display:flex;
        align-items:center;
        gap: 10px;
        margin-bottom: 10px;
      }
      .p-title i{ color:#0b5ed7; font-size: 16px; }
      .p-title h2{
        color:#083b8a;
        font-size: 26px;
        line-height:1.35;
      }

      /* ================= Main image ================= */
      .p-media{
        width:100%;
        margin:0;
        padding:0;
        border-radius: 14px;
        overflow:hidden;
        border: 1px solid rgba(8,59,138,0.16);
      }
      .p-media img{
        width:100%;
        height: 340px;
        object-fit: contain;
        display:block;
        background: transparent;
        transform: scale(1);
        transition: transform .25s ease;
      }
      .p-media:hover img{ transform: scale(1.03); }

      .p-body p{
        color:#334155;
        font-size: 16.6px;
        text-align: right;
      }

      .p-details{
        margin-top: 12px;
        display:flex;
        flex-direction:column;
        gap: 10px;
      }
      .d-row{
        display:flex;
        gap:10px;
        align-items:flex-start;
        color:#334155;
        font-size: 15.8px;
      }
      .d-row i{
        color:#0b5ed7;
        font-size: 14px;
        margin-top: 7px;
        flex: 0 0 auto;
      }

      /* ================= Gallery ================= */
      .gallery-wrap{
        width:100%;
        max-width: 1300px;
        margin: 16px auto 0;
        padding: 0;
      }
      .gallery-title{
        display:flex;
        align-items:center;
        gap:10px;
        margin: 8px 0 10px;
        color:#083b8a;
        font-weight:800;
      }
      .gallery-title i{ color:#0b5ed7; font-size: 14px; }

      .gallery{
        display:flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 2px 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .gallery::-webkit-scrollbar{ height: 10px; }
      .gallery::-webkit-scrollbar-track{ background: transparent; }
      .gallery::-webkit-scrollbar-thumb{
        background: rgba(8,59,138,0.18);
        border-radius: 999px;
      }

      .g-item{
        flex: 0 0 auto;
        width: 220px;
        height: 150px;
        border-radius: 14px;
        overflow:hidden;
        border: 1px solid rgba(8,59,138,0.16);
        background: transparent;
        cursor: pointer;
        scroll-snap-align: start;
        position: relative;
      }
      .g-item img,
      .g-item video{
        width:100%;
        height:100%;
        object-fit: contain;
        display:block;
        background: transparent;
        transform: scale(1);
        transition: transform .2s ease;
      }
      .g-item:hover img,
      .g-item:hover video{ transform: scale(1.05); }

      .g-item[data-type="video"]::after{
        content:"\f144";
        font-family:"Font Awesome 6 Free";
        font-weight:900;
        position:absolute;
        inset:auto 12px 12px auto;
        color:#083b8a;
        background: rgba(255,255,255,0.78);
        border: 1px solid rgba(8,59,138,0.18);
        width: 34px;
        height: 34px;
        border-radius: 12px;
        display:flex;
        align-items:center;
        justify-content:center;
      }

      /* ================= Lightbox ================= */
      .lb{
        position: fixed;
        inset: 0;
        background: rgba(10, 18, 35, 0.74);
        display: none;
        z-index: 9999;
        padding: 14px;
      }
      .lb.open{ display:flex; }

      .lb-inner{
        width: min(1100px, 100%);
        height: min(720px, 100%);
        margin: auto;
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
      }

      .lb-stage{
        position:absolute;
        inset: 0;
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 54px 54px;
      }

      .lb-stage img,
      .lb-stage video{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display:block;
        background: transparent;
      }

      .lb-close,
      .lb-prev,
      .lb-next{
        position:absolute;
        top: 14px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.10);
        color: #fff;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        user-select:none;
        transition: transform .15s ease, background .15s ease;
      }
      .lb-close:hover,
      .lb-prev:hover,
      .lb-next:hover{
        transform: translateY(-1px);
        background: rgba(255,255,255,0.16);
      }
      .lb-close{ right: 14px; }

      .lb-prev,
      .lb-next{
        top: 50%;
        transform: translateY(-50%);
      }
      .lb-prev{ right: 14px; }
      .lb-next{ left: 14px; }

      .lb-prev i,
      .lb-next i,
      .lb-close i{ font-size: 16px; }

      .lb-cap{
        position:absolute;
        bottom: 10px;
        left: 12px;
        right: 12px;
        text-align:center;
        color: rgba(255,255,255,0.92);
        font-size: 14px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(0,0,0,0.18);
        border: 1px solid rgba(255,255,255,0.12);
      }

      /* ================= LOADER (Skeleton) ================= */
      .loader-wrap{
        width:100%;
        margin:0;
        padding: 24px 0 40px;
        border-top: 1px solid rgba(8,59,138,0.12);
      }
      .loader-inner{ width:100%; padding: 0 18px; }
      .skeleton{
        max-width: 1300px;
        margin: 0 auto;
        display:grid;
        grid-template-columns: 520px 1fr;
        gap: 26px;
        align-items:start;
        padding: 10px 0;
      }
      .sk-box{
        border-radius: 14px;
        border: 1px solid rgba(8,59,138,0.10);
        background: rgba(148,163,184,0.12);
        overflow: hidden;
        position: relative;
      }
      .sk-media{ height: 340px; }
      .sk-lines{ padding: 14px; }
      .sk-line{
        height: 14px;
        border-radius: 999px;
        background: rgba(148,163,184,0.22);
        margin-bottom: 12px;
      }
      .sk-line.w80{ width: 80%; }
      .sk-line.w90{ width: 90%; }
      .sk-line.w70{ width: 70%; }
      .sk-line.w60{ width: 60%; }

      .shimmer::after{
        content:"";
        position:absolute;
        inset:0;
        background: linear-gradient(90deg,
          rgba(255,255,255,0) 0%,
          rgba(255,255,255,0.35) 50%,
          rgba(255,255,255,0) 100%);
        transform: translateX(-100%);
        animation: shimmer 1.1s infinite;
      }
      @keyframes shimmer{
        100%{ transform: translateX(100%); }
      }

      /* ================= ERROR CARD (Official) ================= */
      .error-wrap{
        display:none;
        width:100%;
        padding: 26px 0 60px;
        border-top: 1px solid rgba(8,59,138,0.12);
      }
      .error-inner{ padding: 0 18px; }
      .error-card{
        max-width: 1100px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid rgba(8,59,138,0.18);
        border-radius: 18px;
        padding: 22px 22px;
        display:flex;
        gap: 18px;
        align-items:flex-start;
      }
      .error-icon{
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: rgba(11,94,215,0.10);
        border: 1px solid rgba(11,94,215,0.22);
        display:flex;
        align-items:center;
        justify-content:center;
        color:#0b5ed7;
        flex: 0 0 auto;
      }
      .error-icon i{ font-size: 16px; }

      .error-text h2{
        color:#083b8a;
        font-size: 22px;
        margin-bottom: 6px;
      }
      .error-text p{
        color:#334155;
        font-size: 16px;
      }

      .error-actions{
        margin-top: 14px;
        display:flex;
        gap: 10px;
        flex-wrap:wrap;
      }

      .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        padding: 10px 16px;
        border-radius: 12px;
        border: 1px solid rgba(8,59,138,0.22);
        background: #fff; /* ✅ زر رسمي مش نيون */
        color:#083b8a;
        text-decoration:none;
        font-weight:800;
        cursor:pointer;
        transition: transform .15s ease, background .15s ease, border-color .15s ease;
      }
      .btn:hover{
        transform: translateY(-1px);
        background: rgba(11,94,215,0.06);
        border-color: rgba(11,94,215,0.30);
      }
      .btn.primary{
        background: #0b5ed7;
        border-color: #0b5ed7;
        color:#fff;
      }
      .btn.primary:hover{
        background: #094fb6;
        border-color: #094fb6;
      }

      /* ================= DEV DEBUG (hidden) ================= */
      .dev-debug{
        display:none; /* خليها none في الموقع الرسمي */
        max-width: 1100px;
        margin: 12px auto 0;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(15,23,42,0.92);
        color: #e2e8f0;
        border: 1px solid rgba(255,255,255,0.12);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        direction: ltr;
        white-space: pre-wrap;
        word-break: break-word;
      }

      /* ================= RESPONSIVE ================= */
      @media (max-width: 992px){
        .page-hero{ padding: 90px 0 18px; }
        .hero-title h1{ font-size: 28px; }

        .program-head,
        .skeleton{
          grid-template-columns: 1fr;
          gap: 14px;
        }
        .p-media img{ height: 260px; }
        .sk-media{ height: 260px; }

        .g-item{ width: 200px; height: 140px; }

        .lb-stage{ padding: 60px 14px 54px; }

        .error-card{ flex-direction: column; }
      }

      @media (max-width: 576px){
        .hero-inner,
        .program-inner,
        .loader-inner,
        .error-inner{
          padding: 0 10px;
        }
        .hero-title p{ font-size: 15.6px; }
        .p-title h2{ font-size: 22px; }

        .g-item{ width: 170px; height: 128px; }
      }
      /* ================= CTA CARD (Under Gallery) ================= */
.cta-card-wrap{
  width:100%;
  max-width:1300px;
  margin: 14px auto 0;
}

.cta-card{
  display: inline-flex;
  flex-direction: column;
  gap: 10px;

  text-decoration: none;
  color: inherit;

  width: 220px;
  aspect-ratio: 1 / 1;

  border: 1px solid rgba(8,59,138,0.16);
  border-radius: 16px;
  background: transparent;
  overflow: hidden;

  padding: 12px;

  transition: transform .15s ease, border-color .15s ease;
  cursor: pointer;
}

.cta-card:hover{
  transform: translateY(-1px);
  border-color: rgba(11,94,215,0.40);
}

.cta-card:active{
  transform: translateY(0);
}

.cta-card-media{
  flex: 1;
  border-radius: 14px;
  border: 1px solid rgba(8,59,138,0.12);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

.cta-card-media img{
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  display: block;
  background: transparent;
  transform: scale(1);
  transition: transform .2s ease;
}

.cta-card:hover .cta-card-media img{
  transform: scale(1.06);
}

.cta-card-title{
  text-align: center;
  font-weight: 900;
  color: #083b8a;
  font-size: 15.5px;
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 576px){
  .cta-card{ width: 100%; max-width: 360px; }
}

    </style>
  </head>

  <body class="layout-root">
    <div id="site-header"></div>

    <main class="full">
      <!-- ================= HERO ================= -->
      <section class="page-hero full">
        <div class="hero-inner">
          <div class="hero-title">
            <h1>البرامج</h1>
            <p>
              منظومة برامج ومبادرات وطنية تستهدف تمكين الشباب وتعزيز المشاركة العامة وترسيخ مفاهيم حقوق الإنسان
              والتنمية المستدامة والحوكمة والابتكار.
            </p>
            <div class="crumb">
              <a href="/index.html">الرئيسية</a>
              <span>›</span>
              <span>البرامج</span>
            </div>
          </div>
        </div>
      </section>

      <!-- ================= LOADER ================= -->
      <section class="loader-wrap" id="loader">
        <div class="loader-inner">
          <div class="skeleton">
            <div class="sk-box sk-media shimmer"></div>
            <div class="sk-box sk-lines shimmer">
              <div class="sk-line w80"></div>
              <div class="sk-line w90"></div>
              <div class="sk-line w70"></div>
              <div class="sk-line w60"></div>
            </div>
          </div>

          <div class="skeleton" style="margin-top:18px;">
            <div class="sk-box sk-media shimmer"></div>
            <div class="sk-box sk-lines shimmer">
              <div class="sk-line w80"></div>
              <div class="sk-line w90"></div>
              <div class="sk-line w70"></div>
              <div class="sk-line w60"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- ================= ERROR ================= -->
      <section class="error-wrap" id="errorWrap">
        <div class="error-inner">
          <div class="error-card">
            <div class="error-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
            <div class="error-text">
              <h2>تعذّر تحميل البرامج</h2>
              <p>حدثت مشكلة أثناء تحميل المحتوى. يُرجى المحاولة مرة أخرى بعد قليل.</p>

              <div class="error-actions">
                <button class="btn primary" id="retryBtn">إعادة المحاولة</button>
                <a class="btn" href="/index.html">العودة للرئيسية</a>
              </div>
            </div>
          </div>

          <!-- ✅ مخفي: تفاصيل للمطور فقط -->
          <div class="dev-debug" id="devDebug"></div>
        </div>
      </section>

      <!-- ================= DATA ROOT ================= -->
      <div id="programsRoot"></div>
    </main>

    <div id="site-footer"></div>

    <!-- ================= LIGHTBOX ================= -->
    <div class="lb" id="lightbox" aria-hidden="true">
      <div class="lb-inner" role="dialog" aria-modal="true" aria-label="عارض الوسائط">
        <div class="lb-stage" id="lbStage"></div>

        <button class="lb-close" id="lbClose" aria-label="إغلاق">
          <i class="fa-solid fa-xmark"></i>
        </button>

        <button class="lb-prev" id="lbPrev" aria-label="السابق">
          <i class="fa-solid fa-chevron-right"></i>
        </button>

        <button class="lb-next" id="lbNext" aria-label="التالي">
          <i class="fa-solid fa-chevron-left"></i>
        </button>

        <div class="lb-cap" id="lbCap"></div>
      </div>
    </div>

    <!-- ================= HEADER/FOOTER + NAV + DRAWER SCRIPTS ================= -->
    <script>
      function markActiveNavLink() {
        let currentPage = window.location.pathname.split("/").pop();
        if (!currentPage || currentPage === "") currentPage = "index.html";

        document
          .querySelectorAll(".desktop-nav a, .eyc-drawer-nav a")
          .forEach((link) => {
            const href = link.getAttribute("href");
            if (!href) return;

            const linkPage = href.split("/").pop();
            if (linkPage === currentPage) link.classList.add("active");
          });
      }

      function initDrawerMenuFallback() {
        const drawer = document.querySelector(".eyc-drawer, #eycDrawer, .mobile-drawer");
        const overlay =
          document.querySelector(".eyc-drawer-overlay, #eycDrawerOverlay, .drawer-overlay") || null;
        const openBtn =
          document.querySelector(".eyc-burger, #eycBurger, .menu-toggle, .hamburger") || null;
        const closeBtn =
          document.querySelector(".eyc-drawer-close, #eycDrawerClose, .drawer-close") || null;

        if (!drawer) return;

        const open = () => {
          drawer.classList.add("open");
          if (overlay) overlay.classList.add("open");
          document.body.style.overflow = "hidden";
        };

        const close = () => {
          drawer.classList.remove("open");
          if (overlay) overlay.classList.remove("open");
          document.body.style.overflow = "";
        };

        if (openBtn) openBtn.addEventListener("click", open);
        if (closeBtn) closeBtn.addEventListener("click", close);
        if (overlay) overlay.addEventListener("click", close);

        document.addEventListener("keydown", (e) => {
          if (e.key === "Escape") close();
        });

        drawer.querySelectorAll("a").forEach((a) => a.addEventListener("click", close));
      }

      fetch("/header.html")
        .then((r) => r.text())
        .then((h) => {
          document.getElementById("site-header").innerHTML = h;
          if (window.initHeaderMenu) window.initHeaderMenu();
          markActiveNavLink();
          initDrawerMenuFallback();
        });

      fetch("/footer.html")
        .then((r) => r.text())
        .then((f) => (document.getElementById("site-footer").innerHTML = f));
    </script>

    <!-- ================= DATA LOADING + RENDER ================= -->
    <script>
      // ✅ غيّر ده لرابط الـ Web App بتاعك (exec)
      const API_URL =
        "https://script.google.com/macros/s/AKfycbwn8jesy0MYX8Yju29xqVxTLw8b-cs7ggE63Gs0mQ7vOQckcdgsYWXOVwoQ77xqVgPYag/exec";

      const loaderEl = document.getElementById("loader");
      const errorWrap = document.getElementById("errorWrap");
      const retryBtn = document.getElementById("retryBtn");
      const root = document.getElementById("programsRoot");
      const devDebug = document.getElementById("devDebug");

      function showLoader() {
        loaderEl.style.display = "";
        errorWrap.style.display = "none";
        root.innerHTML = "";
      }
      function showError(publicMessage, debugText) {
        loaderEl.style.display = "none";
        errorWrap.style.display = "";
        root.innerHTML = "";

        // ✅ رسمي للمستخدم (من غير تفاصيل تقنية)
        // النص ثابت بالفعل — لو عايز تغيّره استخدم publicMessage
        // بس نخليه نفس الرسالة الرسمية
        if (debugText) {
          devDebug.textContent = debugText;
          // devDebug.style.display = "block"; // لو عايز تشوفه افتحها
        }
      }
      function hideLoader() {
        loaderEl.style.display = "none";
      }

      function safeText(s) {
        return String(s || "").replace(/\s+/g, " ").trim();
      }

      // يحول أيقونة ثابتة بناءً على الاسم (اختياري)
      function pickIcon(name) {
        const n = safeText(name);
        if (n.includes("المناخ")) return "fa-leaf";
        if (n.includes("حقوق")) return "fa-scale-balanced";
        if (n.includes("الشمول") || n.includes("مالي")) return "fa-coins";
        if (n.includes("الرصد") || n.includes("متابعة")) return "fa-chart-line";
        if (n.includes("انتخاب")) return "fa-check-to-slot";
        if (n.includes("التطوع")) return "fa-hand-holding-heart";
        if (n.includes("الصحة")) return "fa-heart-pulse";
        if (n.includes("التعليم")) return "fa-graduation-cap";
        return "fa-star";
      }

      function buildGallery(item) {
        const images = Array.isArray(item.images) ? item.images : [];
        const videos = Array.isArray(item.videos) ? item.videos : [];

        if (!images.length && !videos.length) return "";

        const galleryId = item.slug || "";
        let html = `
          <div class="gallery-wrap">
            <div class="gallery-title"><i class="fa-solid fa-images"></i><span>معرض البرنامج</span></div>
            <div class="gallery" data-gallery="${galleryId}">
        `;

        // صور
        images.forEach((src, i) => {
          const s = safeText(src);
          if (!s) return;
          const cap = safeText(item.name) || "صورة";
          html += `
            <button class="g-item" data-type="image" data-src="${s}" data-caption="${cap}">
              <img src="${s}" alt="${cap}" loading="lazy" />
            </button>
          `;
        });

        // فيديو
        videos.forEach((src) => {
          const s = safeText(src);
          if (!s) return;
          const cap = safeText(item.name) || "فيديو";
          html += `
            <button class="g-item" data-type="video" data-src="${s}" data-caption="${cap}">
              <video src="${s}" muted preload="metadata"></video>
            </button>
          `;
        });

        html += `</div></div>`;
        return html;
      }
      function buildCTA(item) {
  const cta = item && item.cta ? item.cta : null;
  if (!cta) return "";

  const label = safeText(cta.label);
  const logo = safeText(cta.logo);
  const url = safeText(cta.url);

  // لو أي عنصر ناقص مش هنعرض الكارت
  if (!label || !url) return "";

  // لو مفيش لوجو للزر: نخلي المكان فاضي بس الكارت يظهر
  const mediaHtml = logo
    ? `<div class="cta-card-media">
         <img src="${logo}" alt="${label}" loading="lazy" />
       </div>`
    : `<div class="cta-card-media"></div>`;

  // فتح في تبويب جديد + أمان
  return `
    <div class="cta-card-wrap">
      <a class="cta-card" href="${url}" target="_blank" rel="noopener noreferrer">
        ${mediaHtml}
        <div class="cta-card-title">${label}</div>
      </a>
    </div>
  `;
}

      function buildProgramSection(item) {
  const name = safeText(item.name);
  const desc = safeText(item.description);
  const features = Array.isArray(item.features) ? item.features : [];
  const logo = safeText(item.logo);
  const slug = safeText(item.slug) || "";

  const icon = pickIcon(name);

  // تفاصيل
  const detailsHtml = features.length
    ? `<div class="p-details">
        ${features
          .map((f) => `<div class="d-row"><i class="fa-solid fa-check"></i><span>${safeText(f)}</span></div>`)
          .join("")}
      </div>`
    : "";

  // صورة رئيسية
  const imgSrc = logo || "/images/placeholder.png";

  // ✅ CTA Card تحت الجاليري
  const ctaHtml = buildCTA(item);

  return `
    <section class="program-section" id="${slug ? "program-" + slug : ""}">
      <div class="program-inner">
        <div class="program-head">
          <div class="p-media">
            <img src="${imgSrc}" alt="${name}" loading="lazy" />
          </div>

          <div class="p-body">
            <div class="p-title">
              <i class="fa-solid ${icon}"></i>
              <h2>${name}</h2>
            </div>

            ${desc ? `<p>${desc}</p>` : ""}

            ${detailsHtml}
          </div>
        </div>

        ${buildGallery(item)}

        ${ctaHtml}
      </div>
    </section>
  `;
}


      async function fetchPrograms() {
        // مهم: no-store عشان مايمسكش كاش
        const res = await fetch(API_URL, { cache: "no-store" });

        // لو الرد مش 200
        if (!res.ok) {
          const text = await res.text().catch(() => "");
          throw new Error(`HTTP ${res.status} ${res.statusText}\n\n${text}`);
        }

        // نجرب JSON
        let data;
        try {
          data = await res.json();
        } catch (e) {
          const text = await res.text().catch(() => "");
          throw new Error(`Invalid JSON response\n\n${text}`);
        }

        if (!data || data.ok !== true) {
          throw new Error(`API returned ok=false\n\n${JSON.stringify(data)}`);
        }
        if (!Array.isArray(data.items)) {
          throw new Error(`API missing items[]\n\n${JSON.stringify(data)}`);
        }
        return data.items;
      }

      async function loadAndRender() {
        showLoader();

        try {
          const items = await fetchPrograms();

          hideLoader();

          if (!items.length) {
            // صفحة رسمية: نعرض رسالة هادية لو مفيش بيانات
            root.innerHTML = `
              <section class="program-section">
                <div class="program-inner">
                  <div style="max-width:1100px;margin:0 auto;color:#334155;font-size:16.6px;">
                    لا توجد بيانات متاحة حاليًا.
                  </div>
                </div>
              </section>
            `;
            return;
          }

          root.innerHTML = items.map(buildProgramSection).join("");

          // ✅ بعد ما نرسم: نفعل الجاليري واللايت بوكس
          initGalleryLightbox();

          // ✅ لو جايلك ?slug=... نعمل scroll للسكشن
          const url = new URL(window.location.href);
          const qSlug = (url.searchParams.get("slug") || "").trim();
          if (qSlug) {
            const el = document.getElementById("program-" + qSlug);
            if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
          }
        } catch (err) {
          const debug = [
            "PROGRAMS LOAD ERROR",
            "Time: " + new Date().toISOString(),
            "Message: " + (err && err.message ? err.message : String(err)),
            "Stack: " + (err && err.stack ? err.stack : "(no stack)")
          ].join("\n");

          showError("تعذّر تحميل البرامج", debug);
          console.error(err);
        }
      }

      retryBtn.addEventListener("click", () => loadAndRender());

      // ابدأ
      loadAndRender();
    </script>

    <!-- ================= Gallery + Lightbox Logic ================= -->
    <script>
      function initGalleryLightbox() {
        const lb = document.getElementById("lightbox");
        const lbStage = document.getElementById("lbStage");
        const lbCap = document.getElementById("lbCap");
        const btnClose = document.getElementById("lbClose");
        const btnPrev = document.getElementById("lbPrev");
        const btnNext = document.getElementById("lbNext");

        let items = [];
        let idx = 0;

        function stopVideoIfAny() {
          const v = lbStage.querySelector("video");
          if (v) {
            try { v.pause(); } catch (e) {}
            v.removeAttribute("src");
            v.load?.();
          }
        }

        function render() {
          const it = items[idx];
          if (!it) return;

          stopVideoIfAny();
          lbStage.innerHTML = "";

          const type = it.dataset.type || "image";
          const src = it.dataset.src || "";
          const caption = it.dataset.caption || "";

          lbCap.textContent = caption;

          if (type === "video") {
            const v = document.createElement("video");
            v.src = src;
            v.controls = true;
            v.playsInline = true;
            v.preload = "metadata";
            lbStage.appendChild(v);
          } else {
            const img = document.createElement("img");
            img.src = src;
            img.alt = caption || "صورة";
            lbStage.appendChild(img);
          }
        }

        function openLightbox(startItems, startIndex) {
          items = startItems;
          idx = startIndex;

          lb.classList.add("open");
          lb.setAttribute("aria-hidden", "false");
          document.body.style.overflow = "hidden";
          render();
        }

        function closeLightbox() {
          stopVideoIfAny();
          lb.classList.remove("open");
          lb.setAttribute("aria-hidden", "true");
          document.body.style.overflow = "";
        }

        function prev() {
          idx = (idx - 1 + items.length) % items.length;
          render();
        }

        function next() {
          idx = (idx + 1) % items.length;
          render();
        }

        // click on gallery item
        document.querySelectorAll(".gallery").forEach((gallery) => {
          const galleryItems = Array.from(gallery.querySelectorAll(".g-item"));
          galleryItems.forEach((item, i) => {
            item.addEventListener("click", () => openLightbox(galleryItems, i));
          });
        });

        btnClose.onclick = closeLightbox;
        btnPrev.onclick = prev;
        btnNext.onclick = next;

        lb.onclick = (e) => { if (e.target === lb) closeLightbox(); };

        document.onkeydown = (e) => {
          if (!lb.classList.contains("open")) return;
          if (e.key === "Escape") closeLightbox();
          if (e.key === "ArrowLeft") next();
          if (e.key === "ArrowRight") prev();
        };
      }
    </script>
  </body>
</html>