main.js

/* ============================================================
   THREAD & BONE — Main JavaScript
   Navigation, scroll animations, FAQ, contact form
   ============================================================ */

(function () {
  'use strict';

  // ---- Scroll Reveal (IntersectionObserver) ----
  const revealElements = document.querySelectorAll('.anim-reveal');
  if (revealElements.length) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
    );
    revealElements.forEach((el) => observer.observe(el));
  }

  // ---- Navbar scroll effect ----
  const nav = document.getElementById('mainNav');
  function handleNavScroll() {
    if (window.scrollY > 60) {
      nav.classList.add('scrolled');
    } else {
      nav.classList.remove('scrolled');
    }
  }
  window.addEventListener('scroll', handleNavScroll, { passive: true });
  handleNavScroll();

  // ---- Mobile Menu ----
  const menuToggle = document.getElementById('menuToggle');
  const mobileMenu = document.getElementById('mobileMenu');
  if (menuToggle && mobileMenu) {
    menuToggle.addEventListener('click', () => {
      menuToggle.classList.toggle('open');
      mobileMenu.classList.toggle('open');
      document.body.style.overflow = mobileMenu.classList.contains('open') ? 'hidden' : '';
    });
    mobileMenu.querySelectorAll('a').forEach((link) => {
      link.addEventListener('click', () => {
        menuToggle.classList.remove('open');
        mobileMenu.classList.remove('open');
        document.body.style.overflow = '';
      });
    });
  }

  // ---- FAQ Accordion ----
  const faqItems = document.querySelectorAll('.faq-item');
  faqItems.forEach((item) => {
    const question = item.querySelector('.faq-question');
    if (question) {
      question.addEventListener('click', () => {
        const isOpen = item.classList.contains('open');
        faqItems.forEach((i) => i.classList.remove('open'));
        if (!isOpen) item.classList.add('open');
      });
    }
  });

  // ---- Contact Form ----
  const contactForm = document.getElementById('contactForm');
  const formSuccess = document.getElementById('formSuccess');
  if (contactForm && formSuccess) {
    contactForm.addEventListener('submit', (e) => {
      e.preventDefault();
      contactForm.style.display = 'none';
      formSuccess.style.display = 'block';
    });
  }

  // ---- Newsletter ----
  const nlInput = document.querySelector('.newsletter-input');
  const nlBtn = document.querySelector('.newsletter-form .btn');
  if (nlInput && nlBtn) {
    nlBtn.addEventListener('click', (e) => {
      e.preventDefault();
      if (nlInput.value.includes('@')) {
        nlInput.value = '';
        nlBtn.textContent = 'Subscribed!';
        nlBtn.style.pointerEvents = 'none';
        setTimeout(() => {
          nlBtn.textContent = 'Subscribe';
          nlBtn.style.pointerEvents = '';
        }, 3000);
      }
    });
  }

  // ---- Smooth page transitions (skip external / shop links) ----
  document.querySelectorAll('a[href]').forEach((link) => {
    // Skip links that are handled by config.js (external shop links)
    if (link.hasAttribute('data-shop-link')) return;

    if (
      link.hostname === window.location.hostname &&
      !link.hash &&
      link.href !== window.location.href &&
      link.getAttribute('href') !== '#'
    ) {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const href = link.getAttribute('href');
        document.body.style.transition = 'opacity 0.3s';
        document.body.style.opacity = '0';
        setTimeout(() => {
          window.location.href = href;
        }, 280);
      });
    }
  });

  // Fade in on load
  window.addEventListener('pageshow', () => {
    document.body.style.transition = 'opacity 0.4s';
    document.body.style.opacity = '1';
  });
  document.body.style.opacity = '0';
  requestAnimationFrame(() => {
    document.body.style.transition = 'opacity 0.4s ease';
    document.body.style.opacity = '1';
  });
})();