script.js

document.addEventListener('DOMContentLoaded', function() {
    // Custom cursor elements
    const cursorDot = document.querySelector('[data-cursor-dot]');
    const cursorOutline = document.querySelector('[data-cursor-outline]');

    // Navigation elements
    const navToggle = document.querySelector('.nav-toggle');
    const navMenu = document.querySelector('.nav-menu');
    const navLinks = document.querySelectorAll('.nav-link');
    const sections = document.querySelectorAll('section');

    // Cursor tracking variables
    let mouseX = 0, mouseY = 0;
    let outlineX = 0, outlineY = 0;

    // Track mouse movement for custom cursor
    window.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;

        if (cursorDot) {
            cursorDot.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
        }
    });

    // Animate cursor outline with smooth following effect
    function animateOutline() {
        outlineX += (mouseX - outlineX) * 0.2;
        outlineY += (mouseY - outlineY) * 0.2;

        if (cursorOutline) {
            cursorOutline.style.transform = `translate(${outlineX}px, ${outlineY}px)`;
        }

        requestAnimationFrame(animateOutline);
    }
    animateOutline();

    // Make cursor bigger on interactive elements
    const interactiveElements = document.querySelectorAll('a, button, input, textarea');
    interactiveElements.forEach(el => {
        el.addEventListener('mouseenter', () => {
            if (cursorDot) cursorDot.style.transform += ' scale(2)';
            if (cursorOutline) cursorOutline.style.transform += ' scale(1.5)';
        });
        el.addEventListener('mouseleave', () => {
            if (cursorDot) cursorDot.style.transform = cursorDot.style.transform.replace(' scale(2)', '');
            if (cursorOutline) cursorOutline.style.transform = cursorOutline.style.transform.replace(' scale(1.5)', '');
        });
    });

    // Mobile navigation toggle
    if (navToggle && navMenu) {
        navToggle.addEventListener('click', function() {
            navToggle.classList.toggle('active');
            navMenu.classList.toggle('active');
        });
    }

    // Close mobile menu when clicking a link
    navLinks.forEach(link => {
        link.addEventListener('click', function() {
            if (navToggle && navMenu) {
                navToggle.classList.remove('active');
                navMenu.classList.remove('active');
            }
        });
    });

    // Create floating particles in hero section
    function createParticles() {
        const particlesContainer = document.getElementById('particles');
        if (!particlesContainer) return;

        const particleCount = 50;

        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.style.position = 'absolute';
            particle.style.width = Math.random() * 3 + 1 + 'px';
            particle.style.height = particle.style.width;
            particle.style.background = 'rgba(100, 255, 218, 0.5)';
            particle.style.borderRadius = '50%';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.animation = `float ${Math.random() * 10 + 5}s infinite ease-in-out`;
            particle.style.animationDelay = Math.random() * 5 + 's';
            particlesContainer.appendChild(particle);
        }

        // Add particle animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes float {
                0%, 100% {
                    transform: translate(0, 0) rotate(0deg);
                    opacity: 0;
                }
                10% { opacity: 1; }
                90% { opacity: 1; }
                100% {
                    transform: translate(${Math.random() * 200 - 100}px, ${Math.random() * 200 - 100}px) rotate(360deg);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
    }
    createParticles();

    // Smooth scroll for anchor links
    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',
                    block: 'start'
                });
            }
        });
    });

    // Highlight active section in navigation
    window.addEventListener('scroll', function() {
        let current = '';

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            if (pageYOffset >= sectionTop - 100) {
                current = section.getAttribute('id');
            }
        });

        navLinks.forEach(link => {
            link.style.color = '';
            if (link.getAttribute('href').slice(1) === current) {
                link.style.color = 'var(--accent-primary)';
            }
        });
    });

    // Hide navbar on scroll down, show on scroll up
    const navbar = document.querySelector('.navbar');
    let lastScroll = 0;

    window.addEventListener('scroll', () => {
        const currentScroll = window.pageYOffset;

        if (currentScroll <= 0) {
            navbar.style.boxShadow = '0 10px 30px -10px rgba(2, 12, 27, 0.7)';
        }

        if (currentScroll > lastScroll && currentScroll > 100) {
            navbar.style.transform = 'translateY(-100%)';
        } else {
            navbar.style.transform = 'translateY(0)';
        }

        lastScroll = currentScroll;
    });

    navbar.style.transition = 'transform 0.3s ease';

    // Profile photo upload functionality
    const profilePhotoContainer = document.getElementById('profilePhotoContainer');
    const profilePhotoUpload = document.getElementById('profilePhotoUpload');
    const photoPlaceholder = document.getElementById('photoPlaceholder');
    let uploadedPhoto = null;

    if (profilePhotoContainer && profilePhotoUpload) {
        // Click to upload or enlarge photo
        profilePhotoContainer.addEventListener('click', function(e) {
            if (!uploadedPhoto || e.target.closest('.profile-photo-placeholder')) {
                profilePhotoUpload.click();
            } else {
                showPhotoModal(uploadedPhoto);
            }
        });

        // Handle file upload
        profilePhotoUpload.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();

                reader.onload = function(event) {
                    if (uploadedPhoto) uploadedPhoto.remove();

                    uploadedPhoto = document.createElement('img');
                    uploadedPhoto.src = event.target.result;
                    uploadedPhoto.alt = 'Profile Photo';
                    uploadedPhoto.className = 'profile-photo';

                    photoPlaceholder.style.display = 'none';
                    profilePhotoContainer.appendChild(uploadedPhoto);

                    // Save to localStorage so it persists
                    localStorage.setItem('profilePhoto', event.target.result);
                };

                reader.readAsDataURL(file);
            }
        });

        // Load saved photo from localStorage
        const savedPhoto = localStorage.getItem('profilePhoto');
        if (savedPhoto) {
            uploadedPhoto = document.createElement('img');
            uploadedPhoto.src = savedPhoto;
            uploadedPhoto.alt = 'Profile Photo';
            uploadedPhoto.className = 'profile-photo';
            photoPlaceholder.style.display = 'none';
            profilePhotoContainer.appendChild(uploadedPhoto);
        }
    }

    // Show photo in full-screen modal
    function showPhotoModal(photo) {
        const modal = document.createElement('div');
        modal.className = 'photo-modal';

        const img = document.createElement('img');
        img.src = photo.src;
        img.alt = photo.alt;

        modal.appendChild(img);
        document.body.appendChild(modal);

        setTimeout(() => modal.classList.add('show'), 10);

        modal.addEventListener('click', () => {
            modal.classList.remove('show');
            setTimeout(() => modal.remove(), 300);
        });
    }

    // Add modal styles dynamically
    const modalStyles = document.createElement('style');
    modalStyles.textContent = `
        .photo-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            cursor: zoom-out;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .photo-modal.show {
            opacity: 1;
        }
        .photo-modal img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(100, 255, 218, 0.3);
        }
    `;
    document.head.appendChild(modalStyles);
});