document.addEventListener("DOMContentLoaded", function () {
  /* منع تكرار الهيرو */
  if (document.querySelector(".jadeer-hero-section")) return;

  /* إنشاء الهيرو */
  const hero = document.createElement("section");
  hero.className = "jadeer-hero-section";

  hero.innerHTML = `
    <div class="jadeer-hero-inner">
      <div class="jadeer-hero-kicker">استوديو هوية مهنية</div>

      <h1 class="jadeer-hero-title">
        جدير
        <span>ابنِ حضورك المهني بثقة</span>
      </h1>

      <div class="jadeer-rotating-line">
        <span>نصمم لك</span>
        <strong id="jadeerRotatingText">سيرة ذاتية احترافية</strong>
      </div>

      <p class="jadeer-hero-text">
        نطوّر سيرتك الذاتية، حساب LinkedIn، والخطاب التعريفي
        بصياغة واضحة واحترافية تبرز قيمتك أمام جهات التوظيف.
      </p>

      <div class="jadeer-hero-actions">
        <a href="/categories" class="jadeer-hero-btn primary">استعرض الباقات</a>
        <a href="/products" class="jadeer-hero-btn secondary">تصفح الخدمات</a>
      </div>

      <div class="jadeer-hero-badges">
        <span class="jadeer-hero-badge">سيرة ذاتية احترافية</span>
        <span class="jadeer-hero-badge">تحسين LinkedIn</span>
        <span class="jadeer-hero-badge">صياغة ATS</span>
        <span class="jadeer-hero-badge">خطاب تعريفي</span>
      </div>
    </div>
  `;

  /* تحديد مكان إدراج الهيرو بعد الهيدر */
  const header =
    document.querySelector("header") ||
    document.querySelector(".store-header") ||
    document.querySelector(".salla-header") ||
    document.querySelector(".main-header") ||
    document.querySelector(".navbar");

  if (header && header.parentNode) {
    header.insertAdjacentElement("afterend", hero);
  } else {
    document.body.insertAdjacentElement("afterbegin", hero);
  }

  /* النصوص المتحركة */
  const jadeerWords = [
    "سيرة ذاتية احترافية",
    "حساب LinkedIn أقوى",
    "خطاب تعريفي مقنع",
    "ملف مهني جاهز للتقديم",
    "حضور مهني يبرز قيمتك",
    "صياغة مناسبة لأنظمة ATS"
  ];

  let jadeerIndex = 0;
  const rotatingText = document.getElementById("jadeerRotatingText");

  if (rotatingText) {
    setInterval(function () {
      rotatingText.classList.add("is-changing");

      setTimeout(function () {
        jadeerIndex = (jadeerIndex + 1) % jadeerWords.length;
        rotatingText.textContent = jadeerWords[jadeerIndex];
        rotatingText.classList.remove("is-changing");
      }, 260);
    }, 2200);
  }
});