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 rgba(212,180,106,.35);
color:#D4B46A;
}

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

.icon-cart svg,
.icon-eye svg{
stroke:#D4B46A;
}

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

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

.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);

}

});