(function () {
  'use strict';

  if (document.getElementById('mira-bnav')) return;

  var BASE = 'https://mira-flowers.com/ar';

  /* ══ CSS ══ */
  var css = '<style id="mira-bnav-css">' +
    '#mira-bnav{' +
      'position:fixed;bottom:0;left:0;right:0;' +
      'z-index:999999;' +
      'display:flex;' +
      'justify-content:space-around;align-items:center;' +
      'background:rgba(var(--bottom-menu-bg-rgb,250,247,245),0.97);' +
      'background:var(--bottom-menu-bg,#FAF7F5);' +
      'border-top:1.5px solid var(--color-primary-light,#F5D8E0);' +
      'box-shadow:0 -4px 24px rgba(0,0,0,0.08);' +
      'padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));' +
      'font-family:Tajawal,"Noto Kufi Arabic",sans-serif;' +
      'direction:rtl;' +
      'transition:transform 0.3s ease;' +
    '}' +

    '#mira-bnav.mira-hide{transform:translateY(100%);}' +

    '.mira-btn{' +
      'display:flex;flex-direction:column;align-items:center;justify-content:center;' +
      'gap:2px;flex:1;' +
      'color:var(--bottom-menu-color,#8A7F7A);' +
      'background:none;border:none;outline:none;' +
      'cursor:pointer;text-decoration:none;' +
      'padding:4px 2px;' +
      'border-radius:10px;' +
      '-webkit-tap-highlight-color:transparent;' +
      'position:relative;overflow:visible;' +
      'transition:color 0.2s,transform 0.25s cubic-bezier(.34,1.56,.64,1);' +
      'min-width:48px;' +
    '}' +

    '.mira-btn i{' +
      'font-size:22px;line-height:1;display:block;' +
      'transition:transform 0.28s cubic-bezier(.34,1.56,.64,1);' +
      'pointer-events:none;' +
    '}' +

    '.mira-btn span{' +
      'font-size:10px;font-weight:500;line-height:1.2;' +
      'white-space:nowrap;pointer-events:none;' +
    '}' +

    '.mira-cart-badge{' +
      'position:absolute;' +
      'top:-8px;right:-8px;' +
      'background:linear-gradient(135deg,#ff6b6b,#ee5a6f);' +
      'color:white;' +
      'font-size:11px;font-weight:800;' +
      'width:24px;height:24px;' +
      'border-radius:50%;' +
      'display:flex;' +
      'align-items:center;' +
      'justify-content:center;' +
      'box-shadow:0 2px 8px rgba(255,107,107,0.4);' +
      'animation:mira-badge-pop .3s cubic-bezier(.34,1.56,.64,1);' +
    '}' +

    '.mira-btn:active{transform:scale(0.85);}' +

    '.mira-btn.on{color:var(--color-primary,#251d1d);}' +
    '.mira-btn.on i{transform:translateY(-3px) scale(1.12);}' +
    '.mira-btn.on span{font-weight:700;}' +

    '.mira-dot{' +
      'display:block;width:5px;height:5px;' +
      'background:var(--color-primary,#251d1d);' +
      'border-radius:50%;margin:2px auto 0;' +
      'animation:mDot .28s cubic-bezier(.34,1.56,.64,1) both;' +
    '}' +

    '.mira-rpl{' +
      'position:absolute;border-radius:50%;pointer-events:none;' +
      'background:rgba(0,0,0,0.08);transform:scale(0);' +
      'animation:mRpl .5s ease-out forwards;' +
    '}' +

    '@media(min-width:769px){#mira-bnav{display:none!important;}}' +

    '@media(max-width:768px){' +
      'body{padding-bottom:70px!important;}' +
      '.app-inner{padding-bottom:70px!important;}' +
    '}' +

    '@keyframes mDot{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}' +
    '@keyframes mRpl{to{transform:scale(5);opacity:0;}}' +
    '@keyframes mira-badge-pop{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}' +
  '</style>';

  /* ══ HTML ══ */
  var items = [
    { icon: 'sicon-house-door',   label: 'الرئيسية', href: BASE,             key: 'home'                },
    { icon: 'sicon-list',         label: 'الأقسام',  href: null,             key: 'cats',   menu: true   },
    { icon: 'sicon-user',         label: 'حسابي',    href: null,             key: 'account',login: true  },
    { icon: 'sicon-search',       label: 'بحث',      href: null,             key: 'search', search: true },
    { icon: 'sicon-shopping-bag', label: 'السلة',    href: BASE + '/cart',   key: 'cart'                },
  ];

  var btns = items.map(function (item, idx) {
    return '<button class="mira-btn" data-idx="' + idx + '" data-key="' + item.key + '" ' +
           (item.href ? 'data-href="' + item.href + '"' : '') +
           (item.menu   ? 'data-menu="1"'   : '') +
           (item.login  ? 'data-login="1"'  : '') +
           (item.search ? 'data-search="1"' : '') +
           ' aria-label="' + item.label + '">' +
           '<i class="' + item.icon + '"></i>' +
           '<span>' + item.label + '</span>' +
           '</button>';
  }).join('');

  var html = '<nav id="mira-bnav" role="navigation" aria-label="القائمة الرئيسية">' + btns + '</nav>';

  document.head.insertAdjacentHTML('beforeend', css);
  document.body.insertAdjacentHTML('beforeend', html);

  var nav    = document.getElementById('mira-bnav');
  var btnsEl = nav.querySelectorAll('.mira-btn');

  /* ══ تمييز الصفحة الحالية ══ */
  var path = window.location.pathname;
  var activeKey = 'home';
  if      (path.indexOf('/cart')    !== -1)                                    activeKey = 'cart';
  else if (path.indexOf('/account') !== -1 || path.indexOf('/profile') !== -1) activeKey = 'account';
  else if (path.indexOf('/c')       !== -1 || path.indexOf('/categor') !== -1) activeKey = 'cats';
  else if (path === '/ar' || path === '/ar/' || path === '/')                  activeKey = 'home';

  function setActive(key) {
    btnsEl.forEach(function (b) {
      b.classList.remove('on');
      var dot = b.querySelector('.mira-dot');
      if (dot) dot.parentNode.removeChild(dot);
    });
    btnsEl.forEach(function (b) {
      if (b.getAttribute('data-key') === key) {
        b.classList.add('on');
        var dot = document.createElement('span');
        dot.className = 'mira-dot';
        b.appendChild(dot);
      }
    });
  }

  setActive(activeKey);

  /* ══ Ripple ══ */
  function ripple(btn, e) {
    var r    = btn.getBoundingClientRect();
    var size = Math.max(r.width, r.height) * 3;
    var x    = (e.clientX || r.left + r.width  / 2) - r.left - size / 2;
    var y    = (e.clientY || r.top  + r.height / 2) - r.top  - size / 2;
    var sp   = document.createElement('span');
    sp.className = 'mira-rpl';
    sp.style.cssText = 'width:'+size+'px;height:'+size+'px;left:'+x+'px;top:'+y+'px';
    btn.appendChild(sp);
    setTimeout(function(){ sp.parentNode && sp.parentNode.removeChild(sp); }, 560);
  }

  /* ══ عداد السلة ══ */
  function updateCartBadge() {
    var cartBtn = document.querySelector('.mira-btn[data-key="cart"]');
    if (!cartBtn) return;

    var existingBadge = cartBtn.querySelector('.mira-cart-badge');
    if (existingBadge) existingBadge.remove();

    var cartCount = 0;

    var cartCounter = document.querySelector(
      '.s-cart-count, [class*="cart-count"], .cart-badge, [data-cart-count]'
    );
    if (cartCounter) {
      cartCount = parseInt(cartCounter.textContent) || 0;
    }

    if (cartCount === 0 && window.localStorage) {
      try {
        var cart = JSON.parse(localStorage.getItem('salla-cart') || '{}');
        cartCount = (cart.items || []).length;
      } catch(e) {}
    }

    if (cartCount > 0) {
      var badge = document.createElement('span');
      badge.className = 'mira-cart-badge';
      badge.textContent = cartCount;
      cartBtn.appendChild(badge);
    }
  }

  updateCartBadge();

  if (window.salla) {
    try {
      salla.event.onAdd(function() { setTimeout(updateCartBadge, 500); });
      salla.event.onRemove(function() { setTimeout(updateCartBadge, 500); });
      salla.event.onCartUpdate(function() { setTimeout(updateCartBadge, 500); });
    } catch(er) {}
  }

  /* ══ أحداث الأزرار ══ */
  btnsEl.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
      ripple(btn, e);

      var key = btn.getAttribute('data-key');
      setActive(key);

      /* بحث */
      if (btn.getAttribute('data-search')) {
        var trigger = document.querySelector(
          '.search-btn, [onclick*="search::open"], .s-search-modal-trigger, salla-search'
        );
        if (trigger) { trigger.click(); return; }
        if (window.salla) { try { salla.event.dispatch('search::open'); return; } catch(er){} }
        return;
      }

      /* قائمة الأقسام */
      if (btn.getAttribute('data-menu')) {
        var menuBtn = document.querySelector('.mburger, a[href="#mobile-menu"]');
        if (menuBtn) { menuBtn.click(); return; }
        if (window.salla) { try { salla.event.dispatch('mobile-menu::open'); return; } catch(er){} }
        return;
      }

      /* ════════════════════════════════════════════
         حسابي — الحل الصحيح
         يفتح/يغلق القائمة عبر toggle فئة "opened"
         على عنصر .s-user-menu-toggler
      ════════════════════════════════════════════ */
      if (btn.getAttribute('data-login')) {

        /* المحاولة 1 ✅ الأساسية — toggle فئة opened */
        var toggler = document.querySelector('.s-user-menu-toggler');
        if (toggler) {
          toggler.classList.toggle('opened');
          return;
        }

        /* المحاولة 2 — داخل salla-user-menu */
        var userMenuEl = document.querySelector('salla-user-menu');
        if (userMenuEl) {
          var innerToggler = userMenuEl.querySelector('.s-user-menu-toggler');
          if (innerToggler) {
            innerToggler.classList.toggle('opened');
            return;
          }

          /* المحاولة 3 — parent الـ dropdown */
          var dropdown = userMenuEl.querySelector('[class*="dropdown"]');
          if (dropdown && dropdown.parentElement) {
            dropdown.parentElement.classList.toggle('opened');
            return;
          }
        }

        /* المحاولة 4 — Salla event */
        if (window.salla) {
          try { salla.event.dispatch('login::open'); return; } catch(er) {}
        }

        return;
      }

      /* رابط عادي */
      var href = btn.getAttribute('data-href');
      if (href) window.location.href = href;
    });
  });

  /* ══ إخفاء عند السكرول للأسفل ══ */
  var lastY = 0, busy = false;
  window.addEventListener('scroll', function () {
    if (busy) return;
    busy = true;
    requestAnimationFrame(function () {
      var y = window.scrollY || window.pageYOffset;
      nav.classList.toggle('mira-hide', y > lastY && y > 80);
      lastY = y;
      busy  = false;
    });
  }, { passive: true });

})();

