const Company = {title: "Digital Leaders Group",anchor: "https://dlgroup.agency/"}
document.querySelector("footer .copyright-text").innerHTML = `<p class="text-gray-400 mb-2.5 md:mb-0"> تصميم و برمجه بواسطه <a href="${Company.anchor}" class="hover:text-primary" style="font-weight:bold;" target="_blank" rel="noreferrer"> ${Company.title} </a> </p>`;
////////////////////////////////////////////////
const wrapper = document.createElement("div");
wrapper.id = "scrollToTopWrapper";

const scrollBtn = document.createElement("div");
scrollBtn.id = "scrollToTopButton";
scrollBtn.innerHTML = "&#9650;";

Object.assign(wrapper.style, {
  position: "fixed",
  bottom: "30px",
  right: "30px",
  width: "50px",
  height: "50px",
  borderRadius: "50%",
  background: "#241204",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  zIndex: "9999",
  opacity: "0",
  pointerEvents: "none",
  transition: "opacity 0.4s ease",
});

Object.assign(scrollBtn.style, {
  width: "46px",
  height: "46px",
  backgroundColor: "#241204",
  color: "#fff",
  borderRadius: "50%",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  fontSize: "20px",
  fontWeight: "bold",
  boxShadow: "0 8px 16px rgba(0,0,0,0.3)",
  cursor: "pointer",
  transition: "transform 0.2s ease",
});

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

window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  const scrolledPercent = (scrollTop / scrollHeight) * 100;

  wrapper.style.background = `conic-gradient(#241204 ${scrolledPercent}%, #eee ${scrolledPercent}%)`;

  if (scrollTop > 200) {
    wrapper.style.opacity = "1";
    wrapper.style.pointerEvents = "auto";
  } else {
    wrapper.style.opacity = "0";
    wrapper.style.pointerEvents = "none";
  }
});

scrollBtn.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

wrapper.appendChild(scrollBtn);

document.body.appendChild(wrapper);

////////////////////////////////////////
const scrollItems = [
  { icon: "💰", text: "أسعار تنافسية" },
  { icon: "📞", text: "خدمة عملاء متميزة" },
  { icon: "🚚", text: "توصيل سريع" },
  { icon: "✅", text: "منتجات عالية الجودة" },
  { icon: "🔒", text: "دفع آمن" },
  { icon: "⏰", text: "دعم 24/7" }
];

const style = document.createElement("style");
style.textContent = `
  .marquee-container {
    width: 100%;
    overflow: hidden;
    background: #241204;
    padding: 10px 0;
    direction: rtl;
    font-family: inherit;
    position: relative;
    height: 30px;
  }
  .marquee-track {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
  }
  .marquee-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: white;
    padding: 0 30px;
    white-space: nowrap;
  }
`;
document.head.appendChild(style);

const container = document.createElement("div");
container.className = "marquee-container";

const track = document.createElement("div");
track.className = "marquee-track";
container.appendChild(track);
document.body.insertBefore(container, document.body.firstChild);

scrollItems.forEach(({ icon, text }) => {
  const item = document.createElement("div");
  item.className = "marquee-item";
  item.innerHTML = `<span>${icon}</span><span>${text}</span>`;
  track.appendChild(item);
});

let offset = 0;
let speed = 0.2; 
let currentIndex = 0;

function loop() {
  offset -= speed;
  track.style.transform = `translateX(${offset}px)`;

  const trackRightEdge = track.scrollWidth + offset;
  if (trackRightEdge < container.offsetWidth) {
    const { icon, text } = scrollItems[currentIndex % scrollItems.length];
    const newItem = document.createElement("div");
    newItem.className = "marquee-item";
    newItem.innerHTML = `<span>${icon}</span><span>${text}</span>`;
    track.appendChild(newItem);
    currentIndex++;
  }

  requestAnimationFrame(loop);
}

loop();