script.js

// ===========================
// Smooth Scroll & Navigation
// ===========================

// Mobile Navigation Toggle
const navToggle = document.getElementById('navToggle');
const navMenu = document.getElementById('navMenu');
const navLinks = document.querySelectorAll('.nav-link');

if (navToggle) {
    navToggle.addEventListener('click', () => {
        navToggle.classList.toggle('active');
        navMenu.classList.toggle('active');
        document.body.style.overflow = navMenu.classList.contains('active') ? 'hidden' : '';
    });
}

// Close mobile menu when clicking on a link
navLinks.forEach(link => {
    link.addEventListener('click', () => {
        navToggle?.classList.remove('active');
        navMenu?.classList.remove('active');
        document.body.style.overflow = '';
    });
});

// Navbar scroll effect
const navbar = document.getElementById('navbar');
let lastScroll = 0;

window.addEventListener('scroll', () => {
    const currentScroll = window.pageYOffset;
    
    if (currentScroll > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
    
    lastScroll = currentScroll;
});

// Active navigation link on scroll
window.addEventListener('scroll', () => {
    let current = '';
    const sections = document.querySelectorAll('section[id]');

    // If there are no sections with IDs on the page (for example the Learn page),
    // avoid the previous behavior that treated an empty `current` as matching
    // every href (because every string includes the empty string). Instead,
    // set the active link by matching the current page filename.
    if (sections.length === 0) {
        const page = location.pathname.split('/').pop(); // e.g. downloads.html
        navLinks.forEach(link => {
            link.classList.remove('active');
            const href = link.getAttribute('href') || '';
            if (page && href.includes(page)) {
                link.classList.add('active');
            }
        });
        return;
    }

    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if (scrollY >= (sectionTop - 200)) {
            current = section.getAttribute('id');
        }
    });

    // Only add the active class when we have a non-empty `current` section id.
    navLinks.forEach(link => {
        link.classList.remove('active');
        if (current) {
            const href = link.getAttribute('href') || '';
            if (href.includes('#' + current) || href.includes(current)) {
                link.classList.add('active');
            }
        }
    });
});

// ===========================
// Scroll Animations
// ===========================

const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

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

// Observe all fade-in elements
document.addEventListener('DOMContentLoaded', () => {
    const fadeElements = document.querySelectorAll('.fade-in-up, .fade-in');
    fadeElements.forEach(el => observer.observe(el));
});

// Ensure any old anchors that point to `index.html#about` or `#about`
// are normalized to the dedicated `about.html` page. This fixes cases
// where cached HTML or legacy links still point to the anchor and
// cause navigation back to the homepage instead of the About page.
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('a[href]').forEach(a => {
        const href = a.getAttribute('href');
        if (!href) return;
        // Normalize links like '#about' or 'index.html#about' to 'about.html'
        if (href === '#about' || href.endsWith('#about') || href.includes('index.html#about')) {
            a.setAttribute('href', 'about.html');
        }
    });
});

// ===========================
// Back to Top Button
// ===========================

const backToTopButton = document.getElementById('backToTop');

if (backToTopButton) {
    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
            backToTopButton.classList.add('visible');
        } else {
            backToTopButton.classList.remove('visible');
        }
    });
    
    backToTopButton.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
}

// ===========================
// Smooth Scroll for Anchor Links
// ===========================

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        const href = this.getAttribute('href');
        if (href === '#') return;
        
        e.preventDefault();
        const target = document.querySelector(href);
        
        if (target) {
            const offsetTop = target.offsetTop - 80;
            window.scrollTo({
                top: offsetTop,
                behavior: 'smooth'
            });
        }
    });
});

// ===========================
// Loading Animation
// ===========================

window.addEventListener('load', () => {
    document.body.classList.add('loaded');
});

// ===========================
// Floating Cards Animation (Hero Section)
// ===========================

