/* Add custom JS code below */ 
(() => {
  const POPUP_ID = 'plush-rebrand-overlay';

  /*
   * سيبه فاضي في البداية.
   * الكود هيحاول ياخد نفس لوجو المتجر من الـ Header.
   */
  const MANUAL_LOGO_URL = 'https://i.ibb.co/whpv8h6k/plush-logo-transparent.png';


  function findStoreLogo() {

    if (MANUAL_LOGO_URL.trim()) {
      return MANUAL_LOGO_URL.trim();
    }

    const selectors = [
      'header .navbar-brand img',
      'header [class*="logo"] img',
      'header img[alt*="Plush" i]',
      'header img[alt*="logo" i]'
    ];

    for (const selector of selectors) {

      const image = document.querySelector(selector);

      if (!image) {
        continue;
      }

      const source =
        image.currentSrc ||
        image.getAttribute('src');

      if (source) {
        return source;
      }
    }

    return '';
  }


  function openPlushPopup() {

    if (!document.body) {
      return;
    }

    /*
     * منع تكرار نفس الـ Popup مرتين
     * داخل نفس الصفحة فقط.
     */
    if (document.getElementById(POPUP_ID)) {
      return;
    }


    const previouslyFocused = document.activeElement;
    const previousOverflow = document.body.style.overflow;


    const overlay = document.createElement('div');

    overlay.id = POPUP_ID;


    overlay.innerHTML = `
      <section
        id="plush-rebrand-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="plush-rebrand-title"
        aria-describedby="plush-rebrand-description"
        dir="ltr"
        lang="en"
      >

        <button
          id="plush-rebrand-close"
          type="button"
          aria-label="Close announcement"
        >
          ×
        </button>


        <div class="plush-rebrand-logo-wrap">

          <img
            id="plush-rebrand-logo"
            alt="Plush"
            decoding="async"
            fetchpriority="low"
            hidden
          >

          <div
            id="plush-rebrand-fallback"
            aria-label="Plush"
          >
            Plush
          </div>

        </div>


        <h2 id="plush-rebrand-title">
          PLUSH DREAMS ARE HAPPENING ✨
        </h2>


        <p class="plush-rebrand-lead">
          <strong>A new look is coming soon.</strong>
        </p>


        <p
          id="plush-rebrand-description"
          class="plush-rebrand-copy"
        >
          New dreams. New look. Same love. 🤍
        </p>


        <p class="plush-rebrand-stay">
          <strong>Stay tuned.</strong>
        </p>


        <div class="plush-rebrand-contact">

          <a
            href="tel:+966567702282"
            aria-label="Call Plush"
          >
            📞 +966 56 770 2282
          </a>


          <a
            href="mailto:mawaddahhu@gmail.com"
          >
            mawaddahhu@gmail.com
          </a>


          <div class="plush-rebrand-socials">

            <a
              href="https://www.instagram.com/byplush.sa/"
              target="_blank"
              rel="noopener noreferrer"
            >
              Instagram:
              <strong>@byplush.sa</strong>
            </a>


            <span
              class="plush-rebrand-dot"
              aria-hidden="true"
            >
              •
            </span>


            <a
              href="https://www.tiktok.com/@byplush.sa"
              target="_blank"
              rel="noopener noreferrer"
            >
              TikTok:
              <strong>@byplush.sa</strong>
            </a>

          </div>

        </div>

      </section>
    `;


    document.body.appendChild(overlay);

    document.body.style.overflow = 'hidden';


    /*
     * استخدام نفس لوجو المتجر
     */
    const logo =
      overlay.querySelector('#plush-rebrand-logo');

    const logoFallback =
      overlay.querySelector('#plush-rebrand-fallback');

    const logoURL = findStoreLogo();


    if (logoURL) {

      logo.src = logoURL;
      logo.hidden = false;
      logoFallback.hidden = true;

      logo.addEventListener(
        'error',
        () => {
          logo.hidden = true;
          logoFallback.hidden = false;
        },
        { once: true }
      );
    }


    const closeButton =
      overlay.querySelector('#plush-rebrand-close');


    function closePopup() {

      document.body.style.overflow =
        previousOverflow;

      document.removeEventListener(
        'keydown',
        handleKeyboard
      );

      overlay.remove();


      if (
        previouslyFocused &&
        typeof previouslyFocused.focus === 'function'
      ) {
        try {
          previouslyFocused.focus({
            preventScroll: true
          });
        } catch (error) {
          /* No action needed */
        }
      }
    }


    function handleKeyboard(event) {

      if (event.key === 'Escape') {
        closePopup();
      }
    }


    /*
     * قفل من X
     */
    closeButton.addEventListener(
      'click',
      closePopup,
      { once: true }
    );


    /*
     * قفل بالضغط خارج الـ Popup
     */
    overlay.addEventListener(
      'click',
      (event) => {

        if (event.target === overlay) {
          closePopup();
        }
      }
    );


    /*
     * قفل بزر ESC
     */
    document.addEventListener(
      'keydown',
      handleKeyboard
    );


    try {
      closeButton.focus({
        preventScroll: true
      });
    } catch (error) {
      closeButton.focus();
    }
  }


  /*
   * يظهر مع كل تحميل / Refresh للصفحة
   */
  if (document.readyState === 'loading') {

    document.addEventListener(
      'DOMContentLoaded',
      openPlushPopup,
      { once: true }
    );

  } else {

    openPlushPopup();
  }

})();