/* ============================================================
   MIRA FLOWERS — Homepage Enhancements
   mira-flowers.com | Salla Theme Injection
   ============================================================ */

document.addEventListener("DOMContentLoaded", function () {
  injectStyles();
  addCategoriesExplorer();
  addWhyUs();
  addSteps();
  addTestimonials();
  addSeasonalBadge();
  addWhatsappButton();
});

/* ─────────────────────────────────────────────
   CSS
───────────────────────────────────────────── */
function injectStyles() {
  const style = document.createElement("style");
  style.innerHTML = `
    @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;800;900&display=swap');

    :root {
      --mira-rose:    #b76e79;
      --mira-deep:    #3b2b2b;
      --mira-blush:   #f9eff1;
      --mira-gold:    #c9a86c;
      --mira-white:   #ffffff;
      --mira-gray:    #7a7a7a;
      --mira-radius:  22px;
      --mira-shadow:  0 8px 30px rgba(183,110,121,.15);
    }

    .mira-section {
      margin: 52px auto;
      direction: rtl;
      font-family: 'Tajawal', sans-serif;
    }

    /* ── Titles ── */
    .mira-title {
      text-align: center;
      font-size: 30px;
      font-weight: 900;
      color: var(--mira-deep);
      margin-bottom: 6px;
      position: relative;
      display: inline-block;
      left: 50%;
      transform: translateX(-50%);
    }
    .mira-title::after {
      content: '';
      display: block;
      width: 48px;
      height: 4px;
      background: linear-gradient(90deg, var(--mira-rose), var(--mira-gold));
      border-radius: 4px;
      margin: 8px auto 0;
    }
    .mira-subtitle {
      text-align: center;
      color: var(--mira-gray);
      font-size: 15px;
      margin-bottom: 32px;
    }

    /* ── Categories Explorer ── */
    .mira-cats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .mira-cat-card {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--mira-shadow);
      border: 1.5px solid rgba(183,110,121,.1);
      background: var(--mira-white);
      transition: box-shadow .3s ease;
    }
    .mira-cat-card:hover {
      box-shadow: 0 12px 36px rgba(183,110,121,.22);
    }

    .mira-cat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      cursor: pointer;
      background: var(--mira-white);
      transition: background .25s ease;
      user-select: none;
      gap: 10px;
      text-decoration: none;
      color: inherit;
    }
    .mira-cat-header:hover {
      background: var(--mira-blush);
    }
    .mira-cat-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }

    .mira-cat-img {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      border: 2px solid rgba(183,110,121,.18);
      background: var(--mira-blush);
    }
    .mira-cat-img-placeholder {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--mira-rose), var(--mira-gold));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 900;
      color: var(--mira-white);
      border: 2px solid rgba(183,110,121,.18);
      letter-spacing: -2px;
    }

    .mira-cat-info { min-width: 0; }
    .mira-cat-name {
      font-size: 15px;
      font-weight: 800;
      color: var(--mira-deep);
      margin: 0 0 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mira-cat-badge {
      font-size: 11px;
      color: var(--mira-rose);
      font-weight: 700;
      background: rgba(183,110,121,.1);
      border-radius: 20px;
      padding: 2px 8px;
      display: inline-block;
    }

    .mira-cat-arrow {
      width: 28px;
      height: 28px;
      background: var(--mira-blush);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform .3s ease, background .25s ease;
      font-size: 12px;
      color: var(--mira-rose);
    }
    .mira-cat-card.no-subs .mira-cat-arrow {
      transform: rotate(-90deg);
    }

    .mira-cat-subs {
      max-height: 0;
      overflow: hidden;
      transition: max-height .4s cubic-bezier(.4,0,.2,1);
      border-top: 0px solid rgba(183,110,121,.1);
    }
    .mira-cat-card.open .mira-cat-subs {
      max-height: 400px;
      border-top-width: 1px;
    }
    .mira-cat-sub-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 18px 11px 14px;
      text-decoration: none;
      color: #555;
      font-size: 14px;
      font-weight: 700;
      transition: background .2s ease, color .2s ease;
      border-bottom: 1px solid rgba(183,110,121,.06);
    }
    .mira-cat-sub-link:last-child { border-bottom: none; }
    .mira-cat-sub-link:hover {
      background: var(--mira-blush);
      color: var(--mira-rose);
    }
    .mira-cat-sub-link::before {
      content: '›';
      color: var(--mira-rose);
      font-size: 18px;
      line-height: 1;
    }

    /* ── Why Us Cards ── */
    .mira-grid-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .mira-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .mira-card {
      background: var(--mira-white);
      border-radius: var(--mira-radius);
      padding: 26px 18px;
      text-align: center;
      box-shadow: var(--mira-shadow);
      border: 1px solid rgba(183,110,121,.1);
      transition: transform .3s ease, box-shadow .3s ease;
      position: relative;
      overflow: hidden;
    }
    .mira-card::before {
      content: '';
      position: absolute;
      top: 0; right: 0;
      width: 60px; height: 60px;
      background: radial-gradient(circle, rgba(183,110,121,.08), transparent 70%);
      border-radius: 50%;
      transform: translate(20px, -20px);
    }
    .mira-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(183,110,121,.22);
    }
    .mira-icon {
      font-size: 36px;
      display: block;
      margin-bottom: 12px;
      filter: drop-shadow(0 2px 6px rgba(183,110,121,.3));
    }
    .mira-card h3 {
      font-size: 17px;
      font-weight: 800;
      color: var(--mira-deep);
      margin: 6px 0;
    }
    .mira-card p {
      font-size: 14px;
      color: var(--mira-gray);
      line-height: 1.9;
      margin: 0;
    }

    /* ── Steps ── */
    .mira-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      position: relative;
    }
    .mira-steps::before {
      content: '';
      position: absolute;
      top: 38px;
      right: 12.5%;
      left: 12.5%;
      height: 2px;
      background: linear-gradient(90deg, var(--mira-rose), var(--mira-gold));
      z-index: 0;
    }
    .mira-step {
      background: var(--mira-white);
      border-radius: var(--mira-radius);
      padding: 30px 16px 22px;
      text-align: center;
      box-shadow: var(--mira-shadow);
      position: relative;
      z-index: 1;
      transition: transform .3s ease;
    }
    .mira-step:hover { transform: translateY(-4px); }
    .mira-step-num {
      width: 42px;
      height: 42px;
      background: linear-gradient(135deg, var(--mira-rose), var(--mira-gold));
      color: var(--mira-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 18px;
      margin: 0 auto 14px;
      box-shadow: 0 4px 14px rgba(183,110,121,.4);
    }
    .mira-step h3 {
      font-size: 16px;
      font-weight: 800;
      color: var(--mira-deep);
      margin: 0 0 8px;
    }
    .mira-step p {
      font-size: 14px;
      color: var(--mira-gray);
      margin: 0;
      line-height: 1.8;
    }

    /* ── Testimonials ── */
    .mira-testimonial {
      background: var(--mira-white);
      border-radius: var(--mira-radius);
      padding: 28px 22px;
      box-shadow: var(--mira-shadow);
      text-align: center;
      position: relative;
      border-top: 3px solid var(--mira-rose);
      transition: transform .3s ease;
    }
    .mira-testimonial:hover { transform: translateY(-4px); }
    .mira-testimonial::before {
      content: '"';
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 60px;
      color: var(--mira-rose);
      opacity: .15;
      font-family: Georgia, serif;
      line-height: 1;
    }
    .mira-stars {
      color: var(--mira-gold);
      font-size: 18px;
      letter-spacing: 2px;
      margin-bottom: 12px;
    }
    .mira-testimonial p {
      font-size: 15px;
      color: #555;
      line-height: 1.9;
      margin-bottom: 14px;
    }
    .mira-testimonial strong {
      color: var(--mira-deep);
      font-weight: 800;
      font-size: 14px;
    }
    .mira-t-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--mira-blush), var(--mira-rose));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin: 0 auto 10px;
    }

    /* ── Seasonal Badge ── */
    .mira-seasonal-badge {
      position: fixed;
      top: 100px;
      left: 16px;
      z-index: 9998;
      background: linear-gradient(135deg, var(--mira-rose), var(--mira-gold));
      color: var(--mira-white);
      border-radius: 16px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      box-shadow: 0 6px 20px rgba(183,110,121,.4);
      animation: mira-badge-in .5s ease forwards;
      cursor: default;
      max-width: 90px;
      line-height: 1.5;
    }
    .mira-seasonal-badge .badge-emoji {
      font-size: 22px;
      display: block;
      margin-bottom: 4px;
    }
    @keyframes mira-badge-in {
      from { opacity: 0; transform: translateX(-20px) scale(.8); }
      to   { opacity: 1; transform: translateX(0) scale(1); }
    }

    /* ── WhatsApp ── */
    .mira-whatsapp {
      position: fixed;
      bottom: 88px;
      left: 18px;
      width: 56px;
      height: 56px;
      background: #25d366;
      color: var(--mira-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      text-decoration: none;
      box-shadow: 0 6px 24px rgba(37,211,102,.4);
      animation: mira-pulse 2s ease-in-out infinite;
    }
    @keyframes mira-pulse {
      0%, 100% { transform: scale(1);   box-shadow: 0 6px 24px rgba(37,211,102,.4); }
      50%       { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37,211,102,.55); }
    }

    /* ── Responsive ── */
    @media (max-width: 992px) {
      .mira-cats-grid            { grid-template-columns: repeat(2, 1fr); }
      .mira-grid-4, .mira-steps  { grid-template-columns: repeat(2, 1fr); }
      .mira-grid-3               { grid-template-columns: repeat(2, 1fr); }
      .mira-steps::before        { display: none; }
    }

    @media (max-width: 600px) {
      .mira-cats-grid            { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .mira-grid-4, .mira-grid-3, .mira-steps { grid-template-columns: 1fr; }
      .mira-title                { font-size: 24px; }
      .mira-section              { margin: 36px auto; }
      .mira-seasonal-badge       { display: none; }
      .mira-cat-card             { border-radius: 16px; }
      .mira-cat-header {
        flex-direction: column;
        align-items: center;
        padding: 14px 12px 12px;
        gap: 8px;
        text-align: center;
      }
      .mira-cat-header-left {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
      }
      .mira-cat-img,
      .mira-cat-img-placeholder {
        width: 100%;
        height: 100px;
        border-radius: 12px;
        object-fit: cover;
        border-width: 0;
        font-size: 42px;
        font-weight: 900;
      }
      .mira-cat-img-placeholder { height: 100px; border-radius: 12px; }
      .mira-cat-info             { width: 100%; }
      .mira-cat-name {
        font-size: 13px;
        white-space: normal;
        text-align: center;
      }
      .mira-cat-badge            { font-size: 10px; }
      .mira-cat-arrow            { width: 24px; height: 24px; font-size: 11px; }
      .mira-cat-sub-link         { font-size: 13px; padding: 10px 14px; }
    }
  `;
  document.head.appendChild(style);
}

