Script.js

/**
 * Mangalam HDPE Pipes — script.js
 * Handles:
 *  1. Sticky header (show on scroll past fold, hide on scroll up)
 *  2. Image carousel with arrows + thumbnails
 *  3. Zoom-on-hover for carousel images
 *  4. Mobile menu toggle
 *  5. FAQ accordion
 *  6. Process tabs
 */

(function () {
    'use strict';
  
    /* =============================================
       1. STICKY HEADER
       ============================================= */
    const stickyHeader = document.getElementById('stickyHeader');
    const mainNav      = document.getElementById('mainNav');
    let lastScrollY    = window.scrollY;
  
    function onScroll() {
      const heroHeight = document.getElementById('hero').offsetTop + 200;
      const currentY   = window.scrollY;
  
      if (currentY > heroHeight) {
        // Show sticky header only when scrolling down past fold
        if (currentY > lastScrollY) {
          // scrolling down → show
          stickyHeader.classList.add('visible');
        } else {
          // scrolling up → hide
          stickyHeader.classList.remove('visible');
        }
      } else {
        stickyHeader.classList.remove('visible');
      }
  
      lastScrollY = currentY;
    }
  
    window.addEventListener('scroll', onScroll, { passive: true });
  
  
    /* =============================================
       2. IMAGE CAROUSEL
       ============================================= */
    const slides       = Array.from(document.querySelectorAll('.carousel__slide'));
    const thumbBtns    = Array.from(document.querySelectorAll('.carousel__thumb'));
    const prevBtn      = document.getElementById('prevBtn');
    const nextBtn      = document.getElementById('nextBtn');
    let   currentIndex = 0;
    let   autoInterval;
  
    function goTo(index) {
      // Wrap around
      index = ((index % slides.length) + slides.length) % slides.length;
  
      // Deactivate current
      slides[currentIndex].classList.remove('active');
      thumbBtns[currentIndex].classList.remove('active');
  
      // Activate new
      currentIndex = index;
      slides[currentIndex].classList.add('active');
      thumbBtns[currentIndex].classList.add('active');
    }
  
    prevBtn.addEventListener('click', () => { goTo(currentIndex - 1); resetAuto(); });
    nextBtn.addEventListener('click', () => { goTo(currentIndex + 1); resetAuto(); });
  
    thumbBtns.forEach((btn, i) => {
      btn.addEventListener('click', () => { goTo(i); resetAuto(); });
    });
  
    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft')  { goTo(currentIndex - 1); resetAuto(); }
      if (e.key === 'ArrowRight') { goTo(currentIndex + 1); resetAuto(); }
    });
  
    // Auto-advance
    function startAuto() {
      autoInterval = setInterval(() => goTo(currentIndex + 1), 4500);
    }
    function resetAuto() {
      clearInterval(autoInterval);
      startAuto();
    }
    startAuto();
  
    // Touch/swipe support
    const carouselStage = document.querySelector('.carousel__stage');
    let touchStartX = 0;
  
    carouselStage.addEventListener('touchstart', (e) => {
      touchStartX = e.touches[0].clientX;
    }, { passive: true });
  
    carouselStage.addEventListener('touchend', (e) => {
      const dx = e.changedTouches[0].clientX - touchStartX;
      if (Math.abs(dx) > 40) {
        goTo(dx < 0 ? currentIndex + 1 : currentIndex - 1);
        resetAuto();
      }
    });
  
  
    /* =============================================
       3. ZOOM-ON-HOVER
       Magnifies the carousel image in a preview box
       ============================================= */
    const zoomPreview = document.getElementById('zoomPreview');
    const zoomCanvas  = document.getElementById('zoomCanvas');
    const ctx         = zoomCanvas.getContext('2d');
  
    const ZOOM_FACTOR = 2.5;   // How much we zoom in
    const PREVIEW_SIZE = 260;  // Size of the zoom box
  
    zoomCanvas.width  = PREVIEW_SIZE;
    zoomCanvas.height = PREVIEW_SIZE;
  
    // We track the mouse over the carousel stage
    carouselStage.addEventListener('mousemove', handleZoom);
    carouselStage.addEventListener('mouseleave', () => {
      zoomPreview.classList.remove('active');
    });
  
    function handleZoom(e) {
      const activeSlide = slides[currentIndex];
      const img         = activeSlide.querySelector('img');
  
      if (!img.complete || img.naturalWidth === 0) return;
  
      const rect = carouselStage.getBoundingClientRect();
  
      // Mouse position relative to the image element
      const mouseX = e.clientX - rect.left;
      const mouseY = e.clientY - rect.top;
  
      // Normalised 0-1
      const ratioX = mouseX / rect.width;
      const ratioY = mouseY / rect.height;
  
      // Source coords on the actual image
      const srcW = img.naturalWidth;
      const srcH = img.naturalHeight;
  
      const srcViewW = srcW / ZOOM_FACTOR;
      const srcViewH = srcH / ZOOM_FACTOR;
  
      let srcX = ratioX * srcW - srcViewW / 2;
      let srcY = ratioY * srcH - srcViewH / 2;
  
      // Clamp
      srcX = Math.max(0, Math.min(srcW - srcViewW, srcX));
      srcY = Math.max(0, Math.min(srcH - srcViewH, srcY));
  
      // Draw to canvas
      ctx.clearRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE);
      ctx.drawImage(img, srcX, srcY, srcViewW, srcViewH, 0, 0, PREVIEW_SIZE, PREVIEW_SIZE);
  
      // Show the preview
      zoomPreview.classList.add('active');
  
      // Draw a small crosshair indicator on the stage
      drawCrosshair(mouseX, mouseY, rect.width, rect.height);
    }
  
    // Optional: draw a subtle rectangle on the main image indicating zoom area
    function drawCrosshair(mx, my, stageW, stageH) {
      // This is purely cosmetic — handled via CSS ::after pseudo or we do it on a canvas overlay
      // We'll just move the lens element
      const lensEl = slides[currentIndex].querySelector('.zoom-lens');
      if (lensEl) {
        const lensW = stageW / ZOOM_FACTOR;
        const lensH = stageH / ZOOM_FACTOR;
        lensEl.style.cssText = `
          position: absolute;
          left: ${mx - lensW / 2}px;
          top: ${my - lensH / 2}px;
          width: ${lensW}px;
          height: ${lensH}px;
          border: 1.5px solid rgba(255,255,255,.7);
          background: rgba(255,255,255,.1);
          border-radius: 4px;
          pointer-events: none;
          z-index: 5;
        `;
      }
    }
  
    carouselStage.addEventListener('mouseleave', () => {
      slides.forEach(s => {
        const lens = s.querySelector('.zoom-lens');
        if (lens) lens.style.cssText = '';
      });
    });
  
  
    /* =============================================
       4. MOBILE MENU
       ============================================= */
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu    = document.getElementById('mobileMenu');
  
    mobileMenuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('open');
      // Animate hamburger → X
      const spans = mobileMenuBtn.querySelectorAll('span');
      const isOpen = mobileMenu.classList.contains('open');
      if (isOpen) {
        spans[0].style.transform = 'translateY(7px) rotate(45deg)';
        spans[1].style.opacity   = '0';
        spans[2].style.transform = 'translateY(-7px) rotate(-45deg)';
      } else {
        spans[0].style.transform = '';
        spans[1].style.opacity   = '';
        spans[2].style.transform = '';
      }
    });
  
    // Close mobile menu on link click
    mobileMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        mobileMenu.classList.remove('open');
      });
    });
  
  
    /* =============================================
       5. FAQ ACCORDION
       ============================================= */
    const faqItems = Array.from(document.querySelectorAll('.faq-item'));
  
    faqItems.forEach(item => {
      const btn = item.querySelector('.faq-question');
      btn.addEventListener('click', () => {
        const isActive = item.classList.contains('active');
  
        // Close all
        faqItems.forEach(i => i.classList.remove('active'));
  
        // Open clicked (toggle)
        if (!isActive) {
          item.classList.add('active');
        }
      });
    });
  
  
    /* =============================================
       6. PROCESS TABS
       ============================================= */
    const processData = {
      raw: {
        title: 'High-Grade Raw Material Selection',
        desc: 'Vacuum sizing tanks ensure precise outer diameter while internal pressure maintains perfect roundness and wall thickness uniformity.',
        bullets: ['PE100 grade material', 'Optimal molecular weight distribution'],
        img: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=500&q=80',
      },
      extrusion: {
        title: 'Precision Extrusion Process',
        desc: 'Advanced twin-screw extruders process PE100 compound at controlled temperatures to achieve optimal melt consistency and molecular alignment.',
        bullets: ['Temperature-controlled extrusion', 'Consistent melt flow index'],
        img: 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=500&q=80',
      },
      cooling: {
        title: 'Controlled Cooling',
        desc: 'Water bath cooling systems gradually reduce pipe temperature while maintaining dimensional stability and preventing warping or stress cracks.',
        bullets: ['Gradual temperature reduction', 'Dimensional stability maintained'],
        img: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=500&q=80',
      },
      sizing: {
        title: 'Precision Sizing & Calibration',
        desc: 'Vacuum sizing ensures the pipe maintains exact dimensions as it cools, achieving tight tolerances on OD, ID, and wall thickness.',
        bullets: ['±0.1mm dimensional tolerance', 'Vacuum sizing technology'],
        img: 'https://images.unsplash.com/photo-1513828583688-c52646db42da?w=500&q=80',
      },
      quality: {
        title: 'Rigorous Quality Control',
        desc: 'Every pipe undergoes hydrostatic pressure testing, dimensional inspection, and material property verification before leaving the production floor.',
        bullets: ['100% hydrostatic testing', 'Real-time dimensional monitoring'],
        img: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=500&q=80',
      },
      marking: {
        title: 'Identification Marking',
        desc: 'Laser or inkjet marking systems print product details, pressure ratings, batch numbers, and certification marks directly onto each pipe.',
        bullets: ['Permanent laser marking', 'Full traceability data'],
        img: 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=500&q=80',
      },
      cutting: {
        title: 'Precision Cutting & Length Control',
        desc: 'Automated saw units cut pipes to exact specified lengths with clean, perpendicular cuts ensuring proper joint-making in the field.',
        bullets: ['Automated length control', 'Clean perpendicular cuts'],
        img: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=500&q=80',
      },
      packaging: {
        title: 'Protective Packaging',
        desc: 'Pipes are bundled, strapped, and protected with UV-stabilised end caps before shipping to ensure they arrive in perfect condition.',
        bullets: ['UV-stabilised protection', 'Secure bundling & strapping'],
        img: 'https://images.unsplash.com/photo-1513828583688-c52646db42da?w=500&q=80',
      },
    };
  
    const processTabs    = Array.from(document.querySelectorAll('.process-tab'));
    const processText    = document.getElementById('processText');
    const processImg     = document.getElementById('processImg');
  
    processTabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const key = tab.dataset.process;
        const data = processData[key];
        if (!data) return;
  
        // Update active tab
        processTabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
  
        // Fade content
        processText.style.opacity = '0';
        processImg.style.opacity  = '0';
  
        setTimeout(() => {
          // Update text
          processText.innerHTML = `
            <h3>${data.title}</h3>
            <p>${data.desc}</p>
            <ul class="process-bullets">
              ${data.bullets.map(b => `<li><span class="bullet-dot"></span>${b}</li>`).join('')}
            </ul>
          `;
  
          // Update image
          processImg.src = data.img;
          processImg.alt = data.title;
  
          // Fade back in
          processText.style.transition = 'opacity .3s ease';
          processImg.style.transition  = 'opacity .3s ease';
          processText.style.opacity = '1';
          processImg.style.opacity  = '1';
        }, 200);
      });
    });
  
    // Process image arrows (cycle through process steps)
    const processImgPrev = document.getElementById('processImgPrev');
    const processImgNext = document.getElementById('processImgNext');
    const processKeys    = Object.keys(processData);
    let   processIdx     = 0;
  
    function navigateProcess(dir) {
      processIdx = ((processIdx + dir) + processKeys.length) % processKeys.length;
      processTabs.forEach(t => t.classList.remove('active'));
      const targetTab = document.querySelector(`[data-process="${processKeys[processIdx]}"]`);
      if (targetTab) {
        targetTab.classList.add('active');
        targetTab.click();
      }
    }
  
    processImgPrev.addEventListener('click', () => navigateProcess(-1));
    processImgNext.addEventListener('click', () => navigateProcess(1));
  
  
    /* =============================================
       7. SMOOTH SCROLL for anchor links
       ============================================= */
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', (e) => {
        const target = document.querySelector(anchor.getAttribute('href'));
        if (target) {
          e.preventDefault();
          const offset = 80; // Account for sticky header
          const top = target.getBoundingClientRect().top + window.scrollY - offset;
          window.scrollTo({ top, behavior: 'smooth' });
        }
      });
    });
  
  
    /* =============================================
       8. INTERSECTION OBSERVER — animate on scroll
       ============================================= */
    const animateEls = document.querySelectorAll(
      '.feature-card, .portfolio-card, .testimonial-card, .specs-table-wrapper, .resource-item'
    );
  
    // Add initial state
    animateEls.forEach(el => {
      el.style.opacity    = '0';
      el.style.transform  = 'translateY(24px)';
      el.style.transition = 'opacity .5s ease, transform .5s ease';
    });
  
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry, i) => {
        if (entry.isIntersecting) {
          // Stagger: delay by index within visible batch
          setTimeout(() => {
            entry.target.style.opacity   = '1';
            entry.target.style.transform = 'translateY(0)';
          }, i * 80);
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
  
    animateEls.forEach(el => observer.observe(el));
  
  
    /* =============================================
       9. CATALOGUE FORM (simple UX feedback)
       ============================================= */
    const catalogueForm = document.querySelector('.catalogue-cta__form');
    if (catalogueForm) {
      const input = catalogueForm.querySelector('input[type="email"]');
      const btn   = catalogueForm.querySelector('button');
      btn.addEventListener('click', () => {
        if (!input.value || !input.value.includes('@')) {
          input.style.borderColor = '#ef4444';
          input.focus();
          setTimeout(() => { input.style.borderColor = ''; }, 2000);
        } else {
          btn.textContent = '✓ Sent!';
          btn.style.background = '#16a34a';
          input.value = '';
          setTimeout(() => {
            btn.textContent = 'Request Catalogue';
            btn.style.background = '';
          }, 3000);
        }
      });
    }
  
    /* =============================================
       10. CONTACT FORM (simple UX feedback)
       ============================================= */
    const contactFormBtn = document.querySelector('.btn--primary-full');
    if (contactFormBtn) {
      contactFormBtn.addEventListener('click', () => {
        contactFormBtn.textContent = '✓ Request Submitted!';
        contactFormBtn.style.background = '#16a34a';
        setTimeout(() => {
          contactFormBtn.textContent = 'Request Custom Quote';
          contactFormBtn.style.background = '';
        }, 3000);
      });
    }
  
  })();