// ====================================هدر===========================
const headerMenuBtn = document.querySelector('.header-menu-toggle');
const headerMobileMenu = document.querySelector('.header-mobile-menu');
const headerCloseBtn = document.querySelector('.header-mobile-close');

headerMenuBtn.addEventListener('click', () => {
  headerMobileMenu.classList.add('active');
  document.body.classList.add('menu-open');
});

headerCloseBtn.addEventListener('click', () => {
  headerMobileMenu.classList.remove('active');
  document.body.classList.remove('menu-open');
});
// ==========================هیروسکشن===================================

window.addEventListener('load', () => {
  const bgWord = document.querySelector('.hero-bg-word');
  const header = document.querySelector('.hero-header');
  const content = document.querySelector('.hero-content');
  const pieces = document.querySelectorAll('.piece');

  const heroSection = document.querySelector('.hero-section');

  const observer = new IntersectionObserver(
    ([entry]) => {
      if (!entry.isIntersecting) {
        header.classList.add('sticky');
      } else {
        header.classList.remove('sticky');
      }
    },
    {
      threshold: 0.05,
    }
  );

  observer.observe(heroSection);
  const inovaDuration = 2800;
  const pauseAfterInova = 600;

  const headerDuration = 800;
  const contentDuration = 600;

  const pauseAfterContent = 600;

  const piecesDuration = 1000;

  // STEP 1
  setTimeout(() => {
    bgWord.style.animation = 'revealInova 500ms ease-out 150ms forwards';
  }, 0);

  // STEP 2
  setTimeout(() => {
    header.style.animation = 'showHeader .8s ease forwards';

    content.style.animation = 'showContent .6s ease forwards';
  }, 1200);

  // STEP 3
  setTimeout(() => {
    pieces.forEach((piece) => {
      piece.style.animation = `risePiece 1200ms ease-in-out forwards`;
    });
  }, 1800);

  // STEP 4
  setTimeout(() => {
    pieces.forEach((piece, index) => {
      piece.style.animation += `,
      floating ${4 + index}s ease-in-out 2000ms infinite`;
    });
  }, 2400);
});

const wrapper = document.querySelector('.words-wrapper');

let index = 0;

setInterval(() => {
  index = (index + 1) % 3;

  wrapper.style.transform = `translateY(-${index * 50}px)`;
}, 1400);

// =============== جدیدترین نمونه کارها ======================================
function initRelatedSection(section) {
  const cards = section.querySelectorAll('.related-card');

  cards.forEach((card) => {
    const container = card.querySelector('.media-container');

    if (!container) return;
    if (container.dataset.initialized === 'true') return;
    container.dataset.initialized = 'true';

    const progressCircle = card.querySelector('.progress-circle');
    const type = container.dataset.type;
    const src = container.dataset.src;

    if (!type || !src) return;

    card.classList.add(type === 'video' ? 'is-video' : 'is-image');
    if (type === 'video') {
      const ext = src.split('.').pop().toLowerCase();
      const video = document.createElement('video');
      video.muted = true;
      video.playsInline = true;
      video.preload = 'metadata';

      const source = document.createElement('source');
      source.src = src;
      source.type = `video/${ext}`;

      video.appendChild(source);
      container.appendChild(video);

      if (!progressCircle) return;
      const radius = progressCircle.r.baseVal.value;
      const circumference = 2 * Math.PI * radius;
      progressCircle.style.strokeDasharray = circumference;
      progressCircle.style.strokeDashoffset = circumference;

      let stopTimeout;

      card.addEventListener('mouseenter', async () => {
        clearTimeout(stopTimeout);

        try {
          video.currentTime = 0;

          await video.play();

          progressCircle.style.transition = 'none';
          progressCircle.style.strokeDashoffset = circumference;

          requestAnimationFrame(() => {
            progressCircle.style.transition = 'stroke-dashoffset 5s linear';

            progressCircle.style.strokeDashoffset = 0;
          });

          stopTimeout = setTimeout(() => {
            video.pause();
            video.currentTime = 0;

            progressCircle.style.transition = 'none';
            progressCircle.style.strokeDashoffset = circumference;
          }, 5000);
        } catch (err) {
          console.error(err);
        }
      });

      card.addEventListener('mouseleave', () => {
        clearTimeout(stopTimeout);

        video.pause();
        video.currentTime = 0;

        progressCircle.style.transition = 'none';
        progressCircle.style.strokeDashoffset = circumference;
      });
      card.addEventListener('click', () => {
        if (type === 'video') {
          openVideoPopup(src);
        } else {
          openImagePopup(src);
        }
      });
    } else if (type === 'image') {
      const img = document.createElement('img');
      img.src = src;
      img.alt = 'portfolio';

      container.appendChild(img);
    }
  });
}
function initGalleryFilter(section) {
  const tabs = section.querySelectorAll('.tabs button');
  const cards = section.querySelectorAll('.related-card');

  tabs.forEach((tab) => {
    tab.addEventListener('click', () => {
      tabs.forEach((btn) => {
        btn.classList.remove('current');
      });

      tab.classList.add('current');

      const text = tab.querySelector('.txt')?.textContent.trim();
      cards.forEach((card) => {
        const media = card.querySelector('.media-container');
        if (!media) return;

        const type = media.dataset.type;
        if (text === 'همه') {
          card.style.display = '';
        } else if (text === 'ویدیو') {
          if (type === 'video') {
            card.style.display = '';
          } else {
            card.style.display = 'none';
          }
        } else if (text === 'تصاویر') {
          if (type === 'image') {
            card.style.display = '';
          } else {
            card.style.display = 'none';
          }
        }
      });
    });
  });
}

