const $ = (selector, parent = document) =>
    parent.querySelector(selector);

const $$ = (selector, parent = document) =>
    [...parent.querySelectorAll(selector)];

const Trappy = {

    config: {},

    dom: {},

    init() {

        this.cache();

        this.hero();

        this.features();

        this.problems();

        this.timeline();

        this.products();

        this.testimonials();

        this.faq();

    },

    cache() {

        this.config.isArabic =
        document.documentElement.lang === "ar";

        this.dom.body = document.body;
    
        this.dom.header = $("header");
    
        this.dom.hero = $("#square-static-images-0");
    
        this.dom.features = $("#s-block--features-1");
    
        this.dom.problems = $("#main-links-2");
    },

    hero(){
      if (!Trappy.dom.hero) return;
      initHero();
    },

    features(){
      initFeatures();
    },

    problems(){
      initProblems();
    },

    timeline(){},

    products(){
      initProducts();
    },

    testimonials(){
      const path = window.location.pathname;

      const isHome =
          path === "/" ||
          path === "/ar" ||
          path === "/ar/";
  
      const isProduct =
          /\/p\d+$/.test(path);
  
      if (isHome && isProduct) return;
  
      initTestimonials();
    },

    faq(){}

};

document.addEventListener("DOMContentLoaded", () => {

    Trappy.init();

});




/* =====================================================
    HERO
===================================================== */

function initHero() {
    

    const observer = new MutationObserver(() => {
  
      const howItWorks = document.querySelector(".s-block--bundle-how-it-works");
  
      if (howItWorks) {
          howItWorks.id = "how-it-works";
          observer.disconnect();
      }
  
  });
  
  observer.observe(document.body, {
      childList: true,
      subtree: true
  });

    if ($(".custom-hero")) return;

    const header = Trappy.dom.header;

    if (!header) return;

    const isArabic = Trappy.config.isArabic;

    const html = `
        <section class="custom-hero">

            <div class="container">

                <div class="hero-content">

                    <span class="hero-tag">
                        ${isArabic ? "وجبات طبيعية" : "Natural Meals"}
                    </span>

                    

                    <h1>
                        ${
                            isArabic
                                ? "تغذية طازجة.<br>لصحة تدوم."
                                : "Fresh Nutrition.<br>For lasting health."
                        }
                    </h1>

                    <p>
                        ${
                            isArabic
                                ? "٤ وجبات طبيعية متنوعة + مرق مجاني. توصيل لجميع مناطق المملكة."
                                : "4 balanced natural meals + free bone broth shipped anywhere in Saudi Arabia."
                        }
                    </p>

                    <div class="hero-buttons">

                        <a href="https://trappybites.com/ar/%D8%A7%D8%A8%D8%AF%D8%A3-%D9%85%D9%86-%D9%87%D9%86%D8%A7/c1685947731" class="hero-btn primary">
                            ${isArabic ? "اكتشف الوجبات" : "Explore Meals"}
                        </a>

                        <a href="#how-it-works" class="hero-btn secondary">
                            ${isArabic ? "لماذا نحن؟" : "Our Philosophy"}
                         </a>

                    </div>

                </div>

                <div class="hero-image">

                    <img
                        src="https://cdn.files.salla.network/homepage/666152867/0297c260-9a73-4a0d-b566-a0eda5d3002f.webp"
                        alt="${isArabic ? "وجبات طبيعية" : "Natural Meals"}"
                        loading="eager"
                        decoding="async"
                        fetchpriority="high">

                </div>

            </div>

        </section>
    `;

    header.insertAdjacentHTML("afterend", html);

}

function createTestimonialCard(card){

    const name =
        card.querySelector("h4")?.textContent.trim() || "";

    const review =
        card.querySelector("#item-text p")?.textContent.trim() || "";

    const stars =
        Number(
            card.querySelector("salla-rating-stars")
            ?.getAttribute("value")
        ) || 5;

    return `
    <div class="swiper-slide">

        <article class="testimonial-card">

            <div class="review-stars">
                ${"★".repeat(stars)}
            </div>

            <p class="review-text">
                ${review ? `<p class="review-text">${review}</p>` : ""}
            </p>

            <div class="review-footer">

                <div class="review-name">
                    ${name}
                </div>

                <span>عميل مؤكد</span>

            </div>

        </article>

    </div>
    `;
}