/* ─────────────────────────────────────────────
   Helpers
───────────────────────────────────────────── */
function insertAfter(selector, el) {
  const target = document.querySelector(selector);
  if (target) target.insertAdjacentElement("afterend", el);
}
function appendToMain(el) {
  const main = document.querySelector("#main-content");
  if (main) main.appendChild(el);
}
function makeSection(cls) {
  const s = document.createElement("section");
  s.className = "mira-section container" + (cls ? " " + cls : "");
  return s;
}

/* ─────────────────────────────────────────────
   1. Categories Explorer
───────────────────────────────────────────── */
function addCategoriesExplorer() {
  const BASE = "https://mira-flowers.com/ar";

  const cats = [
    {
      name: "بوكيهات الورد",
      emoji: "💐",
      img: "https://cdn.files.salla.network/categories/91131212/25235ae4-2e49-45d8-a691-e11190a09786_900x900.webp",
      href: BASE + "/flower-bouquets-abha-khamis/c704369862",
      subs: [
        { name: "بوكيهات 50 إلى 100 ريال", href: BASE + "/bouquets-50-100-abha-khamis/c2096076510" },
        { name: "بوكيهات 100 إلى 500 ريال", href: BASE + "/bouquets-100-500-abha-khamis/c1503509799" },
      ]
    },
    {
      name: "فازات الورد",
      emoji: "🌹",
      img: "https://cdn.files.salla.network/homepage/91131212/a658c461-6b0c-4180-9825-f3943a1d1612_506x900.webp",
      href: BASE + "/flower-vases-abha-khamis/c88603425",
      subs: []
    },
    {
      name: "شوكليت وكيك",
      emoji: "🍫",
      img: "https://cdn.files.salla.network/homepage/91131212/d6d562e7-1c09-42be-80c3-36c15f05c03b_900x900.webp",
      href: BASE + "/-/c513377838",
      subs: [
        { name: "ورد وشوكلت", href: BASE + "/-/c513377838" },
        { name: "ورد وكيك",   href: BASE + "/-/c1751557423" },
      ]
    },
    {
      name: "هدايا",
      emoji: "🎁",
      img: "https://cdn.salla.sa/ZYdxOb/categories/GM08gY5csM0ICpZt3CfOG4PJDdPCra9gFhlAUJiw.jpg",
      href: BASE + "/flowers-and-gifts-abha-khamis/c694324790",
      subs: [
        { name: "هدايا رجالية",  href: BASE + "/mens-flowers-gifts-abha-khamis/c310966786" },
        { name: "هدايا نسائية",  href: BASE + "/womens-flowers-gifts-abha-khamis/c28288008" },
      ]
    },
  ];

  const s = makeSection();
  s.innerHTML = `
    <h2 class="mira-title">تصفح الأقسام</h2>
    <p class="mira-subtitle">اختر القسم المناسب واستكشف تشكيلاتنا</p>
    <div class="mira-cats-grid">
      ${cats.map(cat => {
        const hasSubs = cat.subs.length > 0;
        return `
          <div class="mira-cat-card ${hasSubs ? 'has-subs' : 'no-subs'}">
            <a class="mira-cat-header" href="${cat.href}">
              <div class="mira-cat-header-left">
                <img class="mira-cat-img" src="${cat.img}" alt="${cat.name}" loading="lazy"
                     onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
                <div class="mira-cat-img-placeholder" style="display:none">MF</div>
                <div class="mira-cat-info">
                  <p class="mira-cat-name">${cat.name}</p>
                  <span class="mira-cat-badge">
                    ${hasSubs ? cat.subs.length + ' تصنيفات' : 'تسوق الآن'}
                  </span>
                </div>
              </div>
              <span class="mira-cat-arrow">▾</span>
            </a>
            ${hasSubs ? `
              <div class="mira-cat-subs">
                ${cat.subs.map(sub => `
                  <a class="mira-cat-sub-link" href="${sub.href}">${sub.name}</a>
                `).join("")}
              </div>
            ` : ''}
          </div>
        `;
      }).join("")}
    </div>
  `;

  insertAfter(".s-block--categories", s);

  /* ══ فتح/إغلاق التفرعات ══ */
  setTimeout(() => {
    const categoryCards = document.querySelectorAll('.mira-cat-card.has-subs');
    
    categoryCards.forEach(card => {
      const header = card.querySelector('.mira-cat-header');
      
      if (header) {
        header.addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          
          // إزالة الفئة open من باقي الكروت
          categoryCards.forEach(c => {
            if (c !== card) c.classList.remove('open');
          });
          
          // toggle الفئة على الكارت الحالي
          card.classList.toggle('open');
        });
      }
    });
  }, 100);
}

