/*
 * WAQIT storefront layer for the Salla "Click" theme  ·  waqit-custom.js
 *
 * Paste this whole file into: Theme editor → تخصيص متقدم → JavaScript.
 *
 * What it does
 *  - Adds the class "waqit-on" to <html>, which switches on every rule in waqit-custom.css.
 *  - Puts the WAQIT wordmark in the centre of Click's header.
 *  - On the home page only, inserts the four approved sections (hero, collection with the
 *    ingredients panel, Tamara strip, purple mountain) and hides Click's own home blocks.
 *  - The collection is Salla's native <salla-products-list>, so names, photos, prices, stock,
 *    links and add-to-cart all come from Salla. Nothing about products is hard-coded here
 *    except which products to show (their Salla IDs).
 *
 * It never touches cart, checkout, account or payment code, and makes no network requests
 * other than the two Google Fonts and the image URLs you put in CONFIG.images.
 *
 * SAFE TESTING: with mode 'preview' (the default) customers see the store exactly as before.
 * To see WAQIT, open the store with ?waqit=preview at the end of the address (for example
 * https://waqit.store/ar?waqit=preview). That browser tab keeps WAQIT on while you browse;
 * ?waqit=off turns it off again. Change mode to 'live' only when you approve going live.
 */
(function () {
  'use strict';

  var CONFIG = {
    // 'preview' = only for a tab opened with ?waqit=preview · 'live' = every visitor · 'off' = disabled
    mode: 'preview',

    // Salla product IDs, in display order: ضيغم، برزان، أعيرف.
    // Leave empty [] to show the store's three newest products instead.
    products: [1789937841, 1673329995, 26504698],

    // Approved images on jsDelivr, pinned to commit 0db358a of github.com/tomf16/waqit-assets so they never change.
    // Empty = that section shows without its image.
    images: {
      heroDesktop: 'https://cdn.jsdelivr.net/gh/tomf16/waqit-assets@0db358abf89d5cbbbb2d38811c4eae6c4954107f/hero-desktop.jpg',
      heroMobile: 'https://cdn.jsdelivr.net/gh/tomf16/waqit-assets@0db358abf89d5cbbbb2d38811c4eae6c4954107f/hero-mobile.jpg',
      oud: 'https://cdn.jsdelivr.net/gh/tomf16/waqit-assets@0db358abf89d5cbbbb2d38811c4eae6c4954107f/oud.jpg',
      engraving: 'https://cdn.jsdelivr.net/gh/tomf16/waqit-assets@0db358abf89d5cbbbb2d38811c4eae6c4954107f/mountain-engraving.jpg',
      tamaraDesktop: 'https://cdn.jsdelivr.net/gh/tomf16/waqit-assets@0db358abf89d5cbbbb2d38811c4eae6c4954107f/tamara-desktop.jpg',
      tamaraMobile: 'https://cdn.jsdelivr.net/gh/tomf16/waqit-assets@0db358abf89d5cbbbb2d38811c4eae6c4954107f/tamara-mobile.jpg',
      mountainDesktop: 'https://cdn.jsdelivr.net/gh/tomf16/waqit-assets@0db358abf89d5cbbbb2d38811c4eae6c4954107f/mountain-desktop.jpg',
      mountainMobile: 'https://cdn.jsdelivr.net/gh/tomf16/waqit-assets@0db358abf89d5cbbbb2d38811c4eae6c4954107f/mountain-mobile.jpg'
    },

    // Link destinations. Empty = that link or button stays hidden (the hero button always scrolls to the collection).
    links: {
      allFragrances: '',
      ingredients: '',
      experience: ''
    },

    text: {
      heroEyebrow: 'WAQIT',
      heroEyebrowSub: 'FINE FRAGRANCES',
      heroTitle: 'أبعد من الحواس.',
      heroSubtitle: 'تجربة عطرية تتجاوز المألوف.',
      heroButton: 'اكتشف المجموعة',
      collectionEyebrow: 'THE COLLECTION',
      collectionTitle: 'المجموعة',
      collectionLink: 'عرض جميع العطور',
      panelEyebrow: 'THE INGREDIENTS',
      panelTitle: 'مكونات مختارة بعناية.',
      panelBody: 'تتداخل فيها النفحات النادرة لصناعة تركيبات فريدة.',
      panelLink: 'اكتشف المزيد',
      tamaraAlt: 'قسّطها على 4 دفعات بدون فوائد. اختر تمارا عند الدفع',
      featureEyebrow: 'A SIGNATURE BEYOND TIME',
      featureTitle: 'من أرض حائل، إلى كل لحظة استثنائية.',
      featureButton: 'اكتشف التجربة'
    },

    wordmark: 'WAQIT'
  };

  /* ---------- switch ---------- */
  function isActive() {
    var flag = null;
    try { flag = new URLSearchParams(window.location.search).get('waqit'); } catch (e) { /* old browser */ }
    try {
      if (flag === 'preview') window.sessionStorage.setItem('waqit', 'on');
      if (flag === 'off') window.sessionStorage.removeItem('waqit');
    } catch (e) { /* storage blocked */ }

    if (flag === 'off' || CONFIG.mode === 'off') return false;
    if (CONFIG.mode === 'live') return true;
    try { return window.sessionStorage.getItem('waqit') === 'on'; } catch (e) { return flag === 'preview'; }
  }

  /* ---------- helpers ---------- */
  function esc(value) {
    return String(value == null ? '' : value)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }

  function isHomePage() {
    var body = document.body;
    if (body && body.classList.contains('index')) return true;
    try { return window.salla && window.salla.config && window.salla.config.get('page.slug') === 'index'; } catch (e) { return false; }
  }

  function storeUrl() {
    try {
      var url = window.salla && window.salla.config && window.salla.config.get('store.url');
      if (url) return url;
    } catch (e) { /* fall through */ }
    return '/';
  }

  function picture(desktop, mobile, className, width, height, eager) {
    if (!desktop && !mobile) return '';
    var src = desktop || mobile;
    return '<picture class="' + className + '">' +
      (desktop && mobile ? '<source media="(max-width: 767px)" srcset="' + esc(mobile) + '">' : '') +
      '<img src="' + esc(src) + '" alt="" width="' + width + '" height="' + height + '"' +
      (eager ? ' loading="eager" fetchpriority="high"' : ' loading="lazy"') + ' decoding="async">' +
      '</picture>';
  }

  function linkIf(url, label, className) {
    if (!url) return '';
    return '<a class="' + className + '" href="' + esc(url) + '"><span>' + esc(label) + '</span>' +
      '<i class="sicon-arrow-left" aria-hidden="true"></i></a>';
  }

  /* ---------- pieces ---------- */
  function addFonts() {
    if (document.getElementById('waqit-fonts')) return;
    var link = document.createElement('link');
    link.id = 'waqit-fonts';
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&family=El+Messiri:wght@400..700&display=swap';
    document.head.appendChild(link);
  }

  function addWordmark() {
    if (document.getElementById('wq-wordmark')) return;
    var container = document.querySelector('.store-header .header-container');
    if (!container) return;
    var mark = document.createElement('a');
    mark.id = 'wq-wordmark';
    mark.className = 'wq-wordmark';
    mark.href = storeUrl();
    mark.textContent = CONFIG.wordmark;
    container.appendChild(mark);
  }

  function setImageVariables() {
    var img = CONFIG.images.engraving;
    if (img) document.documentElement.style.setProperty('--wq-engraving', 'url("' + img.replace(/"/g, '%22') + '")');
  }

  function homeMarkup() {
    var t = CONFIG.text, img = CONFIG.images, links = CONFIG.links;

    var hero =
      '<section class="wq-hero" data-testid="waqit-hero">' +
        picture(img.heroDesktop, img.heroMobile, 'wq-hero__media', 1078, 828, true) +
        '<div class="wq-container wq-hero__inner"><div class="wq-hero__text">' +
          '<span class="wq-eyebrow">' + esc(t.heroEyebrow) + '</span>' +
          '<span class="wq-eyebrow wq-eyebrow--sub">' + esc(t.heroEyebrowSub) + '</span>' +
          '<h2 class="wq-hero__title">' + esc(t.heroTitle) + '</h2>' +
          '<p class="wq-hero__subtitle">' + esc(t.heroSubtitle) + '</p>' +
          '<a class="wq-btn" href="#waqit-collection"><span>' + esc(t.heroButton) + '</span><i class="sicon-arrow-left" aria-hidden="true"></i></a>' +
        '</div></div>' +
      '</section>';

    var collection =
      '<section id="waqit-collection" class="wq-collection" data-testid="waqit-collection">' +
        '<div class="wq-collection__grid">' +
          '<div class="wq-collection__main">' +
            '<header class="wq-collection__head">' +
              '<div><span class="wq-eyebrow">' + esc(t.collectionEyebrow) + '</span>' +
              '<h2 class="wq-collection__title">' + esc(t.collectionTitle) + '</h2></div>' +
              linkIf(links.allFragrances, t.collectionLink, 'wq-link') +
            '</header>' +
            '<div class="wq-products"></div>' +
          '</div>' +
          '<aside class="wq-panel">' +
            (img.oud ? '<img class="wq-panel__media" src="' + esc(img.oud) + '" alt="" width="414" height="744" loading="lazy" decoding="async">' : '') +
            '<div class="wq-panel__text">' +
              '<span class="wq-eyebrow">' + esc(t.panelEyebrow) + '</span>' +
              '<h3 class="wq-panel__title">' + esc(t.panelTitle) + '</h3>' +
              '<p class="wq-panel__body">' + esc(t.panelBody) + '</p>' +
              linkIf(links.ingredients, t.panelLink, 'wq-link') +
            '</div>' +
          '</aside>' +
        '</div>' +
      '</section>';

    var tamaraImg = img.tamaraDesktop || img.tamaraMobile;
    var tamara = tamaraImg
      ? '<section class="wq-tamara" data-testid="waqit-tamara"><div class="wq-tamara__banner">' +
          '<picture>' +
            (img.tamaraDesktop && img.tamaraMobile ? '<source media="(max-width: 767px)" srcset="' + esc(img.tamaraMobile) + '">' : '') +
            '<img src="' + esc(tamaraImg) + '" alt="' + esc(t.tamaraAlt) + '" width="2172" height="724" loading="lazy" decoding="async">' +
          '</picture>' +
        '</div></section>'
      : '';

    var feature =
      '<section class="wq-feature" data-testid="waqit-feature">' +
        picture(img.mountainDesktop, img.mountainMobile, 'wq-feature__media', 1062, 941, false) +
        '<div class="wq-container wq-feature__inner"><div class="wq-feature__text">' +
          '<span class="wq-eyebrow">' + esc(t.featureEyebrow) + '</span>' +
          '<h2 class="wq-feature__title">' + esc(t.featureTitle) + '</h2>' +
          (links.experience
            ? '<a class="wq-btn" href="' + esc(links.experience) + '"><span>' + esc(t.featureButton) + '</span><i class="sicon-arrow-left" aria-hidden="true"></i></a>'
            : '') +
        '</div></div>' +
      '</section>';

    return hero + collection + tamara + feature;
  }

  function addProducts(home) {
    var holder = home.querySelector('.wq-products');
    if (!holder || holder.firstChild) return;
    var list = document.createElement('salla-products-list');
    var ids = (CONFIG.products || []).filter(function (id) { return /^\d+$/.test(String(id)); });
    if (ids.length) {
      list.setAttribute('source', 'selected');
      list.setAttribute('source-value', JSON.stringify(ids.map(Number)));
    } else {
      list.setAttribute('source', 'latest');
      list.setAttribute('limit', '3');
    }
    holder.appendChild(list);
  }

  function buildHome() {
    if (!isHomePage() || document.getElementById('waqit-home')) return;
    var main = document.getElementById('main-content');
    if (!main) return;

    var home = document.createElement('div');
    home.id = 'waqit-home';
    home.innerHTML = homeMarkup();

    // after Salla's "index:start" hook when present, otherwise at the top of <main>
    var hook = main.querySelector('salla-hook[name="index:start"]');
    if (hook && hook.parentNode === main) main.insertBefore(home, hook.nextSibling);
    else main.insertBefore(home, main.firstChild);

    addProducts(home);

    var cta = home.querySelector('.wq-hero .wq-btn');
    if (cta) {
      cta.addEventListener('click', function (event) {
        var target = document.getElementById('waqit-collection');
        if (!target) return;
        event.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      });
    }
  }

  function run() {
    if (!isActive()) return;
    document.documentElement.classList.add('waqit-on');
    addFonts();
    setImageVariables();
    addWordmark();
    buildHome();
  }

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