document.querySelectorAll('.related-content p').forEach((item) => {
  item.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
  });
});
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-related-section]').forEach((section) => {
    initRelatedSection(section);
    initGalleryFilter(section);
  });
});
// relatedCards.forEach((card, index) => {
//   card.addEventListener('click', (e) => {
//     if (e.target.closest('.play-btn')) return;

//     openPopupByIndex(index + 1);
//   });
// });

const revealElements = document.querySelectorAll('.reveal-top');

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('active');
        observer.unobserve(entry.target);
      }
    });
  },
  {
    threshold: 0.2,
  }
);

revealElements.forEach((el) => observer.observe(el));
// =========================================== 300پروژه ================================================

document.addEventListener('DOMContentLoaded', () => {
  const stats = [
    { number: '1.5X', text: 'افزایش رشد/فروش' },
    { number: '45+', text: 'تعداد مشتریان' },
    { number: '91%', text: 'رضایت کارفرمایان' },
    { number: '300+', text: 'پروژه موفق' },
  ];

  const numberEl = document.getElementById('mobileNumber');
  const textEl = document.getElementById('mobileText');
  const content = document.querySelector('.mobile-content');

  let index = 0;

  setInterval(() => {
    content.classList.add('fade-out');

    setTimeout(() => {
      index = (index + 1) % stats.length;

      numberEl.textContent = stats[index].number;
      textEl.textContent = stats[index].text;

      content.classList.remove('fade-out');
    }, 500);
  }, 3000);
});

const slider = document.querySelector('.op-box');
const cards = document.querySelectorAll('.op-card');
const pagination = document.querySelector('.op-pagination');

let cardWidth;
let cardsPerPage;
let totalPages;

function setupSlider() {
  const style = window.getComputedStyle(slider);
  const gap = parseInt(style.gap) || 0;

  cardWidth = cards[0].offsetWidth + gap;

  cardsPerPage = Math.round(slider.offsetWidth / cardWidth);
  if (cardsPerPage < 1) cardsPerPage = 1;

  totalPages = Math.ceil(cards.length / cardsPerPage);

  pagination.innerHTML = '';

  for (let i = 0; i < totalPages; i++) {
    const dot = document.createElement('div');
    dot.classList.add('op-dot');

    if (i === 0) dot.classList.add('active');

    dot.addEventListener('click', () => {
      const scrollPosition = i * cardsPerPage * cardWidth;

      slider.scrollTo({
        left: scrollPosition,
        behavior: 'smooth',
      });
    });

    pagination.appendChild(dot);
  }
}

setupSlider();

window.addEventListener('resize', setupSlider);

slider.addEventListener('scroll', () => {
  const index = Math.round(Math.abs(slider.scrollLeft) / cardWidth);
  const page = Math.floor(index / cardsPerPage);

  const dots = document.querySelectorAll('.op-dot');

  dots.forEach((d) => d.classList.remove('active'));

  if (dots[page]) {
    dots[page].classList.add('active');
  }
});
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;

  slider.style.cursor = 'grabbing';
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
  slider.style.cursor = 'grab';
});

slider.addEventListener('mouseup', () => {
  isDown = false;
  slider.style.cursor = 'grab';
});

slider.addEventListener('mousemove', (e) => {
  if (!isDown) return;
  e.preventDefault();

  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 2;
  slider.scrollLeft = scrollLeft - walk;
});
slider.style.cursor = 'grab';

// ========================================

document.querySelectorAll('.slider-track').forEach((track) => {
  const items = Array.from(track.children);
  items.forEach((item) => track.appendChild(item.cloneNode(true)));
});

// ================================درباره اینوا=============================
const thumbnail = document.getElementById('videoThumbnail');
const video = document.getElementById('aboutVideo');

thumbnail.addEventListener('click', () => {
  thumbnail.style.display = 'none';

  video.style.display = 'block';

  video.play();
});