script.js

/* ============================================
   VAANI PHARMACY — Interactive 3D Animations
   ============================================ */

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

    // === Preloader ===
    const preloader = document.getElementById('preloader');
    window.addEventListener('load', () => {
        setTimeout(() => {
            preloader.classList.add('hidden');
        }, 1500);
    });
    // Fallback
    setTimeout(() => preloader.classList.add('hidden'), 4000);

    // === Floating Particles ===
    const particlesContainer = document.getElementById('particles-container');
    const particleColors = ['#00b894', '#00cec9', '#0984e3', '#6c5ce7', '#fd79a8'];
    
    function createParticle() {
        const particle = document.createElement('div');
        particle.className = 'particle';
        const size = Math.random() * 6 + 2;
        const color = particleColors[Math.floor(Math.random() * particleColors.length)];
        const left = Math.random() * 100;
        const duration = Math.random() * 20 + 15;
        const delay = Math.random() * 10;

        particle.style.cssText = `
            width: ${size}px;
            height: ${size}px;
            background: ${color};
            left: ${left}%;
            animation-duration: ${duration}s;
            animation-delay: ${delay}s;
        `;
        particlesContainer.appendChild(particle);
    }
    for (let i = 0; i < 30; i++) createParticle();

    // === Navbar Scroll Effect ===
    const navbar = document.getElementById('navbar');
    const backToTop = document.getElementById('backToTop');
    let lastScrollY = 0;

    window.addEventListener('scroll', () => {
        const scrollY = window.scrollY;
        
        // Navbar
        if (scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }

        // Back to top
        if (scrollY > 500) {
            backToTop.classList.add('visible');
        } else {
            backToTop.classList.remove('visible');
        }

        // Active nav link
        updateActiveNavLink();
        lastScrollY = scrollY;
    });

    backToTop.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    // === Mobile Menu ===
    const menuToggle = document.getElementById('menuToggle');
    const navLinks = document.getElementById('navLinks');

    menuToggle.addEventListener('click', () => {
        menuToggle.classList.toggle('active');
        navLinks.classList.toggle('open');
        document.body.style.overflow = navLinks.classList.contains('open') ? 'hidden' : '';
    });

    navLinks.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', () => {
            menuToggle.classList.remove('active');
            navLinks.classList.remove('open');
            document.body.style.overflow = '';
        });
    });

    // === Active Nav Link on Scroll ===
    function updateActiveNavLink() {
        const sections = document.querySelectorAll('section[id]');
        const scrollPosition = window.scrollY + 120;

        sections.forEach(section => {
            const top = section.offsetTop;
            const height = section.offsetHeight;
            const id = section.getAttribute('id');
            const link = document.querySelector(`.nav-link[href="#${id}"]`);

            if (link) {
                if (scrollPosition >= top && scrollPosition < top + height) {
                    document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                    link.classList.add('active');
                }
            }
        });
    }

    // === Scroll Animations (Intersection Observer) ===
    const observerOptions = {
        root: null,
        rootMargin: '0px 0px -60px 0px',
        threshold: 0.1
    };

    const scrollObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                scrollObserver.unobserve(entry.target);
            }
        });
    }, observerOptions);

    document.querySelectorAll('.animate-on-scroll').forEach(el => {
        scrollObserver.observe(el);
    });

    // === Counter Animation ===
    function animateCounter(element, target) {
        const duration = 2000;
        const step = target / (duration / 16);
        let current = 0;

        const timer = setInterval(() => {
            current += step;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            element.textContent = Math.floor(current).toLocaleString();
        }, 16);
    }

    const counterObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const counters = entry.target.querySelectorAll('.stat-number');
                counters.forEach(counter => {
                    const target = parseInt(counter.getAttribute('data-count'));
                    animateCounter(counter, target);
                });
                counterObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });

    const statsSection = document.querySelector('.hero-stats');
    if (statsSection) counterObserver.observe(statsSection);

    // === 3D Card Tilt Effect ===
    const hero3dCard = document.querySelector('.hero-3d-card');
    if (hero3dCard) {
        const heroVisual = document.querySelector('.hero-visual');
        
        heroVisual.addEventListener('mousemove', (e) => {
            const rect = heroVisual.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            const rotateX = ((y - centerY) / centerY) * -8;
            const rotateY = ((x - centerX) / centerX) * 8;

            hero3dCard.style.transform = `perspective(1200px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
        });

        heroVisual.addEventListener('mouseleave', () => {
            hero3dCard.style.transform = 'perspective(1200px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
        });
    }

    // === 3D Tilt for All card-3d Elements ===
    document.querySelectorAll('.card-3d').forEach(card => {
        card.addEventListener('mousemove', (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            const rotateX = ((y - centerY) / centerY) * -5;
            const rotateY = ((x - centerX) / centerX) * 5;

            card.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-4px)`;
        });

        card.addEventListener('mouseleave', () => {
            card.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) translateY(0px)';
        });
    });

    // === Reviews Carousel ===
    const reviewsTrack = document.getElementById('reviewsTrack');
    const carouselPrev = document.getElementById('carouselPrev');
    const carouselNext = document.getElementById('carouselNext');
    const carouselDots = document.getElementById('carouselDots');
    
    if (reviewsTrack) {
        const reviewCards = reviewsTrack.querySelectorAll('.review-card');
        let currentSlide = 0;
        let cardsPerView = getCardsPerView();
        let totalPages = Math.ceil(reviewCards.length / cardsPerView);
        let isDragging = false;
        let startX = 0;
        let scrollLeft = 0;
        let autoPlayInterval;

        function getCardsPerView() {
            if (window.innerWidth <= 480) return 1;
            if (window.innerWidth <= 768) return 1;
            if (window.innerWidth <= 1024) return 2;
            return 3;
        }

        function getCardWidth() {
            const card = reviewCards[0];
            if (!card) return 404;
            return card.offsetWidth + 24; // card width + gap
        }

        function createDots() {
            carouselDots.innerHTML = '';
            for (let i = 0; i < totalPages; i++) {
                const dot = document.createElement('div');
                dot.className = `carousel-dot${i === 0 ? ' active' : ''}`;
                dot.addEventListener('click', () => goToSlide(i));
                carouselDots.appendChild(dot);
            }
        }

        function updateDots() {
            carouselDots.querySelectorAll('.carousel-dot').forEach((dot, i) => {
                dot.classList.toggle('active', i === currentSlide);
            });
        }

        function goToSlide(index) {
            const cardWidth = getCardWidth();
            currentSlide = Math.max(0, Math.min(index, totalPages - 1));
            const translateX = currentSlide * cardsPerView * cardWidth;
            const maxTranslate = (reviewCards.length - cardsPerView) * cardWidth;
            reviewsTrack.style.transform = `translateX(-${Math.min(translateX, maxTranslate)}px)`;
            updateDots();
        }

        function nextSlide() {
            if (currentSlide >= totalPages - 1) {
                currentSlide = -1;
            }
            goToSlide(currentSlide + 1);
        }

        function prevSlide() {
            if (currentSlide <= 0) {
                currentSlide = totalPages;
            }
            goToSlide(currentSlide - 1);
        }

        carouselNext.addEventListener('click', () => {
            nextSlide();
            resetAutoPlay();
        });
        carouselPrev.addEventListener('click', () => {
            prevSlide();
            resetAutoPlay();
        });

        // Touch / Drag support
        reviewsTrack.addEventListener('mousedown', (e) => {
            isDragging = true;
            startX = e.pageX;
            reviewsTrack.style.transition = 'none';
        });

        reviewsTrack.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            e.preventDefault();
        });

        reviewsTrack.addEventListener('mouseup', (e) => {
            if (!isDragging) return;
            isDragging = false;
            reviewsTrack.style.transition = '';
            const diff = e.pageX - startX;
            if (Math.abs(diff) > 60) {
                if (diff < 0) nextSlide();
                else prevSlide();
            }
            resetAutoPlay();
        });

        reviewsTrack.addEventListener('mouseleave', () => {
            if (isDragging) {
                isDragging = false;
                reviewsTrack.style.transition = '';
            }
        });

        // Touch events
        reviewsTrack.addEventListener('touchstart', (e) => {
            startX = e.touches[0].pageX;
            reviewsTrack.style.transition = 'none';
        }, { passive: true });

        reviewsTrack.addEventListener('touchend', (e) => {
            reviewsTrack.style.transition = '';
            const diff = e.changedTouches[0].pageX - startX;
            if (Math.abs(diff) > 40) {
                if (diff < 0) nextSlide();
                else prevSlide();
            }
            resetAutoPlay();
        });

        // Auto-play
        function startAutoPlay() {
            autoPlayInterval = setInterval(nextSlide, 4000);
        }
        function resetAutoPlay() {
            clearInterval(autoPlayInterval);
            startAutoPlay();
        }

        // Resize handler
        window.addEventListener('resize', () => {
            cardsPerView = getCardsPerView();
            totalPages = Math.ceil(reviewCards.length / cardsPerView);
            createDots();
            goToSlide(Math.min(currentSlide, totalPages - 1));
        });

        createDots();
        startAutoPlay();
    }

    // === Smooth Reveal on Navigation Click ===
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });

    // === Parallax-like effect on hero shapes ===
    window.addEventListener('scroll', () => {
        const scrollY = window.scrollY;
        const shapes = document.querySelectorAll('.shape');
        shapes.forEach((shape, i) => {
            const speed = 0.03 * (i + 1);
            shape.style.transform = `translateY(${scrollY * speed}px)`;
        });
    });

    // === Magnetic hover effect for CTA buttons ===
    document.querySelectorAll('.btn-primary, .nav-cta').forEach(btn => {
        btn.addEventListener('mousemove', (e) => {
            const rect = btn.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;
            btn.style.transform = `translate(${x * 0.15}px, ${y * 0.15}px)`;
        });

        btn.addEventListener('mouseleave', () => {
            btn.style.transform = '';
        });
    });

    // === Text typing effect for hero title ===
    const heroTitle = document.querySelector('.hero-title');
    if (heroTitle) {
        heroTitle.style.opacity = '1';
    }

    // === Ripple effect on buttons ===
    document.querySelectorAll('.btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;

            ripple.style.cssText = `
                position: absolute;
                width: ${size}px;
                height: ${size}px;
                left: ${x}px;
                top: ${y}px;
                background: rgba(255,255,255,0.3);
                border-radius: 50%;
                transform: scale(0);
                animation: rippleEffect 0.6s ease-out;
                pointer-events: none;
            `;
            this.appendChild(ripple);
            setTimeout(() => ripple.remove(), 600);
        });
    });

    // Add ripple keyframes
    const styleSheet = document.createElement('style');
    styleSheet.textContent = `
        @keyframes rippleEffect {
            to { transform: scale(4); opacity: 0; }
        }
    `;
    document.head.appendChild(styleSheet);

    // === Glow cursor follower effect on hero section ===
    const heroSection = document.querySelector('.hero-section');
    if (heroSection) {
        const glowFollower = document.createElement('div');
        glowFollower.style.cssText = `
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0,184,148,0.08), transparent 70%);
            pointer-events: none;
            z-index: 0;
            transition: transform 0.3s ease;
        `;
        heroSection.appendChild(glowFollower);

        heroSection.addEventListener('mousemove', (e) => {
            const rect = heroSection.getBoundingClientRect();
            const x = e.clientX - rect.left - 150;
            const y = e.clientY - rect.top - 150;
            glowFollower.style.transform = `translate(${x}px, ${y}px)`;
        });
    }

    console.log('🏥 Vaani Pharmacy website loaded successfully!');
});