scripts.js

document.addEventListener('DOMContentLoaded', () => {
  const logo = document.querySelector('.animated-logo');
  const tagline = document.querySelector('.tagline');

  if (logo && tagline) {
    gsap.set(logo, { x: -200, opacity: 0 });
    gsap.set(tagline, { opacity: 0, y: 20 });

    const tl = gsap.timeline({ delay: 0.3 });

    tl.to(logo, { x: 0, opacity: 1, duration: 1, ease: 'power3.out' })
      .to(logo, { scale: 1.08, duration: 0.25, ease: 'power2.out' }, '-=0.1')
      .to(logo, { scale: 1, duration: 0.2, ease: 'power2.inOut' })
      .to(logo, { boxShadow: '0 0 60px rgba(212,166,74,0.5)' }, '-=0.3')
      .to(logo, { boxShadow: '0 0 30px rgba(212,166,74,0.35)' }, '-=0.1')
      .to(tagline, { opacity: 1, y: 0, duration: 0.5, ease: 'power2.out' }, '-=0.15');
  }

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

  document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));

  const navLinks = document.querySelectorAll('.nav a');
  const sections = document.querySelectorAll('section[id]');

  function highlightNav() {
    const scrollPos = window.scrollY + 100;
    sections.forEach(section => {
      const top = section.offsetTop;
      const height = section.offsetHeight;
      const id = section.getAttribute('id');
      if (scrollPos >= top && scrollPos < top + height) {
        navLinks.forEach(link => {
          link.classList.remove('active');
          if (link.getAttribute('href') === '#' + id) {
            link.classList.add('active');
          }
        });
      }
    });
  }

  window.addEventListener('scroll', highlightNav);
  highlightNav();

  const showcase = document.querySelector('[data-showcase]');
  if (!showcase) return;

  const slides = showcase.querySelectorAll('.video-slide');
  const dotsContainer = showcase.querySelector('[data-dots]');
  const textSlides = showcase.querySelectorAll('.text-slide');
  const carousel = showcase.querySelector('.showcase-carousel');
  const slideCount = slides.length;
  let currentIndex = 0;
  let hoverTimeout = null;

  for (let i = 0; i < slideCount; i++) {
    const dot = document.createElement('button');
    dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
    if (i === 0) dot.classList.add('active');
    dotsContainer.appendChild(dot);
  }
  const dots = dotsContainer.querySelectorAll('button');

  function updateCarousel(index) {
    currentIndex = index;
    slides.forEach((s, i) => {
      const diff = i - index;
      s.classList.remove('prev', 'active', 'next');
      if (diff === -1) s.classList.add('prev');
      else if (diff === 0) s.classList.add('active');
      else if (diff === 1) s.classList.add('next');
    });
    textSlides.forEach((t, i) => t.classList.toggle('active', i === index));
    dots.forEach((d, i) => d.classList.toggle('active', i === index));
    const currentVideo = slides[index].querySelector('video');
    currentVideo.currentTime = 0;
    currentVideo.play();
  }

  dots.forEach((dot, i) => {
    dot.addEventListener('click', () => updateCarousel(i));
  });

  carousel.addEventListener('mousemove', (e) => {
    const rect = carousel.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const width = rect.width;
    clearTimeout(hoverTimeout);
    if (x < width * 0.35 && currentIndex > 0) {
      hoverTimeout = setTimeout(() => updateCarousel(currentIndex - 1), 300);
    } else if (x > width * 0.65 && currentIndex < slideCount - 1) {
      hoverTimeout = setTimeout(() => updateCarousel(currentIndex + 1), 300);
    }
  });

  carousel.addEventListener('mouseleave', () => clearTimeout(hoverTimeout));

  slides.forEach(slide => {
    const video = slide.querySelector('video');
    slide.addEventListener('mouseenter', () => {
      video.currentTime = 0;
      video.play();
    });
  });

  setTimeout(() => updateCarousel(0), 100);

  const muteBtn = document.querySelector('.mute-btn');
  const iconMuted = muteBtn?.querySelector('.icon-muted');
  const iconUnmuted = muteBtn?.querySelector('.icon-unmuted');
  let isMuted = true;

  if (muteBtn) {
    muteBtn.addEventListener('click', () => {
      isMuted = !isMuted;
      slides.forEach(slide => {
        const video = slide.querySelector('video');
        video.muted = isMuted;
      });
      if (iconMuted && iconUnmuted) {
        iconMuted.style.display = isMuted ? 'block' : 'none';
        iconUnmuted.style.display = isMuted ? 'none' : 'block';
      }
    });
  }

  const workSection = document.getElementById('work');
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  let autoPlayEnabled = false;

  const workObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (!isMobile) {
        autoPlayEnabled = entry.isIntersecting;
        if (autoPlayEnabled) {
          const activeSlide = carousel.querySelector('.video-slide.active video');
          if (activeSlide) {
            activeSlide.currentTime = 0;
            activeSlide.play();
          }
        } else {
          slides.forEach(slide => {
            const video = slide.querySelector('video');
            video.pause();
          });
        }
      }
    });
  }, { threshold: 0.3 });

  if (workSection && !isMobile) {
    workObserver.observe(workSection);
  }

  slides.forEach((slide, index) => {
    const video = slide.querySelector('video');
    video.addEventListener('ended', () => {
      if (!isMobile && autoPlayEnabled) {
        const nextIndex = (index + 1) % slideCount;
        updateCarousel(nextIndex);
      }
    });
  });
});