/* ═══════════════════════════════════════════════════════════════════
   OPALIA — سلوك مخصّص لقالب «رائد» في سلة
   الصق هذا الملف كاملًا في لوحة سلة:
   المتجر وقنوات البيع ← تصميم المتجر ← تخصيص النسخة ← تخصيص متقدم ←
   تخصيص باستخدام JavaScript   (الكود فقط، بدون وسم <script>)

   ما يفعله:
   • يضيف في الصفحة الرئيسية واجهة للعلامة OPALIA وشريطًا متحركًا
   • ظهور ناعم للأقسام وبطاقات المنتجات عند التمرير
   • خط تقدّم ذهبي أعلى الشاشة، وحلقة تتبع المؤشر على الكمبيوتر

   لا يحتوي على صور ولا منتجات — كلها تُضاف من لوحة سلة نفسها.
   ولا يلمس السلة ولا الدفع ولا المخزون ولا الطلبات.
   ═══════════════════════════════════════════════════════════════════ */
(function () {
  'use strict';

  /* لو لُصق الكود مرتين، أو أعادت سلة تنفيذه، لا نكرّر شيئًا */
  if (window.__opaliaLoaded) return;
  window.__opaliaLoaded = true;

  /* ┌───────────────────────────────────────────────────────────────┐
     │  الإعدادات — عدّل النصوص بين علامتي التنصيص فقط                 │
     └───────────────────────────────────────────────────────────────┘ */
  var CONFIG = {

    /* واجهة العلامة أعلى الصفحة الرئيسية */
    hero: {
      enabled: true,
      eyebrow: 'Maison de Parfum',
      titleAr: 'أوباليا',
      titleEn: 'OPALIA',
      lede: 'Every detail, a touch of light. Every scent, a part of you.',
      ctaText: 'تسوّق الآن',
      /* رابط الزر. اتركه فارغًا لينزل الزر إلى أول قسم منتجات في الصفحة */
      ctaUrl: ''
    },

    /* الشريط الداكن المتحرك تحت الواجهة */
    ribbon: {
      enabled: true,
      items: ['OPALIA', 'أوباليا', 'Every detail, a touch of light', 'Timeless elegance']
    },

    revealOnScroll: true,   /* ظهور الأقسام عند التمرير */
    progressBar: true,      /* الخط الذهبي أعلى الشاشة */
    cursorRing: true        /* حلقة تتبع المؤشر (كمبيوتر فقط) */
  };
  /* ─────────────────── نهاية الإعدادات ─────────────────── */


  var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var finePointer = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;

  function $(s, c) { return (c || document).querySelector(s); }
  function $$(s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); }
  function esc(v) {
    return String(v == null ? '' : v).replace(/[&<>"']/g, function (ch) {
      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch];
    });
  }
  function safeUrl(v) {
    var s = String(v || '').trim();
    return /^(https?:\/\/|\/|#)/i.test(s) ? s : '';
  }
  /* نص لاتيني داخل صفحة عربية: <bdi> يعزل اتجاهه فلا تقفز النقطة
     إلى أول السطر («you.» لا «.you») ويبقى محاذيًا للعمود */
  function txt(v) { return '<bdi>' + esc(v) + '</bdi>'; }
  function isHome() { return document.body.classList.contains('index'); }

  /* أول قسم في الصفحة يحتوي منتجات سلة */
  function productBlock() {
    return $$('#main-content > .s-block').filter(function (b) {
      return b.querySelector('salla-products-slider, salla-products-list, custom-salla-product-card');
    })[0] || null;
  }

  /* ═════════ الخطوط — احتياط لـ @import ═════════
     ملف CSS يحمّل الخطوط بـ @import، والمتصفح يتجاهله إن لم يكن أول قاعدة في
     ملفه. سلة لا توثّق أين تضع الـ CSS المخصص في الصفحة، لذلك نضيف رابط
     الخطوط من هنا أيضًا. إن كان محمّلًا مسبقًا يأخذه المتصفح من الذاكرة. */

  var FONTS = 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@300;400;500&display=swap';

  function ensureFonts() {
    var head = document.head || document.getElementsByTagName('head')[0];
    if (!head || document.querySelector('link[data-opalia-fonts]')) return;
    ['https://fonts.googleapis.com', 'https://fonts.gstatic.com'].forEach(function (origin, i) {
      var pre = document.createElement('link');
      pre.rel = 'preconnect'; pre.href = origin;
      if (i) pre.crossOrigin = 'anonymous';
      head.appendChild(pre);
    });
    var link = document.createElement('link');
    link.rel = 'stylesheet'; link.href = FONTS;
    link.setAttribute('data-opalia-fonts', '');
    head.appendChild(link);
  }

  /* ═════════ واجهة العلامة ═════════ */

  function buildHero() {
    var h = CONFIG.hero;
    var cta = safeUrl(h.ctaUrl) || '#op-shop';

    var sec = document.createElement('section');
    sec.className = 'op-hero';
    sec.setAttribute('aria-label', h.titleEn || h.titleAr || 'OPALIA');
    sec.innerHTML =
      '<div class="op-hero__glow" aria-hidden="true"></div>' +
      '<div class="op-hero__sweep" aria-hidden="true"></div>' +
      '<div class="container op-hero__inner">' +
        (h.eyebrow ? '<p class="op-hero__eyebrow op-reveal">' + txt(h.eyebrow) + '</p>' : '') +
        (h.titleAr ? '<p class="op-hero__ar op-reveal" style="--op-delay:80ms">' + txt(h.titleAr) + '</p>' : '') +
        (h.titleEn ? '<h2 class="op-hero__name op-reveal" style="--op-delay:160ms">' + txt(h.titleEn) + '</h2>' : '') +
        (h.lede ? '<p class="op-hero__lede op-reveal" style="--op-delay:240ms">' + txt(h.lede) + '</p>' : '') +
        (h.ctaText ? '<a class="op-hero__cta op-reveal" style="--op-delay:320ms" href="' + esc(cta) + '">' + txt(h.ctaText) + '</a>' : '') +
      '</div>';
    return sec;
  }

  function buildRibbon() {
    var group = CONFIG.ribbon.items.map(function (t) { return '<span>' + txt(t) + '</span><i>✦</i>'; }).join('');
    var sec = document.createElement('div');
    sec.className = 'op-ribbon';
    sec.setAttribute('aria-hidden', 'true');
    /* مجموعتان متطابقتان: الحركة تنزاح نصف العرض فتبدو بلا نهاية */
    sec.innerHTML = '<div class="op-ribbon__track"><div class="op-ribbon__group">' + group +
                    '</div><div class="op-ribbon__group">' + group + '</div></div>';
    return sec;
  }

  function injectHome() {
    var main = $('#main-content');
    if (!main || !isHome() || $('.op-hero')) return;
    if (!CONFIG.hero.enabled) return;

    var hero = buildHero();
    main.insertBefore(hero, main.firstElementChild);
    if (CONFIG.ribbon.enabled && CONFIG.ribbon.items.length) {
      main.insertBefore(buildRibbon(), hero.nextSibling);
    }

    /* «تسوّق الآن» بلا رابط: ينزل إلى أول قسم منتجات. المنتجات قد تُحمَّل
       بعد فتح الصفحة، لذلك يُبحث عن القسم لحظة الضغط لا لحظة التحميل. */
    var cta = $('.op-hero__cta[href="#op-shop"]');
    if (cta) {
      cta.addEventListener('click', function (e) {
        var target = productBlock();
        if (!target) return;
        e.preventDefault();
        target.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'start' });
      });
    }
  }

  /* ═════════ الظهور عند التمرير ═════════ */

  var io = null;
  /* لا نحرّك قسم المنتجات كاملًا ثم بطاقاته مرة ثانية — يتراكم التأخير.
     العناوين والبطاقات والأقسام المصوّرة تظهر، كلٌّ وحده. */
  var REVEAL = '.s-block__title, custom-salla-product-card, .s-block--features__item, ' +
               '.s-block--photos-slider, .s-block--banners, .s-block--fixed-banner, .s-block--hero-slider, ' +
               '.s-block--testimonials, .s-block--categories, .store-footer__inner, ' +
               '.product-single .main-content, .product-single .sidebar';

  function markReveal() {
    if (!io) return;
    $$(REVEAL).forEach(function (el, i) {
      if (el.classList.contains('op-reveal')) return;
      el.classList.add('op-reveal');
      /* البطاقات المتجاورة تظهر متتابعة */
      if (el.tagName === 'CUSTOM-SALLA-PRODUCT-CARD') el.style.setProperty('--op-delay', (i % 4) * 80 + 'ms');
      io.observe(el);
    });
    $$('.op-reveal:not(.op-in)').forEach(function (el) { io.observe(el); });
  }

  function initReveal() {
    if (!CONFIG.revealOnScroll || reduced || !('IntersectionObserver' in window)) return;
    document.documentElement.classList.add('op-js');

    io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        en.target.classList.add('op-in');
        io.unobserve(en.target);
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });

    markReveal();

    /* سلة تحمّل بطاقات المنتجات بعد فتح الصفحة — نراقب ما يُضاف لاحقًا */
    if ('MutationObserver' in window) {
      var queued = false;
      new MutationObserver(function () {
        if (queued) return;
        queued = true;
        setTimeout(function () { queued = false; markReveal(); }, 60);
      }).observe($('#main-content') || document.body, { childList: true, subtree: true });
    }

    /* شبكة أمان: لا يبقى عنصر في الشاشة مخفيًا إن تأخر المراقب */
    setTimeout(function () {
      $$('.op-reveal:not(.op-in)').forEach(function (el) {
        if (el.getBoundingClientRect().top < window.innerHeight) el.classList.add('op-in');
      });
    }, 2500);
  }

  /* ═════════ خط التقدّم ═════════ */

  function initProgress() {
    if (!CONFIG.progressBar) return;
    var bar = document.createElement('div');
    bar.className = 'op-progress';
    bar.setAttribute('aria-hidden', 'true');
    document.body.appendChild(bar);

    var queued = false;
    function paint() {
      queued = false;
      var max = document.documentElement.scrollHeight - window.innerHeight;
      var p = max > 0 ? Math.min(1, Math.max(0, window.pageYOffset / max)) : 0;
      bar.style.transform = 'scaleX(' + p.toFixed(4) + ')';
    }
    window.addEventListener('scroll', function () {
      if (!queued) { queued = true; requestAnimationFrame(paint); }
    }, { passive: true });
    paint();
  }

  /* ═════════ حلقة المؤشر ═════════ */

  function initCursor() {
    if (!CONFIG.cursorRing || reduced || !finePointer) return;

    var ring = document.createElement('div');
    ring.className = 'op-cursor';
    ring.setAttribute('aria-hidden', 'true');
    document.body.appendChild(ring);

    var mx = 0, my = 0, rx = 0, ry = 0, running = false;

    function loop() {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      ring.style.transform = 'translate3d(' + rx.toFixed(1) + 'px,' + ry.toFixed(1) + 'px,0)';
      if (Math.abs(mx - rx) > 0.3 || Math.abs(my - ry) > 0.3) requestAnimationFrame(loop);
      else running = false;
    }

    window.addEventListener('mousemove', function (e) {
      mx = e.clientX; my = e.clientY;
      ring.classList.add('is-on');
      if (!running) { running = true; requestAnimationFrame(loop); }
    }, { passive: true });

    document.addEventListener('mouseleave', function () { ring.classList.remove('is-on'); });
    document.addEventListener('mouseover', function (e) {
      var t = e.target;
      ring.classList.toggle('is-hover', !!(t && t.closest && t.closest('a,button,[role="button"],custom-salla-product-card,label,input,select')));
    });
  }

  /* ═════════ التشغيل ═════════ */

  function boot() {
    try { injectHome(); }   catch (e) { console.error('[opalia] home', e); }
    try { initReveal(); }   catch (e) { console.error('[opalia] reveal', e); }
    try { initProgress(); } catch (e) { console.error('[opalia] progress', e); }
    try { initCursor(); }   catch (e) { console.error('[opalia] cursor', e); }
  }

  /* الخطوط فورًا (لا تحتاج اكتمال الصفحة)، وبقية العمل بعد اكتمالها —
     فيعمل الكود سواء وضعته سلة في <head> أو في آخر الصفحة */
  try { ensureFonts(); } catch (e) { console.error('[opalia] fonts', e); }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
  else boot();
})();