/* ==========================================
        PREMIUM CAROUSEL ENGINE v1
========================================== */

class PremiumCarousel {

    constructor(selector, options = {}) {

        this.root = document.querySelector(selector);

        if (!this.root) return;

        this.track = this.root.querySelector(".carousel-track");

        this.items = [...this.track.children];

        this.options = {

            desktop: 3,
            tablet: 2,
            mobile: 1,

            gap: 28,

            autoplay: true,

            delay: 4000,

            loop: true,

            speed: 600,

            ...options

        };

        this.current = 0;

        this.timer = null;
      
        this.isRTL = document.documentElement.dir === "rtl";

        this.visible = this.getVisibleSlides();

        this.init();

    }

    init(){

        this.updateWidths();

        this.createNavigation();

        this.bindEvents();

        if(this.options.autoplay){

            this.startAutoplay();

        }

    }

    getVisibleSlides(){

        if(window.innerWidth < 768){

            return this.options.mobile;

        }

        if(window.innerWidth < 1024){

            return this.options.tablet;

        }

        return this.options.desktop;

    }

    updateWidths(){

        this.visible = this.getVisibleSlides();

        const gap = this.options.gap;

        const width = this.root.clientWidth;

        this.cardWidth =
            (width - gap * (this.visible - 1)) / this.visible;

        this.track.style.display = "flex";
        
        this.track.style.gap = gap + "px";

        this.track.style.transition =
            `transform ${this.options.speed}ms ease`;

        this.items.forEach(card=>{

            card.style.flex =
                `0 0 ${this.cardWidth}px`;

        });

        this.goTo(this.current,false);
        this.root.dir = this.isRTL ? "rtl" : "ltr";

    }

    goTo(index,animate=true){

        if(animate){

            this.track.style.transition =
                `transform ${this.options.speed}ms ease`;

        }

        else{

            this.track.style.transition = "none";

        }

        const move = index * (this.cardWidth + this.options.gap);

        this.track.style.transform =
        `translateX(${this.isRTL ? move : -move}px)`;

    }

    next() {

    if (this.isRTL) {

        this.current++;

        if (this.current > this.items.length - this.visible) {
            this.current = 0;
        }

    } else {

        this.current++;

        if (this.current > this.items.length - this.visible) {
            this.current = 0;
        }

    }

    this.goTo(this.current);

}

    prev(){

        this.current--;

        if(this.current<0){

            this.current=

            this.items.length-this.visible;

        }

        this.goTo(this.current);

    }

    createNavigation() {

    const prev = document.createElement("button");
    const next = document.createElement("button");

    prev.className = "carousel-prev";
    next.className = "carousel-next";

    if (this.isRTL) {

        prev.innerHTML = "&#10094;"; // ❮
        next.innerHTML = "&#10095;"; // ❯

        prev.onclick = () => this.prev();
        next.onclick = () => this.next();

    } else {

        prev.innerHTML = "&#10094;"; // ←
        next.innerHTML = "&#10095;"; // →

        // Reverse actions in LTR
        prev.onclick = () => this.next();
        next.onclick = () => this.prev();

    }

    this.root.append(prev, next);

}

    bindEvents(){
  
      window.addEventListener(
  
          "resize",
  
          ()=>{
  
              this.updateWidths();
  
          }
  
      );
  
      this.root.addEventListener(
  
          "mouseenter",
  
          ()=>{
  
              clearInterval(this.timer);
  
          }
  
      );
  
      this.root.addEventListener(
  
          "mouseleave",
  
          ()=>{
  
              this.startAutoplay();
  
          }
  
      );
  
  }
    startAutoplay(){

    clearInterval(this.timer);

    this.timer=

    setInterval(()=>{

        this.next();

    },this.options.delay);

  }
}
/* =====================================================
    FEATURES
===================================================== */
function initFeatures() {

    const section = Trappy.dom.features;

    if (!section) return;

    const cards = $$(".s-block--features__item", section);

    const icons = [
        "https://cdn.files.salla.network/homepage/666152867/b63195d0-52e0-4ba3-8b1d-c528799bb001_360x360.webp",
        "https://cdn.files.salla.network/homepage/666152867/6a418688-fcd0-4f11-a62f-aae1037e9fd9_360x360.webp",
        "https://cdn.files.salla.network/homepage/666152867/68c8e973-b216-48c1-a512-e63260d07e31_500x500.webp"
    ];

    cards.forEach((card, index) => {

        if (!$(".animated-border", card)) {
            card.insertAdjacentHTML(
                "afterbegin",
                '<span class="animated-border"></span>'
            );
        }

        const iconWrapper = $(".feature-icon-div", card);

        if (!iconWrapper) return;

        iconWrapper.innerHTML = `
            <img
                class="feature-custom-icon"
                src="${icons[index]}"
                alt=""
                loading="lazy"
            >
        `;
    });
  section.style.opacity = "1";
}