/* ─────────────────────────────────────────────
   2. Why Us
───────────────────────────────────────────── */
function addWhyUs() {
  const reasons = [
    { icon: "🌷", title: "تنسيق احترافي",  desc: "تصاميم ناعمة وفاخرة تناسب كل الأذواق" },
    { icon: "💌", title: "بطاقة إهداء",    desc: "أضف رسالتك الخاصة مع الهدية مجاناً" },
    { icon: "🕒", title: "تجهيز سريع",     desc: "نجهز طلبك بعناية وفي أقرب وقت ممكن" },
    { icon: "💐", title: "خيارات متنوعة",  desc: "بوكيهات، فازات، شوكولاتة، كيك وهدايا" },
  ];

  const s = makeSection();
  s.innerHTML = `
    <h2 class="mira-title">لماذا ميرا الورود؟</h2>
    <p class="mira-subtitle">نهتم بكل تفصيلة لتصل هديتك بأبهى صورة</p>
    <div class="mira-grid-4">
      ${reasons.map(r => `
        <div class="mira-card">
          <span class="mira-icon">${r.icon}</span>
          <h3>${r.title}</h3>
          <p>${r.desc}</p>
        </div>
      `).join("")}
    </div>
  `;
  appendToMain(s);
}

/* ─────────────────────────────────────────────
   3. Steps
───────────────────────────────────────────── */
function addSteps() {
  const steps = [
    { title: "اختر الباقة",   desc: "تصفح الأقسام واختر الهدية المناسبة" },
    { title: "أضف التفاصيل", desc: "حدد الكمية وأضف بطاقة الإهداء الخاصة" },
    { title: "أكمل الدفع",   desc: "ادفع بأمان عبر خيارات الدفع المتاحة" },
    { title: "نوصّل",         desc: "نجهز طلبك ونوصله بأجمل شكل وأسرع وقت" },
  ];

  const s = makeSection();
  s.innerHTML = `
    <h2 class="mira-title">كيف تطلب من ميرا؟</h2>
    <p class="mira-subtitle">أربع خطوات بسيطة لهدية لا تُنسى</p>
    <div class="mira-steps">
      ${steps.map((st, i) => `
        <div class="mira-step">
          <div class="mira-step-num">${i + 1}</div>
          <h3>${st.title}</h3>
          <p>${st.desc}</p>
        </div>
      `).join("")}
    </div>
  `;
  appendToMain(s);
}

