document.addEventListener("DOMContentLoaded", function () {
  // ✅ شغّل الكود بس لو ده الهوم (غير الكلاس لو عندك كلاس مختلف)
  if (!document.querySelector(".main-banner")) return;

  // ===================== فيديوهات الطبخ =====================
  const videos = [
    { src: "https://vegfod.com/uploads/videos/68326e4b34b75.mp4", title: "بيتزا مارجريتا" },
    { src: "https://vegfod.com/uploads/videos/68326e2c6b7d5.mp4", title: "سمبوسة كبيرة" },
    { src: "https://vegfod.com/uploads/videos/68326e5e40116.mp4", title: "سمبوسة صغيرة" },
    { src: "https://vegfod.com/uploads/videos/68326e0a4c779.mp4", title: "ناجتس نباتي" },
    { src: "https://vegfod.com/uploads/videos/68326ca6394f8.mp4", title: "برجر نباتي" },
    { src: "https://vegfod.com/uploads/videos/15_1755452064446_68326e3dd1b0c.mp4", title: "بيتزا بطعم 4 أجبان " }
  ];

  const videoSection = document.createElement("section");
  videoSection.className = "custom-video-section container";
  videoSection.innerHTML = `
    <h2 class="video-main-title"> وصفات نباتية</h2>
    <p class="video-sub-title">تعلم كيف تطبخ ألذ الأطباق مع فيديوهاتنا التعليمية</p>
    <div class="main-video-wrapper">
      <video id="mainVideo" controls preload="none" muted>
        <source src="${videos[0].src}" type="video/mp4">
      </video>
    </div>
    <div class="video-list">
      ${videos.map((v, i) => `
        <div class="video-item ${i === 0 ? 'active' : ''}" data-src="${v.src}">
          <div class="play-icon">▶</div>
          <p>${v.title}</p>
        </div>
      `).join("")}
    </div>
  `;

  let allSections = document.querySelectorAll("section");
  if (allSections.length >= 5) {
    allSections[4].insertAdjacentElement("afterend", videoSection);
  } else {
    document.body.appendChild(videoSection);
  }

  const mainVideo = videoSection.querySelector("#mainVideo");
  const items = videoSection.querySelectorAll(".video-item");

  items.forEach(item => {
    item.addEventListener("click", () => {
      const src = item.getAttribute("data-src");
      mainVideo.src = src;
      mainVideo.play();
      mainVideo.muted = false;
      items.forEach(i => i.classList.remove("active"));
      item.classList.add("active");
    });
  });

  // ===================== بانر =====================
  const bannerImage = "https://vegfod.com/uploads/videos/07.jpg";
  const bannerLink = "https://vegfod.shop/ar/%D8%A7%D9%84%D8%A8%D8%A7%D9%82%D8%A7%D8%AA/c1246292386";

  const bannerSection = document.createElement("section");
  bannerSection.className = "banner-section";
  bannerSection.innerHTML = `
    <div class="banner-wrapper">
      <img src="${bannerImage}" loading="lazy" class="banner-img" alt="banner">
      <a href="${bannerLink}" class="banner-btn">اشترك الآن</a>
    </div>
  `;

  allSections = document.querySelectorAll("section");
  if (allSections.length >= 3) {
    allSections[2].insertAdjacentElement("afterend", bannerSection);
  } else {
    document.body.appendChild(bannerSection);
  }

  // ===================== Coming Soon =====================
  const comingImages = [
    "https://i.ibb.co/N2fwjk65/Hot-stuff-2024-page-0008.jpg",
    "https://i.ibb.co/TDfYG2fZ/Hot-stuff-2024-page-0009.jpg",
    "https://i.ibb.co/6CnFbng/Hot-stuff-2024-page-0016.jpg",
    "https://i.ibb.co/KcdbKPGC/Hot-stuff-2024-page-0017.jpg",
    "https://i.ibb.co/zT9HfxN5/Hot-stuff-2024-page-0018.jpg",
    "https://i.ibb.co/6JmLKgnC/Hot-stuff-2024-page-0006.jpg",
    "https://vegfod.com/uploads/videos/Hot%20stuff%202024_page-0007.jpg",
    "https://vegfod.com/uploads/videos/Hot%20stuff%202024_page-0014.jpg"
  ];

  const comingSection = document.createElement("section");
  comingSection.className = "coming-soon-section";
  comingSection.innerHTML = `
    <h2 class="coming-title">منتجاتنا القادمة</h2>
    <p class="coming-subtitle">ترقبوا أحدث منتجاتنا قريبًا!</p>
    <div class="coming-grid">
      ${comingImages.map(img => `
        <div class="product-card">
          <img src="${img}" loading="lazy" alt="product">
          <div class="overlay"><p>قريبًا</p></div>
        </div>
      `).join("")}
    </div>
  `;

  allSections = document.querySelectorAll("section");
  if (allSections.length >= 8) {
    allSections[7].insertAdjacentElement("afterend", comingSection);
  } else {
    document.body.appendChild(comingSection);
  }

  // ===================== آراء العملاء (نسخة واحدة فقط) =====================
  const reviews = [
    { text: "بصراحة أول مرة أجرب منتجات نباتية بهذا الطعم! الجودة عالية جدًا والطعم قريب جدًا من الدجاج الحقيقي.", name: "أحمد", stars: 5 },
    { text: "منتجاتكم غيرت نظرتي للأكل النباتي، لذيذة وسهلة التحضير ومناسبة لنمط حياتي الصحي.", name: "ليلى", stars: 5 },
    { text: "الناغتس النباتي عندكم ممتاز جدًا، مقرمش من الخارج وطري من الداخل، حتى الأطفال حبوه.", name: "سامي", stars: 5 },
    { text: "أكثر شيء عجبني هو التنوع في المنتجات، من البرجر إلى السمبوسة، وكلها بنفس الجودة.", name: "منى", stars: 5 },
    { text: "خيار رائع لأي شخص يبغى يقلل اللحوم بدون ما يتنازل عن الطعم.", name: "خالد", stars: 5 },
    { text: "تغليف ممتاز وتوصيل سريع، واضح أن الشركة مهتمة بالتفاصيل.", name: "سلوي", stars: 5 },
    { text: "أخيرًا شركة سعودية تقدم منتجات نباتية بهذا المستوى العالمي 👏", name: "حسن", stars: 5 },
    { text: "أنصح فيها بقوة، خاصة للناس اللي تبغى بدائل نظيفة وصحية.", name: "محمد", stars: 5 },
    { text: "خيار رائع لأي شخص يبغى يقلل اللحوم بدون ما يتنازل عن الطعم.", name: "ميار", stars: 5 }
  ];

  const reviewSection = document.createElement("section");
  reviewSection.className = "reviews-section";
  reviewSection.innerHTML = `
    <h2>آراء العملاء</h2>
    <div class="reviews-slider-wrapper">
      ${reviews.map(r => `
        <div class="review-card">
          <p>${r.text}</p>
          <div class="reviewer">${r.name}</div>
          <div class="stars">${"★".repeat(r.stars)}${"☆".repeat(5 - r.stars)}</div>
        </div>
      `).join("")}
    </div>
  `;

  const footer = document.querySelector("footer");
  if (footer) {
    footer.insertAdjacentElement("beforebegin", reviewSection);
  } else {
    document.body.appendChild(reviewSection);
  }

  // Slider بسيط وخفيف
  const cards = reviewSection.querySelectorAll(".review-card");
  let index = 0;
  if (cards.length > 0) {
    cards[index].classList.add("active");
    setInterval(() => {
      cards[index].classList.remove("active");
      index = (index + 1) % cards.length;
      cards[index].classList.add("active");
    }, 3000);
  }
});