function removeMobileHeroCards() {
    // Desktop detection (width > 1024px)
    const isDesktop = window.innerWidth > 1024;
    const heroImage = document.querySelector('.hero-image');

    if (!isDesktop && heroImage) {
        heroImage.remove();
        console.log('Hero cards removed on mobile device');
    } else if (isDesktop && heroImage) {
        // Ensure hero image is visible
        heroImage.style.display = '';
        // Apply animation delays for floating cards
        const floatingCards = document.querySelectorAll('.floating-card');
        floatingCards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.5}s`;
            card.style.visibility = 'visible';
        });
    }
}

// Run on DOM ready
document.addEventListener('DOMContentLoaded', removeMobileHeroCards);

// Also run immediately in case DOM is already loaded
if (document.readyState === 'loading') {
    // Still loading
} else {
    removeMobileHeroCards();
}

// ===========================
// Download Tracking (Optional Analytics)
// ===========================

const downloadLinks = document.querySelectorAll('a[download], a[href$=".pdf"]');

downloadLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        const fileName = link.getAttribute('href').split('/').pop();
        console.log(`Download initiated: ${fileName}`);
        
        // You can add Google Analytics or other tracking here
        // Example: gtag('event', 'download', { 'file_name': fileName });
    });
});

// ===========================
// Parallax Effect (Optional)
// ===========================

window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    const heroGradient = document.querySelector('.hero-gradient');
    
    if (heroGradient) {
        heroGradient.style.transform = `translateY(${scrolled * 0.5}px)`;
    }
});

// ===========================
// Card Hover Effects Enhancement
// ===========================

const cards = document.querySelectorAll('.content-card, .workshop-card, .tip-card');

cards.forEach(card => {
    card.addEventListener('mouseenter', function() {
        this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
    });
});

// ===========================
// Performance Optimization
// ===========================

// Lazy load images
if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
        img.src = img.dataset.src;
    });
} else {
    // Fallback for browsers that don't support lazy loading
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js';
    document.body.appendChild(script);
}

// ===========================
// Accessibility Enhancements
// ===========================

// Skip to main content
document.addEventListener('DOMContentLoaded', () => {
    const skipLink = document.createElement('a');
    skipLink.href = '#main';
    skipLink.className = 'skip-link';
    skipLink.textContent = 'Skip to main content';
    skipLink.style.cssText = `
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--primary-color);
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
    `;
    
    skipLink.addEventListener('focus', () => {
        skipLink.style.top = '0';
    });
    
    skipLink.addEventListener('blur', () => {
        skipLink.style.top = '-40px';
    });
    
    document.body.insertBefore(skipLink, document.body.firstChild);
});

// Keyboard navigation enhancement
document.addEventListener('keydown', (e) => {
    // Escape key closes mobile menu
    if (e.key === 'Escape' && navMenu?.classList.contains('active')) {
        navToggle?.classList.remove('active');
        navMenu?.classList.remove('active');
        document.body.style.overflow = '';
    }
});

// ===========================
// Print Styles Handler
// ===========================

window.addEventListener('beforeprint', () => {
    document.body.classList.add('printing');
});

window.addEventListener('afterprint', () => {
    document.body.classList.remove('printing');
});

// ===========================
// Dynamic Year in Footer
// ===========================

const yearElements = document.querySelectorAll('.current-year');
yearElements.forEach(el => {
    el.textContent = new Date().getFullYear();
});

// ===========================
// Error Handling for Images
// ===========================

document.querySelectorAll('img').forEach(img => {
    img.addEventListener('error', function() {
        this.style.display = 'none';
        console.warn(`Failed to load image: ${this.src}`);
    });
});

// ===========================
// Smooth Page Transitions
// ===========================

document.addEventListener('DOMContentLoaded', () => {
    document.body.style.opacity = '0';
    
    setTimeout(() => {
        document.body.style.transition = 'opacity 0.5s ease';
        document.body.style.opacity = '1';
    }, 10);
});

// ===========================
// Interactive Workshop Cards
// ===========================

// Note: workshop card hover styling is handled in CSS (.workshop-card:hover).
// Removed the previous JS that set inline border colors on link hover because
// it could leave inline styles behind and cause persistent purple outlines.

// Clear any leftover inline border-color on workshop cards (fixes persistent outline)
document.addEventListener('DOMContentLoaded', () => {
    const workshopCards = document.querySelectorAll('.workshop-card');
    workshopCards.forEach(card => {
        // remove inline border-color property if present
        if (card.style && card.style.borderColor) {
            card.style.removeProperty('border-color');
        }
    });
});

// ===========================
// Progress Bar on Scroll (Optional)
// ===========================

function createProgressBar() {
    const progressBar = document.createElement('div');
    progressBar.id = 'scroll-progress';
    progressBar.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        z-index: 9999;
        transition: width 0.2s ease;
    `;
    document.body.appendChild(progressBar);
    
    window.addEventListener('scroll', () => {
        const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrolled = (window.scrollY / windowHeight) * 100;
        progressBar.style.width = scrolled + '%';
    });
}

// Uncomment to enable scroll progress bar
// createProgressBar();

// ===========================
// Console Welcome Message
// ===========================

console.log('%c🔐 CyberSafe', 'font-size: 24px; font-weight: bold; color: #4F46E5;');
console.log('%cPractical Cybersecurity for Everyone', 'font-size: 14px; color: #6B7280;');
console.log('%cStay safe online! 🛡️', 'font-size: 12px; color: #10B981;');

// ===========================
// Service Worker Registration (for PWA)
// ===========================

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        // Uncomment when you create a service worker file
        // navigator.serviceWorker.register('/sw.js')
        //     .then(registration => console.log('SW registered'))
        //     .catch(err => console.log('SW registration failed'));
    });
}