/* Add custom JS code below */

document.body.insertAdjacentHTML("afterbegin", `
<style>
#promo-bar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:40px;
    background:#00A651;
    color:#fff;
    overflow:hidden;
    z-index:999999;
    display:flex;
    align-items:center;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    direction:ltr;
}

.marquee{
    display:flex;
    width:max-content;
    animation:marquee 25s linear infinite;
}

.marquee span{
    white-space:nowrap;
    font-size:14px;
    font-weight:600;
    padding-right:120px;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}
</style>

<div id="promo-bar">
    <div class="marquee">
        <span>💳 خصم إضافي عند الدفع بمدى &nbsp;&nbsp;|&nbsp;&nbsp; 🚚 شحن مجاني للطلبات فوق 99 ريال</span>
        <span>💳 خصم إضافي عند الدفع بمدى &nbsp;&nbsp;|&nbsp;&nbsp; 🚚 شحن مجاني للطلبات فوق 99 ريال</span>
        <span>💳 خصم إضافي عند الدفع بمدى &nbsp;&nbsp;|&nbsp;&nbsp; 🚚 شحن مجاني للطلبات فوق 99 ريال</span>
        <span>💳 خصم إضافي عند الدفع بمدى &nbsp;&nbsp;|&nbsp;&nbsp; 🚚 شحن مجاني للطلبات فوق 99 ريال</span>
    </div>
</div>
`);

document.body.style.paddingTop = "40px";
/* Add custom JS code below */

const whatsapp = document.createElement("a");

whatsapp.href = "https://wa.me/966581730643?text=السلام عليكم، أريد الاستفسار عن أحد المنتجات.";
whatsapp.target = "_blank";
whatsapp.rel = "noopener noreferrer";
whatsapp.setAttribute("aria-label", "WhatsApp");

whatsapp.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="white">
<path d="M20.52 3.48A11.94 11.94 0 0 0 12.06 0C5.5 0 .18 5.32.18 11.88c0 2.1.55 4.15 1.6 5.97L0 24l6.33-1.66a11.88 11.88 0 0 0 5.73 1.46h.01c6.56 0 11.88-5.32 11.88-11.88 0-3.17-1.23-6.14-3.43-8.44zM12.06 21.6a9.66 9.66 0 0 1-4.92-1.34l-.35-.2-3.76.99 1-3.67-.23-.38a9.69 9.69 0 1 1 8.26 4.6zm5.3-7.26c-.29-.14-1.7-.84-1.97-.94-.26-.1-.45-.14-.64.15-.19.29-.74.94-.9 1.13-.17.19-.33.22-.62.07-.29-.14-1.22-.45-2.33-1.43-.86-.76-1.44-1.69-1.6-1.98-.17-.29-.02-.44.12-.58.13-.13.29-.33.43-.5.14-.17.19-.29.29-.48.1-.19.05-.36-.02-.5-.07-.14-.64-1.55-.88-2.13-.23-.55-.47-.48-.64-.49h-.55c-.19 0-.5.07-.76.36-.26.29-1 1-.1 2.45.9 1.45 2.59 3.59 6.26 5.03.87.37 1.55.59 2.08.76.87.28 1.66.24 2.28.15.69-.1 1.7-.69 1.94-1.35.24-.66.24-1.22.17-1.34-.07-.12-.26-.19-.55-.33z"/>
</svg>
`;

Object.assign(whatsapp.style, {
  position: "fixed",
  bottom: "20px",
  right: "20px",
  width: "60px",
  height: "60px",
  background: "#25D366",
  borderRadius: "50%",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  boxShadow: "0 6px 18px rgba(0,0,0,.25)",
  zIndex: "999999",
  cursor: "pointer",
  transition: "transform .2s ease"
});

whatsapp.addEventListener("mouseenter", () => {
  whatsapp.style.transform = "scale(1.1)";
});

whatsapp.addEventListener("mouseleave", () => {
  whatsapp.style.transform = "scale(1)";
});

document.body.appendChild(whatsapp);