/* ─────────────────────────────────────────────
   4. Testimonials
───────────────────────────────────────────── */
function addTestimonials() {
  const reviews = [
    { emoji: "🌸", text: "التغليف جميل جدًا والتوصيل سريع، وصلت الباقة أجمل من الصورة!", name: "نورة العتيبي" },
    { emoji: "💐", text: "تعامل راقٍ وتنسيق مميز جداً. أنصح بميرا لكل المناسبات.",        name: "سارة الغامدي"  },
    { emoji: "🌹", text: "طلبت لزوجتي ووصل بوقت محدد وبشكل خيالي. شكراً ميرا.",          name: "أحمد القحطاني" },
  ];

  const s = makeSection();
  s.innerHTML = `
    <h2 class="mira-title">آراء عملائنا</h2>
    <p class="mira-subtitle">تجارب حقيقية نفتخر بها</p>
    <div class="mira-grid-3">
      ${reviews.map(r => `
        <div class="mira-testimonial">
          <div class="mira-t-avatar">${r.emoji}</div>
          <div class="mira-stars">★★★★★</div>
          <p>${r.text}</p>
          <strong>${r.name}</strong>
        </div>
      `).join("")}
    </div>
  `;
  appendToMain(s);
}

/* ─────────────────────────────────────────────
   5. Seasonal Badge
───────────────────────────────────────────── */
function addSeasonalBadge() {
  const hour = new Date().getHours();
  let emoji = "🌷", text = "هدايا مميزة";
  if (hour >= 8  && hour < 12) { emoji = "🌸"; text = "صباح الورد";   }
  if (hour >= 12 && hour < 16) { emoji = "🌹"; text = "توصيل اليوم";  }
  if (hour >= 16 && hour < 20) { emoji = "💐"; text = "اطلب الآن";    }
  if (hour >= 20)               { emoji = "🌙"; text = "توصيل مسائي"; }

  const badge = document.createElement("div");
  badge.className = "mira-seasonal-badge";
  badge.innerHTML = `<span class="badge-emoji">${emoji}</span>${text}`;
  document.body.appendChild(badge);
}

/* ─────────────────────────────────────────────
   6. WhatsApp Button
───────────────────────────────────────────── */
function addWhatsappButton() {
  const phone   = "966538818988";
  const message = "مرحبًا، أريد الاستفسار عن منتجات ميرا الورود 🌹";

  const btn = document.createElement("a");
  btn.className = "mira-whatsapp";
  btn.href      = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;
  btn.target    = "_blank";
  btn.rel       = "noopener noreferrer";
  btn.setAttribute("aria-label", "تواصل معنا عبر الواتساب");
  btn.innerHTML = `<svg width="26" height="26" viewBox="0 0 24 24" fill="white">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>`;

  document.body.appendChild(btn);
}
/**
 * ════════════════════════════════════════════════════════════════
 * Mira Flowers - Footer Map Component
 * إضافة خريطة الموقع في الفوتر بطريقة احترافية
 * ════════════════════════════════════════════════════════════════
 */