/* =====================================================
    PROBLEMS
===================================================== */
function createProblemCard(card) {

    const image = $("img", card)?.src || "";

    const title = $("h4", card)?.textContent || "";

    const subtitle = $(".block", card)?.textContent || "";

    return `
        <article class="problem-card">

            <a href="${card.href}">

                <div class="problem-image">

                    <img src="${image}" alt="${title}">

                </div>

                <div class="problem-content">

                    <h3>${title}</h3>

                    <p>${subtitle}</p>

                </div>

            </a>

        </article>
    `;

}

function buildProblemsHTML(title, cards) {

    const isArabic = Trappy.config.isArabic;

    return `
        <div class="container">

            <div class="section-head">

                <span>
                    ${isArabic ? "لماذا ترابي بايتس" : "WHY TRAPPY BITES"}
                </span>

                <h2>${title}</h2>

            </div>

            <div class="premium-carousel problems-carousel">

                <div class="carousel-track">

                    ${cards.map(createProblemCard).join("")}

                </div>

            </div>

        </div>
    `;

}



/* =====================================================
    PRODUCTS
===================================================== */

function initProducts() {

    // Coming next

}


/* =====================================================
    PROBLEMS
===================================================== */

function initProblems() {

    const section = Trappy.dom.problems;

    if (!section) return;

    if ($(".custom-problems")) return;

    const title =
        $(".s-block__title h2", section)?.textContent || "";

    const cards =
        $$(".slide--cat-entry", section);

    if (!cards.length) return;

    section.style.display = "none";

    const custom = document.createElement("section");

    custom.className = "custom-problems";

    custom.innerHTML =
        buildProblemsHTML(title, cards);

    section.insertAdjacentElement(
        "afterend",
        custom
    );

    new PremiumCarousel(".problems-carousel", {

        desktop: 3,

        tablet: 2,

        mobile: 1,

        gap: 30,

        autoplay: true,

        delay: 3500

    });

}

/* =====================================================
    TESTIMONIALS
===================================================== */

function initTestimonials(){
  const isArabic = document.documentElement.lang.startsWith("ar");
    
  const oldSection =
      document.querySelector("section#testimonials-slider-5.s-block.s-block--testimonials");

  if(!oldSection) return;

    const cards =
        [...oldSection.querySelectorAll(".testimonials-itme")];
    if(!cards.length) return;

    oldSection.style.display = "none";

    const html = `
      <section class="premium-testimonials">
      
          <div class="container">
      
              <div class="section-head">
      
                  <span>
                      ${isArabic ? "موثوق من قبل الآلاف" : "Trusted by Thousands"}
                  </span>
      
                  <h2>
                      ${isArabic ? "قصص التحول" : "Success Stories"}
                  </h2>
      
              </div>
      
              <div class="premium-carousel testimonials-carousel">
      
                  <div class="carousel-track">
      
                      ${cards.map(createTestimonialCard).join("")}
      
                  </div>
      
              </div>
      
              <div class="testimonials-footer">
      
                  <a href="/testimonials?trappybites"
                     class="display-all-url relative border w-48 h-12 rounded m-auto overflow-hidden">
      
                      <div class="relative h-full flex items-center justify-center gap-2.5 text-sm font-bold z-1 transition-all">
      
                          <span>
                              ${isArabic ? "عرض الكل" : "View All"}
                          </span>
      
                          <i class="${
                              isArabic
                                  ? "sicon-caret-left"
                                  : "sicon-caret-right"
                          }"></i>
      
                      </div>
      
                  </a>
      
              </div>
      
          </div>
      
      </section>
      `;

    oldSection.insertAdjacentHTML("afterend", html);

    new PremiumCarousel(".testimonials-carousel",{

        desktop:3,
        tablet:2,
        mobile:1,
        autoplay:true

    });

}

  /* =====================================================
    FAQ
===================================================== */

function initFAQ() {

    // Coming later

}