/*
  بوب أب إعلاني عام - قابل لإعادة الاستخدام في أي موقع
  ============================================================
  إزاي تستخدمه:

  كل حاجة محتاج تغيرها موجودة في قسم "CONFIG" تحت بس.

  المميزات:
  - يعرض لوجو المتجر فوق العنوان
  - يسحب اللون الأساسي تلقائيًا من اللوجو نفسه (Auto Color)
  - بيظهر في الصفحة الرئيسية بس (مش في باقي صفحات الموقع)
  - بيظهر كل مرة الزائر يدخل الصفحة الرئيسية (من غير حد أقصى)

  1) غيّر النص، العنوان، رابط اللوجو، ورابط الزرار من جوه CONFIG
  2) الصق الكود كله جوه وسم <script>...</script> قبل </body>
*/

(function () {

  // ======================================================
  // ==================  CONFIG  =========================
  // ==== غيّر بس اللي هنا، وسيب باقي الكود زي ما هو ======
  // ======================================================
  var CONFIG = {
    logoUrl: "https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/eQQap/EVDpCZ4UKRJwuRpZ51EUU65GyaD2ej14jzCixyWm.png",  // <-- حط هنا رابط لوجو المتجر (مثال: "https://example.com/logo.png")
    badgeEmoji: "🎉",   // بيظهر بس لو logoUrl فاضي

    title: "عرض خاص لفترة محدودة",
    // أي جزء عايزه بارز حطه بين **علامتين نجمة**
    text: "ابدأ رحلتك في الإنجليزي من الصفر — وخد خطة تعليمية + جدول كلمات مجانًا!",
    ctaText: "تسوق الآن",
    ctaLink: "https://wolanguages.com/ar/%D8%A7%D8%B7%D9%84%D8%A8-%D9%83%D8%AA%D8%A7%D8%A8-%D8%B9%D8%A7%D9%84%D9%85-%D8%A7%D9%84%D8%A5%D9%86%D8%AC%D9%84%D9%8A%D8%B2%D9%8A%D8%A9-%D9%84%D8%AA%D8%B9%D9%84%D9%85-%D9%82%D9%88%D8%A7%D8%B9%D8%AF-%D8%A7%D9%84%D9%84%D8%BA%D8%A9-%D8%A8%D8%B3%D9%87%D9%88%D9%84%D8%A9/p976067856",

    // ==== الألوان ====
    autoColorFromLogo: true, // لو true، هيحاول ياخد لون الزرار/الحواف من اللوجو
    bgGradientStart: "#faf3e6",
    bgGradientEnd: "#f3e6cf",
    textColor: "#1a2744",
    bodyTextColor: "#3a3428",

    // دول ألوان احتياطية (Fallback) - بتتستخدم لو autoColorFromLogo=false
    // أو لو تحليل اللوجو فشل لأي سبب
    accentColor: "#b8863f",
    borderColor: "#c9a35c",
    ctaGradientStart: "#c9a35c",
    ctaGradientEnd: "#b8863f",

    // ==== إعدادات الظهور ====
    onlyHomepage: true,      // لو true، البوب أب هيظهر في الصفحة الرئيسية بس
    // مسارات تعتبر "الصفحة الرئيسية" (بعض المتاجر بتحط لغة في الرابط زي /ar)
    homepagePaths: ["/", "/ar", "/ar/", "/en", "/en/"],
    alwaysShow: true,        // لو true، هيظهر كل مرة (من غير كوكيز/حد أقصى)
    cookieName: "promo_popup_shown", // بتتستخدم بس لو alwaysShow = false
    cookieHours: 24,                 // بتتستخدم بس لو alwaysShow = false
    showAfterMs: 800
  };
  // ======================================================
  // ============  متلمسش تحت السطر ده  ==================
  // ======================================================

  function isHomepage() {
    if (!CONFIG.onlyHomepage) return true;
    var path = window.location.pathname;
    // بيقارن المسار الحالي بقايمة homepagePaths (بعد ما يشيل الـ / الزيادة في الآخر)
    var normalized = path.length > 1 ? path.replace(/\/$/, "") : path;
    return CONFIG.homepagePaths.some(function (p) {
      var np = p.length > 1 ? p.replace(/\/$/, "") : p;
      return normalized === np;
    });
  }

  function getCookie(name) {
    var match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
    return match ? match[2] : null;
  }

  function setCookie(name, value, hours) {
    var d = new Date();
    d.setTime(d.getTime() + hours * 60 * 60 * 1000);
    document.cookie = name + "=" + value + ";expires=" + d.toUTCString() + ";path=/";
  }

  function parseHighlights(text) {
    return text.replace(/\*\*(.+?)\*\*/g, '<span class="pp-highlight">$1</span>');
  }

  function rgbToHex(r, g, b) {
    return "#" + [r, g, b].map(function (v) {
      var h = v.toString(16);
      return h.length === 1 ? "0" + h : h;
    }).join("");
  }

  function shade(hex, percent) {
    var num = parseInt(hex.slice(1), 16);
    var r = (num >> 16) + Math.round(255 * percent / 100);
    var g = ((num >> 8) & 0x00FF) + Math.round(255 * percent / 100);
    var b = (num & 0x0000FF) + Math.round(255 * percent / 100);
    r = Math.max(0, Math.min(255, r));
    g = Math.max(0, Math.min(255, g));
    b = Math.max(0, Math.min(255, b));
    return rgbToHex(r, g, b);
  }

  function extractDominantColor(imgUrl, onDone) {
    try {
      var img = new Image();
      img.crossOrigin = "Anonymous";

      img.onload = function () {
        try {
          var w = 40, h = 40;
          var canvas = document.createElement("canvas");
          canvas.width = w;
          canvas.height = h;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, w, h);
          var data = ctx.getImageData(0, 0, w, h).data;

          var r = 0, g = 0, b = 0, count = 0;
          for (var i = 0; i < data.length; i += 4) {
            var alpha = data[i + 3];
            if (alpha < 128) continue;
            var isNearWhite = data[i] > 240 && data[i + 1] > 240 && data[i + 2] > 240;
            if (isNearWhite) continue;
            r += data[i];
            g += data[i + 1];
            b += data[i + 2];
            count++;
          }

          if (count === 0) { onDone(null); return; }

          r = Math.round(r / count);
          g = Math.round(g / count);
          b = Math.round(b / count);
          onDone(rgbToHex(r, g, b));
        } catch (e) {
          onDone(null);
        }
      };

      img.onerror = function () { onDone(null); };
      img.src = imgUrl;
    } catch (e) {
      onDone(null);
    }
  }

  function injectStyles(colors) {
    var css = "" +
      ".pp-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);" +
      "z-index:999999;align-items:center;justify-content:center;padding:16px;" +
      "font-family:'Tajawal','Cairo',Arial,sans-serif;}" +
      ".pp-overlay.pp-show{display:flex;}" +
      ".pp-modal{position:relative;background:linear-gradient(160deg," + CONFIG.bgGradientStart + " 0%," + CONFIG.bgGradientEnd + " 100%);" +
      "color:" + CONFIG.textColor + ";max-width:420px;width:100%;border-radius:18px;padding:32px 24px 28px;" +
      "text-align:center;direction:rtl;border:1px solid " + colors.border + ";" +
      "box-shadow:0 20px 50px rgba(0,0,0,0.35);animation:pp-pop .35s ease;}" +
      "@keyframes pp-pop{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}" +
      ".pp-logo{max-width:130px;max-height:80px;object-fit:contain;margin-bottom:14px;}" +
      ".pp-badge{font-size:42px;line-height:1;margin-bottom:10px;}" +
      ".pp-title{font-size:22px;font-weight:800;margin:0 0 12px;color:" + CONFIG.textColor + ";}" +
      ".pp-text{font-size:16px;line-height:1.7;margin:0 0 22px;color:" + CONFIG.bodyTextColor + ";}" +
      ".pp-highlight{color:" + colors.accent + ";font-weight:800;}" +
      ".pp-cta{display:inline-block;background:linear-gradient(135deg," + colors.ctaStart + " 0%," + colors.ctaEnd + " 100%);" +
      "color:#fff;font-weight:800;padding:12px 30px;border-radius:10px;text-decoration:none;" +
      "font-size:15px;transition:transform .15s ease;box-shadow:0 6px 16px rgba(0,0,0,0.25);}" +
      ".pp-cta:hover{transform:translateY(-2px);}" +
      ".pp-close{position:absolute;top:10px;left:14px;background:rgba(26,39,68,0.08);" +
      "border:none;color:" + CONFIG.textColor + ";width:30px;height:30px;border-radius:50%;font-size:16px;" +
      "cursor:pointer;line-height:1;}" +
      ".pp-close:hover{background:rgba(26,39,68,0.18);}";

    var styleTag = document.createElement("style");
    styleTag.setAttribute("id", "pp-styles");
    styleTag.appendChild(document.createTextNode(css));
    document.head.appendChild(styleTag);
  }

  function injectMarkup() {
    var overlay = document.createElement("div");
    overlay.className = "pp-overlay";
    overlay.id = "ppOverlay";

    var topVisual = CONFIG.logoUrl
      ? '<img src="' + CONFIG.logoUrl + '" alt="logo" class="pp-logo" />'
      : '<div class="pp-badge">' + CONFIG.badgeEmoji + '</div>';

    overlay.innerHTML =
      '<div class="pp-modal">' +
        '<button class="pp-close" id="ppClose" aria-label="إغلاق">✕</button>' +
        topVisual +
        '<h2 class="pp-title">' + CONFIG.title + '</h2>' +
        '<p class="pp-text">' + parseHighlights(CONFIG.text) + '</p>' +
        '<a href="' + CONFIG.ctaLink + '" class="pp-cta">' + CONFIG.ctaText + '</a>' +
      '</div>';

    document.body.appendChild(overlay);
    return overlay;
  }

  function showPopup(colors) {
    injectStyles(colors);
    var overlay = injectMarkup();

    setTimeout(function () {
      overlay.classList.add("pp-show");
    }, CONFIG.showAfterMs);

    if (!CONFIG.alwaysShow) {
      setCookie(CONFIG.cookieName, "1", CONFIG.cookieHours);
    }

    function closePopup() {
      overlay.classList.remove("pp-show");
    }

    document.getElementById("ppClose").addEventListener("click", closePopup);
    overlay.addEventListener("click", function (e) {
      if (e.target === overlay) closePopup();
    });
  }

  function initPopup() {
    if (!isHomepage()) return; // مش في الصفحة الرئيسية -> متعملش حاجة

    if (!CONFIG.alwaysShow && getCookie(CONFIG.cookieName)) return;

    var fallbackColors = {
      accent: CONFIG.accentColor,
      border: CONFIG.borderColor,
      ctaStart: CONFIG.ctaGradientStart,
      ctaEnd: CONFIG.ctaGradientEnd
    };

    if (CONFIG.autoColorFromLogo && CONFIG.logoUrl) {
      extractDominantColor(CONFIG.logoUrl, function (hex) {
        if (hex) {
          showPopup({
            accent: hex,
            border: hex,
            ctaStart: shade(hex, 12),
            ctaEnd: shade(hex, -12)
          });
        } else {
          showPopup(fallbackColors);
        }
      });
    } else {
      showPopup(fallbackColors);
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initPopup);
  } else {
    initPopup();
  }
})();