document.addEventListener("DOMContentLoaded", function () {

"use strict";

/* ======================
تشغيل الكود في الصفحة الرئيسية فقط
====================== */

const isHomepage =
location.pathname === "/" ||
location.pathname === "/index.php" ||
document.body.classList.contains("home") ||
document.body.classList.contains("front-page");

if (!isHomepage) return;


/* ======================
منع التكرار
====================== */

if (document.querySelector(".masar-wrapper")) return;


/* ======================
تحديد الهيدر
====================== */

const header = document.querySelector("header");

if (!header) return;


/* ======================
إنشاء الحاوية
====================== */

const wrap = document.createElement("div");

wrap.className = "masar-wrapper";

wrap.style.width = "100%";
wrap.style.maxWidth = "100%";
wrap.style.overflow = "hidden";


/* ======================
المحتوى
====================== */

wrap.innerHTML = `
<section class="masar-hero">

  <div class="masar-container masar-hero-grid">

    <div class="masar-hero-text">

      <h1>
        اتخذ قرارك المهني <span>بثقة ووضوح</span>
      </h1>

      <p>
        نساعدك على اختيار التخصص الجامعي أو المسار الوظيفي المناسب
        من خلال اختبارات علمية وجلسة إرشاد مهني مع مستشار متخصص.
      </p>

      <div class="masar-cta">

        <a href="باقة-الانطلاق-المهني/p1885523834" class="masar-btn-primary">
          احجز استشارتك الآن
        </a>

        <a href="خدماتنا/page-575272171" class="masar-btn-secondary">
          تعرف على الخدمة
        </a>

      </div>

      <div class="masar-stats">

        <div>
          <strong>1200+</strong>
          <span>طالب تم توجيهه</span>
        </div>

        <div>
          <strong>85%</strong>
          <span>اختاروا مسارهم</span>
        </div>

        <div>
          <strong>95%</strong>
          <span>رضا العملاء</span>
        </div>

      </div>

      <!-- 🔥 قسم الاعتمادات -->
      <div class="masar-accreditations">

        <h3 class="masar-accreditations-title">
          جهات الاعتماد
        </h3>

        <div class="masar-accreditations-logos">

          <img src="https://i.ibb.co/4xjQRTr/Whats-App-Image-2026-03-18-at-01-02-58.jpg" alt="اعتماد 1">

          <img src="https://i.ibb.co/x8JNWS0W/Whats-App-Image-2026-03-18-at-01-06-46.jpg" alt="اعتماد 2">

        </div>

      </div>

    </div>

    <div class="masar-hero-img">

      <img
        loading="lazy"
        decoding="async"
        src="https://i.ibb.co/nqfqbww4/businessman-meeting-with-client-free-png.webp"
        alt="career consultation">

    </div>

  </div>

</section>

<section class="masar-section">

<div class="masar-container">

<h2 class="masar-section-title">
هل تشعر بالحيرة حول مستقبلك؟
</h2>

<p class="masar-section-desc">
الكثير من الطلاب والخريجين يقضون سنوات في تخصص أو وظيفة
لا تناسب قدراتهم الحقيقية. الاستشارة المهنية تساعدك
على اكتشاف قدراتك واختيار الطريق الصحيح منذ البداية.
</p>

</div>

</section>



<section class="masar-section light">

<div class="masar-container">

<h2 class="masar-section-title">
لمن هذه الخدمة
</h2>

<div class="masar-cards">

<div class="masar-card">
<h3>طلاب الثانوية</h3>
<p>اختيار التخصص الجامعي المناسب بناءً على قدراتك واهتماماتك.</p>
</div>

<div class="masar-card">
<h3>طلاب الجامعة</h3>
<p>تحديد المسار المهني الأفضل قبل دخول سوق العمل.</p>
</div>

<div class="masar-card">
<h3>الخريجون</h3>
<p>اختيار الوظيفة المناسبة أو تغيير المسار المهني.</p>
</div>

<div class="masar-card">
<h3>الموظفون</h3>
<p>تطوير المسار الوظيفي والانتقال لمجال أفضل.</p>
</div>

</div>

</div>

</section>



<section class="masar-section">

<div class="masar-container">

<h2 class="masar-section-title">
كيف تتم الجلسة
</h2>

<div class="masar-steps">

<div class="step">
<span>1</span>
<h4>اختبار الميول المهنية</h4>
<p>تحليل شخصيتك واهتماماتك باستخدام أدوات علمية.</p>
</div>

<div class="step">
<span>2</span>
<h4>جلسة استشارة عبر Zoom</h4>
<p>جلسة مباشرة مع مستشار مهني متخصص.</p>
</div>

<div class="step">
<span>3</span>
<h4>تحليل النتائج</h4>
<p>تحليل دقيق لقدراتك والفرص المتاحة.</p>
</div>

<div class="step">
<span>4</span>
<h4>خطة مسار مهني</h4>
<p>تقرير شامل وخطة واضحة لمستقبلك المهني.</p>
</div>

</div>

</div>

</section>



<section class="masar-cta-section">

<div class="masar-container">

<h2>ابدأ رحلتك المهنية بثقة</h2>

<p>
احجز جلستك الآن واحصل على خطة واضحة لمستقبلك المهني.
</p>

<a href="باقة-الانطلاق-المهني/p1885523834" class="masar-btn-primary big">
احجز استشارة الآن
</a>

</div>

</section>

`;


/* ======================
إدراج السكاشن بعد الهيدر
====================== */

header.insertAdjacentElement("afterend", wrap);

});


