/* ============================================================
   DGA Motion Standards — Scroll Reveal & Header Behaviour
   Saudi Digital Government Authority — design.dga.gov.sa v1.0
   Higher Commission for Industrial Security (HCIS) website
   ============================================================ */

(function () {
  'use strict';

  /* Bail out entirely when the OS/browser has reduced-motion on.
     CSS already guards its own rules; this guards the JS side.   */
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  /* ── 1. Sticky Header: shrink + shadow on scroll ──────────────────── */
  var header = document.querySelector('.hcis-main-header-wrapper');
  if (header) {
    function onHeaderScroll() {
      if (window.scrollY > 60) {
        header.classList.add('dga-header-scrolled');
      } else {
        header.classList.remove('dga-header-scrolled');
      }
    }
    window.addEventListener('scroll', onHeaderScroll, { passive: true });
    onHeaderScroll();
  }

  /* ── 2. Scroll Reveal via IntersectionObserver ────────────────────── */
  document.addEventListener('DOMContentLoaded', function () {

    /* Map of CSS selector → {revealClass, stagger}
       'stagger: true' means sibling elements in the same parent get
       an incremental transitionDelay (0.1s per item, DGA standard). */
    var revealGroups = [
      /* Section headings: fade-up 0.4s ease-in-out */
      {
        sel: [
          '.section-paddings > h2',
          '.section-paddings > .row > * > h2',
          '.header-with-title h2',
          '.header-with-title-row h2',
          '.about-sector-section h2',
          '.policy-section h2',
          '.hcis-governor-section h2',
          'main > section h2',
          '.section-paddings > h3',
          '.header-with-title h3',
          '.about-sector-section h3',
          'main > section h3',
          '.section-title',
          '.subsection-title',
          '.sitemap-cat-title',
          '.decision-title',
          '.banner-title',
          '.sector-box-over-section'
        ].join(', '),
        cls: 'dga-reveal-heading',
        stagger: false
      },

      /* Hero / banner content: fade-up 0.5s ease-in-out */
      {
        sel: '.home-main-banner-div, .home-banners-main-wrapper .banner-item',
        cls: 'dga-reveal-hero',
        stagger: false
      },

      /* Cards and grid items: staggered fade-up 0.3s ease-in-out */
      {
        sel: [
          '.card:not(.digital-stamp-card)',
          '.hcis-service-box',
          '.related-services-item',
          '.news-card__item',
          '.home-statistics__item',
          '.activities-card-item',
          '.learned-lesson-card',
          '.regulation-card',
          '.green-card',
          '.hcis-media-card',
          '.logos-card'
        ].join(', '),
        cls: 'dga-reveal-card',
        stagger: true
      },

      /* Images and icons: scale-in 0.3s ease-in-out */
      {
        sel: [
          '.news-inner-image img',
          '.header-title-with-icon img',
          '.hcis-governor-section img'
        ].join(', '),
        cls: 'dga-reveal-img',
        stagger: false
      }
    ];

    /* Shared observer — fires once per element, then unobserves */
    var observer = new IntersectionObserver(function (entries, obs) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('dga-is-visible');
          obs.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.12,
      rootMargin: '0px 0px -40px 0px'
    });

    revealGroups.forEach(function (group) {
      var elements = Array.from(document.querySelectorAll(group.sel));

      if (group.stagger) {
        /* Group by immediate parent so each row/grid gets its own stagger. */
        var parentMap = new Map();
        elements.forEach(function (el) {
          /* Skip elements inside owl-carousel — they're managed by the slider */
          if (el.closest('.owl-carousel')) return;
          var parent = el.parentElement;
          if (!parentMap.has(parent)) parentMap.set(parent, []);
          parentMap.get(parent).push(el);
        });

        parentMap.forEach(function (siblings) {
          siblings.forEach(function (el, i) {
            el.classList.add(group.cls);
            /* DGA stagger increment: 0.1s per item */
            el.style.transitionDelay = (i * 0.1) + 's';
            observer.observe(el);
          });
        });
      } else {
        elements.forEach(function (el) {
          if (el.closest('.owl-carousel')) return;
          el.classList.add(group.cls);
          observer.observe(el);
        });
      }
    });

  }); /* end DOMContentLoaded */

})();
