/** Shopify CDN: Minification failed

Line 22:0 Unexpected "("
Line 25:28 Comments in CSS use "/* ... */" instead of "//"
Line 41:30 Unterminated string token
Line 42:31 Unterminated string token
Line 156:4 Comments in CSS use "/* ... */" instead of "//"
Line 156:59 Unterminated string token
Line 205:41 Comments in CSS use "/* ... */" instead of "//"
Line 267:5 Expected ")" to go with "("

**/
/* ============================================================
   JDL Blog Module — Hydratation des blocs collection
   ------------------------------------------------------------
   - Détecte chaque <div class="jdl-module" data-collection="...">
   - Fetch les produits via API AJAX Shopify (gratuit, cached CDN)
   - Render le carousel avec scroll-snap natif
   - Aucune dépendance, vanilla JS, RGPD compliant (0 tracking)
   ============================================================ */

(function () {
  'use strict';

  const SHOPIFY_LIMIT = 12; // Nb max de produits chargés par collection

  /* ----------------------------------------------------------
   * Helpers
   * ---------------------------------------------------------- */

  /**
   * Échappe une chaîne pour insertion sûre dans le HTML.
   * Protection XSS basique sur les titres produit et data-attributes.
   */
  function escapeHtml(str) {
    if (typeof str !== 'string') return '';
    return str
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }

  /**
   * Normalise une URL Shopify.
   * L'API renvoie souvent des URLs protocol-relative ("//cdn.shopify.com/...").
   * On préfixe avec https: pour éviter les warnings mixed-content.
   */
  function normalizeUrl(url) {
    if (!url || typeof url !== 'string') return '';
    if (url.startsWith('//')) return 'https:' + url;
    return url;
  }

  /**
   * Extrait l'URL de l'image produit en gérant les 3 formats possibles
   * retournés par /collections/{handle}/products.json selon les versions
   * et thèmes Shopify :
   *   1. product.featured_image (string)
   *   2. product.images[0] sous forme de string
   *   3. product.images[0] sous forme d'objet { src }
   *   4. product.image.src (objet)
   * Retourne une chaîne vide si aucune image dispo (déclenche le fallback).
   */
  function getProductImage(product) {
    if (typeof product.featured_image === 'string') {
      const u = normalizeUrl(product.featured_image);
      if (u) return u;
    }
    const first = product.images && product.images[0];
    if (typeof first === 'string') {
      const u = normalizeUrl(first);
      if (u) return u;
    }
    if (first && typeof first === 'object' && first.src) {
      return normalizeUrl(first.src);
    }
    if (product.image && product.image.src) {
      return normalizeUrl(product.image.src);
    }
    return '';
  }

  /**
   * Formatte un prix Shopify ("69.00" → "69,00 €").
   * Important : l'API AJAX renvoie le prix en string format décimal
   * (PAS en cents comme certains autres endpoints Shopify).
   */
  function formatPrice(priceStr) {
    const value = parseFloat(priceStr || 0);
    return `${value.toFixed(2).replace('.', ',')} €`;
  }

  /* ----------------------------------------------------------
   * Data layer — Fetch collection
   * ---------------------------------------------------------- */

  /**
   * Récupère les produits d'une collection via l'API AJAX native Shopify.
   * Endpoint public, cached par le CDN, 0 auth requise.
   * @param {string} handle - Handle de la collection (ex: "la-mano-de-dios")
   * @returns {Promise<Array>} Liste de produits
   */
  async function fetchCollection(handle) {
    const url = `/collections/${encodeURIComponent(handle)}/products.json?limit=${SHOPIFY_LIMIT}`;
    const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
    if (!res.ok) throw new Error(`Collection ${handle} : HTTP ${res.status}`);
    const data = await res.json();
    return data.products || [];
  }

  /* ----------------------------------------------------------
   * Rendu HTML
   * ---------------------------------------------------------- */

  /**
   * Génère le HTML d'une carte produit.
   * - Si image absente : placeholder gris (jamais d'icône cassée affichée)
   * - onerror sur <img> pour masquer en cas d'URL invalide
   */
  function renderProduct(product) {
    const img = getProductImage(product);
    const title = escapeHtml(product.title);
    const handle = encodeURIComponent(product.handle);
    const price = formatPrice(product.variants && product.variants[0] && product.variants[0].price);

    const imgTag = img
      ? `<img class="jdl-module__product-img" src="${img}" alt="${title}" loading="lazy" onerror="this.style.visibility='hidden'" />`
      : `<div class="jdl-module__product-img" style="background:#1C1C1E;"></div>`;

    return `
      <a class="jdl-module__product" href="/products/${handle}">
        ${imgTag}
        <div class="jdl-module__product-info">
          <span class="jdl-module__product-title">${title}</span>
          <span class="jdl-module__product-price">${price}</span>
        </div>
      </a>
    `;
  }

  /**
   * Render complet du module : zone texte (gauche) + carousel (droite).
   * Lit tous les data-attributes du conteneur pour personnaliser le bloc.
   */
  function renderModule(moduleEl, products) {
    const handle = moduleEl.dataset.collection;
    const date = moduleEl.dataset.date || '';
    const title = moduleEl.dataset.title || 'Portez une émotion légendaire';
    const subtitle = moduleEl.dataset.subtitle
      || 'Découvrez la collection inspirée par ce moment de légende.';
    const cta = moduleEl.dataset.cta || 'Voir la collection';
    const accent = moduleEl.dataset.accent || '#C8A84B';

    // Applique l'accent moment (liseré gauche, hover CTA)
    moduleEl.style.setProperty('--jdl-accent', accent);

    const dateBlock = date
      ? `<div class="jdl-module__date">${escapeHtml(date)}</div>`
      : '';

    const productsHtml = products.length
      ? products.map(renderProduct).join('')
      : '<div style="padding:40px; color:#8A8578;">Collection bientôt disponible.</div>';

    moduleEl.innerHTML = `
      <div class="jdl-module__content">
        <div>
          ${dateBlock}
          <h3 class="jdl-module__title">${escapeHtml(title)}</h3>
          <p class="jdl-module__subtitle">${escapeHtml(subtitle)}</p>
        </div>
        <a class="jdl-module__cta" href="/collections/${encodeURIComponent(handle)}">
          ${escapeHtml(cta)}
        </a>
      </div>
      <div class="jdl-module__carousel">
        <button class="jdl-module__nav" data-dir="prev" aria-label="Précédent">‹</button>
        <div class="jdl-module__track">${productsHtml}</div>
        <button class="jdl-module__nav" data-dir="next" aria-label="Suivant">›</button>
      </div>
    `;

    setupNavigation(moduleEl);
  }

  /* ----------------------------------------------------------
   * Interactions
   * ---------------------------------------------------------- */

  /**
   * Branche les flèches sur le scroll du carousel.
   * Désactive les flèches en bout de course pour signaler la limite.
   */
  function setupNavigation(moduleEl) {
    const track = moduleEl.querySelector('.jdl-module__track');
    const prev = moduleEl.querySelector('[data-dir="prev"]');
    const next = moduleEl.querySelector('[data-dir="next"]');
    if (!track || !prev || !next) return;

    const scrollByCard = (dir) => {
      const card = track.querySelector('.jdl-module__product');
      if (!card) return;
      const step = card.offsetWidth + 1; // +1 = gap entre cartes
      track.scrollBy({ left: dir * step, behavior: 'smooth' });
    };

    prev.addEventListener('click', () => scrollByCard(-1));
    next.addEventListener('click', () => scrollByCard(1));

    const updateNavState = () => {
      const max = track.scrollWidth - track.clientWidth;
      prev.disabled = track.scrollLeft <= 2;
      next.disabled = track.scrollLeft >= max - 2;
    };
    track.addEventListener('scroll', updateNavState, { passive: true });
    updateNavState();
  }

  /* ----------------------------------------------------------
   * Orchestration
   * ---------------------------------------------------------- */

  /**
   * Hydrate un module unique : affiche un loader, fetch, puis render.
   * Gère proprement le cas d'erreur (collection inexistante, offline).
   */
  async function hydrateModule(moduleEl) {
    const handle = moduleEl.dataset.collection;
    if (!handle) {
      console.warn('[JDL] Module sans data-collection ignoré', moduleEl);
      return;
    }

    moduleEl.classList.add('jdl-module--loading');
    moduleEl.innerHTML = '<div class="jdl-module__carousel">Chargement…</div>';

    try {
      const products = await fetchCollection(handle);
      moduleEl.classList.remove('jdl-module--loading');
      renderModule(moduleEl, products);
    } catch (err) {
      console.error('[JDL] Erreur chargement collection', handle, err);
      moduleEl.classList.remove('jdl-module--loading');
      moduleEl.classList.add('jdl-module--error');
      moduleEl.innerHTML = `
        <div class="jdl-module__carousel">Collection indisponible.</div>
      `;
    }
  }

  /**
   * Init : hydrate tous les modules trouvés sur la page.
   * Sécurisé contre les doubles inits (idempotent par DOMContentLoaded).
   */
  function init() {
    const modules = document.querySelectorAll('.jdl-module[data-collection]');
    modules.forEach(hydrateModule);
  }

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