document.addEventListener("DOMContentLoaded", function () {

"use strict";

/* تشغيل الكود فقط في الصفحة الرئيسية */

const isHomepage =
location.pathname === "/" ||
location.pathname === "/index.php" ||
document.body.classList.contains("home") ||
document.body.classList.contains("front-page");

if (!isHomepage) return;


/* تحديد الفوتر */

const footer = document.querySelector(".store-footer-footer");

if (!footer) return;


/* منع التكرار */

if (footer.querySelector(".footer-grid")) return;


/* ======================
Wave
====================== */

const wave = document.createElement("div");

wave.className = "footer-wave";

wave.innerHTML = `
<svg viewBox="0 0 1440 100" preserveAspectRatio="none">
<path
fill="#ffffff"
d="M0,64L60,58.7C120,53,240,43,360,48C480,53,600,75,720,80C840,85,960,75,1080,58.7C1200,43,1320,21,1380,10.7L1440,0L1440,0L0,0Z">
</path>
</svg>
`;

footer.prepend(wave);


/* ======================
Footer Content
====================== */

const footerInner = footer.querySelector(".store-footer__inner");

if (!footerInner) return;

const grid = document.createElement("div");

grid.className = "footer-grid";

grid.innerHTML = `

<div>

<h3 class="footer-title">بصمة للمسار المهني</h3>

<p>
منصة سعودية متخصصة في الإرشاد المهني
ومساعدة الطلاب والخريجين على اختيار
المسار الأكاديمي والوظيفي المناسب
وبناء مستقبل مهني ناجح.
</p>

</div>


<div>

<h3 class="footer-title">روابط مهمة</h3>

<div class="footer-links">

<a href="/about">عن المرشد</a>

<a href="/services">خدماتنا</a>

<a href="/faq">الأسئلة الشائعة</a>

<a href="/contact">تواصل معنا</a>

</div>

</div>


<div>

<h3 class="footer-title">تواصل معنا</h3>

<div class="footer-contact">

📱 +966552013867  
<br>
✉️ info@masarpathsa.com  
<br>
📍 المملكة العربية السعودية

</div>

</div>

`;

footerInner.prepend(grid);


/* ======================
Footer Bottom
====================== */

const bottom = document.createElement("div");

bottom.className = "footer-bottom";

bottom.innerHTML = `

<div>

© ${new Date().getFullYear()} بصمة المسار المهني

</div>

<div class="footer-payments">

<img src="https://cdn.salla.network/media/payments/mada.svg">
<img src="https://cdn.salla.network/media/payments/visa.svg">
<img src="https://cdn.salla.network/media/payments/mastercard.svg">
<img src="https://cdn.salla.network/media/payments/applepay.svg">

</div>

`;

footerInner.appendChild(bottom);

});


