script.js

// === Script for "Joined at the Hip: 6 Months of Us" ===

document.addEventListener('DOMContentLoaded', () => {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // === Navbar Scroll Effect ===
    const navbar = document.getElementById('navbar');
    const navLogo = document.getElementById('navLogo');

    function updateNavbar() {
        if (window.scrollY > 80) {
            navbar.classList.add('scrolled');
            if (navLogo) navLogo.style.opacity = '1';
        } else {
            navbar.classList.remove('scrolled');
            if (navLogo) navLogo.style.opacity = '0';
        }
    }

    window.addEventListener('scroll', updateNavbar);
    updateNavbar(); // Initial check

    // === Mobile Menu Toggle ===
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');

    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', () => {
            const isHidden = mobileMenu.classList.contains('hidden');
            if (isHidden) {
                mobileMenu.classList.remove('hidden');
                mobileMenuBtn.innerHTML = '<i data-lucide="x"></i>';
            } else {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
            }
            if (typeof lucide !== 'undefined') lucide.createIcons();
        });

        // Close mobile menu when a link is clicked
        const mobileNavLinks = mobileMenu.querySelectorAll('.mobile-nav-link');
        mobileNavLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
                if (typeof lucide !== 'undefined') lucide.createIcons();
            });
        });
    }

    // Close mobile menu when clicking outside
    document.addEventListener('click', (e) => {
        if (mobileMenu && mobileMenuBtn && !mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
            if (!mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
                if (typeof lucide !== 'undefined') lucide.createIcons();
            }
        }
    });

    // === Floating Particles in Hero ===
    const particlesContainer = document.getElementById('particlesContainer');
    if (particlesContainer) {
        const particleSymbols = ['✦', '♥', '✧', '♡', '·', '◆', '◇', '⋆'];
        for (let i = 0; i < 30; i++) {
            const particle = document.createElement('span');
            particle.className = 'particle';
            particle.textContent = particleSymbols[Math.floor(Math.random() * particleSymbols.length)];
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.fontSize = (Math.random() * 16 + 8) + 'px';
            particle.style.color = Math.random() > 0.5 ? '#81d4fa' : '#c9a96e';
            particle.style.animationDelay = Math.random() * 6 + 's';
            particle.style.animationDuration = (Math.random() * 6 + 6) + 's';
            particle.style.opacity = Math.random() * 0.3 + 0.1;
            particlesContainer.appendChild(particle);
        }
    }

    // === Intersection Observer for Scroll Animations ===
    const fadeElements = document.querySelectorAll('.fade-in-on-scroll');
    const timelineItems = document.querySelectorAll('.timeline-item');

    const observerOptions = {
        root: null,
        rootMargin: '0px 0px -60px 0px',
        threshold: 0.15
    };

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

    // Observe fade elements
    fadeElements.forEach(el => observer.observe(el));

    // Observe timeline items
    const timelineObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                timelineObserver.unobserve(entry.target);
            }
        });
    }, { rootMargin: '0px 0px -40px 0px', threshold: 0.2 });

    timelineItems.forEach(el => timelineObserver.observe(el));

    // === Memory Quiz ===
    const revealBtn = document.getElementById('revealAnswer');
    const quizAnswer = document.getElementById('quizAnswer');

    if (revealBtn && quizAnswer) {
        revealBtn.addEventListener('click', () => {
            quizAnswer.classList.remove('hidden');
            quizAnswer.classList.add('animate-answerReveal');
            revealBtn.textContent = 'Answered! 💙';
            revealBtn.disabled = true;
            revealBtn.style.opacity = '0.6';
            revealBtn.style.cursor = 'default';

            // Reset after a few seconds
            setTimeout(() => {
                quizAnswer.classList.add('hidden');
                quizAnswer.classList.remove('animate-answerReveal');
                revealBtn.textContent = 'Reveal Answer 💙';
                revealBtn.disabled = false;
                revealBtn.style.opacity = '1';
                revealBtn.style.cursor = 'pointer';
            }, 6000);
        });
    }

    // === Countdown Timer ===
    // Target: October 20, 2026 (1-year anniversary)
    const targetDate = new Date('October 20, 2026 00:00:00').getTime();

    function updateCountdown() {
        const now = new Date().getTime();
        const distance = targetDate - now;

        if (distance < 0) {
            // If the date has passed
            document.getElementById('countdownDays').textContent = '00';
            document.getElementById('countdownHours').textContent = '00';
            document.getElementById('countdownMinutes').textContent = '00';
            document.getElementById('countdownSeconds').textContent = '00';
            return;
        }

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        document.getElementById('countdownDays').textContent = String(days).padStart(2, '0');
        document.getElementById('countdownHours').textContent = String(hours).padStart(2, '0');
        document.getElementById('countdownMinutes').textContent = String(minutes).padStart(2, '0');
        document.getElementById('countdownSeconds').textContent = String(seconds).padStart(2, '0');
    }

    // Update countdown immediately and then every second
    updateCountdown();
    const countdownInterval = setInterval(updateCountdown, 1000);

    // === Smooth close mobile menu on resize ===
    window.addEventListener('resize', () => {
        if (window.innerWidth >= 768 && mobileMenu && !mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
            if (mobileMenuBtn) {
                mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
                if (typeof lucide !== 'undefined') lucide.createIcons();
            }
        }
    });

    // === Active nav link highlighting ===
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('.nav-link');

    function highlightNavLink() {
        let scrollPosition = window.scrollY + 100;

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            const sectionId = section.getAttribute('id');

            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                navLinks.forEach(link => {
                    link.style.color = '';
                    if (link.getAttribute('href') === '#' + sectionId) {
                        link.style.color = '#81d4fa';
                    }
                });
            }
        });
    }

    window.addEventListener('scroll', highlightNavLink);
});