// إنشاء عناصر الفيديو ديناميكيًا
function createVideoReel() {
  // 1. إنشاء العناصر الأساسية
  const videoSection = document.createElement('section');
  const videoContainer = document.createElement('div');
  const videoWrapper = document.createElement('div');
  const videoElement = document.createElement('video');
  const videoSource = document.createElement('source');
  
  // 2. إضافة الكلاسات والسمات
  videoSection.className = 'video-reel-section';
  videoContainer.className = 'video-reel-container';
  videoWrapper.className = 'video-reel-wrapper';
  videoElement.className = 'video-reel';
  
  // 3. إعداد خصائص الفيديو
  videoElement.autoplay = true;
  videoElement.muted = true;
  videoElement.loop = true;
  videoElement.playsInline = true;
  videoElement.setAttribute('poster', '{{ "video-poster.jpg" | asset_url }}');
  
  // 4. إعداد مصدر الفيديو
  videoSource.src = '{{ "abla-beauty-reel.mp4" | asset_url }}';
  videoSource.type = 'video/mp4';
  
  // 5. بناء الهيكل
  videoElement.appendChild(videoSource);
  videoWrapper.appendChild(videoElement);
  videoContainer.appendChild(videoWrapper);
  videoSection.appendChild(videoContainer);
  
  // 6. إدراج القسم قبل قسم "أحدث المنتجات"
  const targetSection = document.querySelector('h2:contains("أحدث المنتجات")')?.parentElement;
  if (targetSection) {
    targetSection.parentNode.insertBefore(videoSection, targetSection);
  } else {
    document.body.prepend(videoSection);
  }
}

// إضافة الأنماط الديناميكية
function addDynamicStyles() {
  const style = document.createElement('style');
  style.textContent = `
  .video-reel-section {
    margin: 30px 0;
    padding: 20px 0;
    background: #f5f5f5;
  }
  
  .video-reel-container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }
  
  .video-reel-wrapper {
    position: relative;
    padding-top: 56.25%;
  }
  
  .video-reel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  @media (max-width: 767px) {
    .video-reel-container { width: 95%; }
    .video-reel { object-fit: contain; }
  }
  `;
  document.head.appendChild(style);
}

// التحكم في سلوك الفيديو
function handleVideoBehavior() {
  const video = document.querySelector('.video-reel');
  
  // إعادة التشغيل عند الظهور في الشاشة
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        video.play();
      } else {
        video.pause();
      }
    });
  });
  
  observer.observe(video);
  
  // تفعيل التحكم باللمس على الموبايل
  video.addEventListener('touchstart', () => {
    if (video.muted) {
      video.muted = false;
      video.controls = true;
    }
  });
}

// تهيئة جميع الوظائف
document.addEventListener('DOMContentLoaded', () => {
  addDynamicStyles();
  createVideoReel();
  handleVideoBehavior();
  
  // تأخير التحميل لتحسين الأداء
  setTimeout(() => {
    const video = document.querySelector('.video-reel');
    if (video) video.load();
  }, 500);
});

let esm = "عبلة";
let link = "https://abla-beauty.com/";
document.addEventListener("DOMContentLoaded", function () {
  document.querySelector(".copyrights p").innerHTML = `
صنع بحب 
 <a href="${link}" target="_blank">${esm}</a> | 2025  
`;
});