(function(){

if (window.location.pathname !== "/" && window.location.pathname !== "/home") return;

const images = [
"https://i.ibb.co/pgpNWTr/Artboard-1-1.webp",
"https://i.ibb.co/Wvnt5vZc/Artboard-1-copy.webp",
"https://i.ibb.co/xK54J2K5/Artboard-1-copy-3.webp",
"https://i.ibb.co/svQpR1cW/Artboard-1-copy-2.webp",
"https://i.ibb.co/pgpNWTr/Artboard-1-1.webp",
"https://i.ibb.co/Wvnt5vZc/Artboard-1-copy.webp",
"https://i.ibb.co/xK54J2K5/Artboard-1-copy-3.webp",
"https://i.ibb.co/svQpR1cW/Artboard-1-copy-2.webp"
];

// SECTION
const section = document.createElement("section");
section.className = "reviews-section";

section.innerHTML = `
<h2 class="reviews-title">آراء عملائنا</h2>
<p class="reviews-subtitle">تجارب حقيقية من عملائنا تثبت جودة منتجاتنا </p>

<div class="slider">
  <div class="fade left"></div>
  <div class="fade right"></div>
  <div class="slider-track"></div>
</div>
`;

document.querySelector("footer")?.before(section);

// TRACK
const track = section.querySelector(".slider-track");

// تكرار الصور
[...images, ...images].forEach(src => {
  const slide = document.createElement("div");
  slide.className = "slide";

  slide.innerHTML = `<img src="${src}" />`;

  track.appendChild(slide);
});

// CSS
const style = document.createElement("style");
style.innerHTML = `
/* قسم الاعتمادات */
.masar-accreditations {
  margin-top: 40px;
  padding: 25px 20px;
  text-align: center;
  background: linear-gradient(180deg, #f9fbfc 0%, #ffffff 100%);
  border-radius: 12px;
}

/* العنوان */
.masar-accreditations-title {
  font-size: 18px;
  color: #32808c;
  margin-bottom: 10px;
  letter-spacing: 1px;
  font-weight: 600;
}

/* الكونتينر */
.masar-accreditations-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* كارت لكل لوجو */
.masar-accreditations-logos img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  padding: 10px;
  background: #fff;
  border-radius: 10px;

  /* ظل خفيف */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  /* تأثير هادئ */
  filter: grayscale(100%);
  opacity: 0.75;

  transition: all 0.35s ease;
}

/* Hover احترافي */
.masar-accreditations-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-5px) scale(1.05);

  /* Glow بسيط بلون الهوية */
  box-shadow: 0 8px 20px rgba(50, 128, 140, 0.25);
}

/* Animation دخول */
.masar-accreditations-logos img {
  animation: fadeUp 0.6s ease forwards;
  opacity: 0;
}

/* تأخير بسيط لكل عنصر */
.masar-accreditations-logos img:nth-child(1) {
  animation-delay: 0.1s;
}
.masar-accreditations-logos img:nth-child(2) {
  animation-delay: 0.2s;
}

@keyframes fadeUp {
  from {
    transform: translateY(15px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 0.75;
  }
}

/* موبايل */
@media (max-width: 768px) {
  .masar-accreditations {
    padding: 20px 15px;
  }

  .masar-accreditations-logos img {
    width: 85px;
    height: 55px;
  }
}
.reviews-section {
  padding: 70px 0;
  text-align: center;
  background: #f9fbfd;
}

.reviews-title {
  font-size: 42px;
  color: #32808c;
  font-weight: bold;
}

.reviews-subtitle {
  margin-bottom: 40px;
  color: #777;
}

/* Slider */
.slider {
  position: relative;
  overflow: hidden;
}

/* Fade edges */
.fade {
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.fade.left {
  left: 0;
  background: linear-gradient(to right, #f9fbfd, transparent);
}

.fade.right {
  right: 0;
  background: linear-gradient(to left, #f9fbfd, transparent);
}

/* Track */
.slider-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

/* Slide */
.slide {
  flex: 0 0 auto;
  width: 350px;
  height: 350px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Image FULL بدون قص */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* focus effect */
.slide {
  opacity: 0.6;
}

.slide.active {
  transform: scale(1.1);
  opacity: 1;
}

/* Responsive */
@media(max-width:768px){
  .slide {
    width: 180px;
    height: 300px;
  }
}
`;

document.head.appendChild(style);

// 🔥 Animation + center focus
let pos = 0;
const speed = 0.4;

function animate(){
  pos += speed;

  if(pos >= track.scrollWidth / 2){
    pos = 0;
  }

  track.style.transform = `translateX(${-pos}px)`;

  // تحديد العنصر اللي في النص
  const slides = [...track.children];
  const center = window.innerWidth / 2;

  slides.forEach(slide => {
    const rect = slide.getBoundingClientRect();
    const slideCenter = rect.left + rect.width / 2;

    if(Math.abs(center - slideCenter) < rect.width / 2){
      slide.classList.add("active");
    } else {
      slide.classList.remove("active");
    }
  });

  requestAnimationFrame(animate);
}

animate();

})();