document.addEventListener("DOMContentLoaded", function () {

const productForm = document.querySelector('.form.product-form');

if(productForm){

const fomoHTML = `

<div class="fomo-wrapper">

  <div class="fomo-box green-box">
    <span class="icon-cart">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <path d="M16 10a4 4 0 0 1-8 0"></path>
      </svg>
    </span>
    <span class="buyers-count">12</span>
    أشخاص يطلبون الآن
  </div>

  <div class="fomo-box red-box">
    <span class="icon-eye">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="2.2" stroke-linecap="round"
           stroke-linejoin="round">
        <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"></path>
        <circle cx="12" cy="12" r="3"></circle>
      </svg>
    </span>
    <span class="viewers-count">42</span>
    يشاهدون المنتج الآن
  </div>

</div>

<style>

.fomo-wrapper{
display:flex;
gap:12px;
margin:15px 0;
width:100%;
}

.fomo-box{
flex:1;
padding:14px;
border-radius:14px;
font-size:14px;
font-weight:700;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
gap:6px;
transition:.3s;
}

.green-box{
background:rgba(184,154,82,.12);
border:1px solid #ff0000 !important;
color:#ff0000;
}

.red-box{
background:rgba(255,255,255,.04);
border:1px solid #ff0000 !important;
color:#FFFFFF;
}

.red-box{
background:rgba(255,255,255,.04);
border:1px solid rgba(212,180,106,.25);
color:#FFFFFF;
}

.icon-cart svg,
.icon-eye svg{
color:#ff0000;
}

.buyers-count,
.viewers-count{
font-size:18px;
font-weight:900;
color:##ff0000;
transition:.4s ease;
}

.gold-glow{
text-shadow:
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 35px #ff0000;
}

.pulse-gold{
animation:pulseGold .8s;
}

@keyframes pulseGold{

0%{
transform:scale(1);
}

50%{
transform:scale(1.25);
}

100%{
transform:scale(1);
}

}

</style>

`;

productForm.insertAdjacentHTML("afterbegin", fomoHTML);

let currentViewers = 42;
let currentBuyers = 12;

function glow(el){

el.classList.add("gold-glow");
el.classList.add("pulse-gold");

setTimeout(() => {
el.classList.remove("gold-glow");
el.classList.remove("pulse-gold");
},800);

}

function updateViewers(){

currentViewers += Math.floor(Math.random() * 5) - 2;

if(currentViewers < 30) currentViewers = 30;
if(currentViewers > 50) currentViewers = 50;

const viewersEl = document.querySelector(".viewers-count");

viewersEl.innerText = currentViewers;

glow(viewersEl);

}

function updateBuyers(){

currentBuyers += Math.floor(Math.random() * 3) - 1;

if(currentBuyers < 9) currentBuyers = 9;
if(currentBuyers > 15) currentBuyers = 19;

const buyersEl = document.querySelector(".buyers-count");

buyersEl.innerText = currentBuyers;

glow(buyersEl);

}

updateViewers();
updateBuyers();

setInterval(updateViewers,5000);
setInterval(updateBuyers,12000);

}

});



document.addEventListener("DOMContentLoaded", function () {

const btn = document.createElement("div");
btn.id = "offer-btn";
btn.innerHTML = "🎁 كود خصم ";
document.body.appendChild(btn);

btn.addEventListener("click", function () {

if(document.getElementById("offer-overlay")) return;

const popup = document.createElement("div");

popup.innerHTML = `
<div id="offer-overlay">
  <div id="offer-popup">

    <span id="offer-close">×</span>

    <div class="offer-content">
      <h2>انتظر لحظة لا تفوت الخصم!</h2>
      <p class="offer-sub"> لدينا خصم خاص في اولكر ستور</p>

      <div id="offer-coupon">ULK7</div>

      <p class="offer-text">
        استخدم الكود قبل إتمام الطلب واحصل على خصم إضافي
      </p>

      <button id="copyCoupon">نسخ الكوبون</button>
    </div>

  </div>
</div>
`;

document.body.appendChild(popup);

document.getElementById("offer-close").onclick = function () {
document.getElementById("offer-overlay").remove();
};

document.getElementById("copyCoupon").onclick = function () {

navigator.clipboard.writeText("AURA");

this.innerHTML = "✓ تم نسخ الكوبون";

setTimeout(() => {

document.getElementById("offer-overlay").remove();

}, 1000);

};

});

const style = document.createElement("style");

style.innerHTML = `

#offer-btn{
position:fixed;
left:0;
top:45%;
background:#c13a3a;
color:#fff;
padding:18px 10px;
border-radius:0 14px 14px 0;
font-weight:700;
font-size:15px;
cursor:pointer;
z-index:999999;
writing-mode:vertical-rl;
box-shadow:0 8px 25px rgba(0,0,0,.18);
}

#offer-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.60);
backdrop-filter:blur(5px);
display:flex;
justify-content:center;
align-items:center;
z-index:9999999;
}

#offer-popup{
width:420px;
max-width:92%;
height:520px;
border-radius:24px;
position:relative;
overflow:hidden;
background:
linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.55)),
url("https://a.top4top.io/p_3832i11hs0.png");
background-size:cover;
background-position:center;
box-shadow:0 25px 70px rgba(0,0,0,.30);
animation:popupShow .35s ease;
}

.offer-content{
position:absolute;
inset:0;
padding:34px 26px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#fff;
}

#offer-close{
position:absolute;
top:14px;
left:14px;
width:32px;
height:32px;
background:rgba(255,255,255,.92);
color:#c13a3a;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:700;
cursor:pointer;
z-index:2;
}

#offer-popup h2{
font-size:25px;
font-weight:900;
line-height:1.5;
margin:0 0 8px;
color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.offer-sub{
font-size:16px;
font-weight:700;
margin:0 0 22px;
color:#fff;
}

#offer-coupon{
width:100%;
background:rgba(255,255,255,.62);
border:1px solid rgba(255,255,255,.8);
backdrop-filter:blur(8px);
padding:15px;
font-size:28px;
font-weight:900;
border-radius:14px;
margin:0 0 22px;
color:#111;
letter-spacing:1px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

.offer-text{
font-size:16px;
font-weight:800;
line-height:1.8;
margin:0 0 26px;
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.45);
}

#copyCoupon{
width:100%;
padding:15px;
border:none;
background:#c13a3a;
color:#fff;
border-radius:14px;
cursor:pointer;
font-size:17px;
font-weight:900;
box-shadow:0 10px 25px rgba(193,58,58,.35);
}

@keyframes popupShow{
from{
opacity:0;
transform:scale(.88);
}
to{
opacity:1;
transform:scale(1);
}
}

@media(max-width:768px){

#offer-popup{
width:88%;
height:470px;
border-radius:22px;
background-position:center top;
}

#offer-popup h2{
font-size:21px;
}

.offer-sub,
.offer-text{
font-size:14px;
}

#offer-coupon{
font-size:25px;
}

#offer-btn{
top:auto;
bottom:105px;
left:12px;
writing-mode:horizontal-tb;
padding:11px 14px;
border-radius:14px;
font-size:13px;
}

}

`;

document.head.appendChild(style);

});