script.js

// =========================================
// Project Data
// =========================================
const projectsData = {
    "1": {
        title: "AI-Based Wrong-Way Traffic Offense Detection System",
        image: "assets/project1.png",
        description: "An intelligent traffic monitoring system that automatically detects wrong-way driving violations from CCTV footage using Computer Vision. The system processes uploaded traffic videos, tracks vehicle movement direction, flags violations, and generates evidence frames to support enforcement.",
        features: [
            "Vehicle detection using deep learning models (YOLO-based)",
            "Multi-object tracking for movement analysis",
            "Direction detection logic to identify wrong-way violations",
            "Automatic extraction of evidence frames with timestamps",
            "Optional number plate recognition (ANPR) for enforcement support",
            "Violation summary dashboard with visual overlays"
        ],
        techStack: ["Python", "FastAPI", "MongoDB", "YOLO (Ultralytics)", "OpenCV", "React"],
        demoLink: "https://wrong-way-ai.vercel.app/",
        repoLink: "https://github.com/Sayeed-5/WrongWayAI"
    },
    "2": {
        title: "Interstellar Asteroid Tracker & Risk Analyzer",
        image: "assets/project2.png",
        description: "A full-stack web platform for real-time monitoring of Near-Earth Objects (NEOs), integrating live NASA NeoWs API data to provide trajectory insights, risk categorization, and proximity-based alerts through an intuitive space-themed dashboard",
        features: [
            "Real-time asteroid data feed (velocity, diameter, miss distance) via NASA NeoWs API",
            "Risk Analysis Engine categorizing objects by hazardous status and dynamic risk score",
            "User authentication with JWT for saving and tracking watched asteroids",
            "Automated close-approach alert system with dashboard notifications",
            "Dockerized multi-container deployment using Docker Compose"
        ],
        techStack: ["React", "Express", "Node.js", "MongoDB", "NASA NeoWs API", "JWT Authentication", "Docker & Docker Compose", "Socket.io"],
        demoLink: "https://cosmic-watch-eosin.vercel.app/",
        repoLink: "https://github.com/Nityananda2005/Cosmic-Watch"
    },
    "3": {
        title: "AgriSphere – AI-Powered Agri-Tech Platform",
        image: "assets/project3.png",
        description: "A full-stack agri-tech platform designed to modernize farming by combining AI-driven crop disease detection, an education hub, and a direct farmer-to-buyer marketplace in a single unified system.",
        features: [
            "AI-based plant disease detection using image analysis",
            "AI chatbot for instant agricultural guidance and queries",
            "Education hub with modern farming practices and government schemes",
            "Direct marketplace (AgriMart) enabling farmers to sell produce without middlemen",
            "Product and order management dashboard with real-time updates",
            "Secure authentication and user management"
        ],
        techStack: ["React", "Tailwind CSS", "Firebase Authentication", "Firebase Firestore", "Gemini API"],
        demoLink: "https://agri-sphare.vercel.app/",
        repoLink: "https://github.com/Sayeed-5/AgriSphere"
    }
};

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

    // =========================================
    // Custom Cursor
    // =========================================
    const cur = document.getElementById('cur');
    const ring = document.getElementById('cur-ring');
    let mx = 0, my = 0, rx = 0, ry = 0;

    document.addEventListener('mousemove', e => {
        mx = e.clientX;
        my = e.clientY;
    });

    (function loop() {
        cur.style.left = mx + 'px';
        cur.style.top  = my + 'px';
        rx += (mx - rx) * 0.1;
        ry += (my - ry) * 0.1;
        ring.style.left = rx + 'px';
        ring.style.top  = ry + 'px';
        requestAnimationFrame(loop);
    })();

    document.querySelectorAll('a, button, input, textarea, .project-card, .hackathon-card, .focus-card-new, .ct-soc').forEach(el => {
        el.addEventListener('mouseenter', () => {
            cur.style.transform  = 'translate(-50%,-50%) scale(.3)';
            ring.style.transform = 'translate(-50%,-50%) scale(1.8)';
            ring.style.borderColor = 'var(--accent)';
        });
        el.addEventListener('mouseleave', () => {
            cur.style.transform  = 'translate(-50%,-50%) scale(1)';
            ring.style.transform = 'translate(-50%,-50%) scale(1)';
            ring.style.borderColor = 'rgba(200,241,53,.4)';
        });
    });

    // =========================================
    // Theme Toggle Logic
    // =========================================
    const themeToggleBtn = document.getElementById('theme-toggle');
    const htmlElement = document.documentElement;

    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        htmlElement.setAttribute('data-theme', savedTheme);
    } else {
        htmlElement.setAttribute('data-theme', 'dark');
    }

    themeToggleBtn.addEventListener('click', () => {
        const currentTheme = htmlElement.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        htmlElement.setAttribute('data-theme', newTheme);
        localStorage.setItem('theme', newTheme);
    });

    // =========================================
    // Mobile Menu Toggle
    // =========================================
    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
    const navLinks = document.getElementById('nav-links');

    mobileMenuBtn.addEventListener('click', () => {
        navLinks.classList.toggle('active');
    });

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

    // =========================================
    // Navbar Scroll & Active Link Highlight
    // =========================================
    const navbar = document.getElementById('navbar');
    const sections = document.querySelectorAll('section, header');
    const navItems = document.querySelectorAll('.nav-link');

    const handleScroll = () => {
        // Navbar scrolled state
        navbar.classList.toggle('scrolled', scrollY > 50);

        // Active nav link
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            if (scrollY >= (sectionTop - 100)) {
                current = section.getAttribute('id');
            }
        });

        navItems.forEach(li => {
            li.classList.remove('active');
            if (li.getAttribute('href').includes(current)) {
                li.classList.add('active');
            }
        });
    };

    window.addEventListener('scroll', handleScroll, { passive: true });

    // =========================================
    // Scroll Reveal (.reveal class — portfolio.html style)
    // =========================================
    function checkReveal() {
        document.querySelectorAll('.reveal').forEach(el => {
            const rect = el.getBoundingClientRect();
            if (rect.top < window.innerHeight - 60) {
                el.classList.add('visible');
            }
        });
    }
    checkReveal();
    window.addEventListener('scroll', checkReveal, { passive: true });

    // =========================================
    // Scroll Animation — .fade-in-up (Intersection Observer)
    // =========================================
    const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                obs.unobserve(entry.target);
            }
        });
    }, { root: null, rootMargin: '0px', threshold: 0.1 });

    document.querySelectorAll('.fade-in-up').forEach(el => observer.observe(el));

    // =========================================
    // Hero Parallax
    // =========================================
    const heroSection = document.getElementById('home');
    const heroGlow = document.querySelector('.hero-glow-orb');
    const heroGrid = document.querySelector('.hero-grid-bg');

    if (heroSection) {
        heroSection.addEventListener('mousemove', e => {
            const cx = window.innerWidth / 2;
            const cy = window.innerHeight / 2;
            const dx = (e.clientX - cx) / cx;
            const dy = (e.clientY - cy) / cy;
            if (heroGlow) heroGlow.style.transform = `translate(${dx * 20}px, ${dy * 20}px)`;
            if (heroGrid) heroGrid.style.transform  = `translate(${dx * 6}px, ${dy * 6}px)`;
        });
    }

    // =========================================
    // Modal Logic
    // =========================================
    const modal = document.getElementById('project-modal');
    const modalCloseBtns = document.querySelectorAll('[data-close]');
    const viewDetailsBtns = document.querySelectorAll('.view-details-btn');

    const modalTitle    = document.getElementById('modal-title');
    const modalDesc     = document.getElementById('modal-description');
    const modalFeatures = document.getElementById('modal-features');
    const modalTechStack = document.getElementById('modal-tech-stack');
    const modalDemoLink  = document.getElementById('modal-demo-link');
    const modalRepoLink  = document.getElementById('modal-github-link');
    const modalImage     = document.getElementById('modal-image');
    const modalImgPlaceholder = document.getElementById('modal-img-placeholder');

    const openModal = (projectId) => {
        const project = projectsData[projectId];
        if (!project) return;

        modalTitle.textContent = project.title;
        modalDesc.textContent  = project.description;
        modalFeatures.innerHTML  = project.features.map(f => `<li>${f}</li>`).join('');
        modalTechStack.innerHTML = project.techStack.map(t => `<span>${t}</span>`).join('');
        modalDemoLink.href = project.demoLink;
        modalRepoLink.href = project.repoLink;

        // Show project image if available
        if (project.image) {
            modalImage.src = project.image;
            modalImage.style.display = 'block';
            modalImgPlaceholder.style.display = 'none';
        } else {
            modalImage.style.display = 'none';
            modalImgPlaceholder.style.display = 'flex';
        }

        modal.classList.add('active');
        modal.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
    };

    const closeModal = () => {
        modal.classList.remove('active');
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
    };

    viewDetailsBtns.forEach(btn => {
        btn.addEventListener('click', () => openModal(btn.getAttribute('data-project')));
    });

    modalCloseBtns.forEach(btn => btn.addEventListener('click', closeModal));

    document.addEventListener('keydown', e => {
        if (e.key === 'Escape' && modal.classList.contains('active')) closeModal();
    });

    // =========================================
    // Contact Form
    // =========================================
    const cfSubmit = document.getElementById('cf-submit');
    if (cfSubmit) {
        cfSubmit.addEventListener('click', () => {
            const name    = document.getElementById('cf-name').value.trim();
            const email   = document.getElementById('cf-email').value.trim();
            const subject = document.getElementById('cf-subject').value.trim();
            const message = document.getElementById('cf-message').value.trim();

            if (!name || !email || !message) {
                cfSubmit.textContent = 'Fill all required fields!';
                cfSubmit.style.background = 'transparent';
                cfSubmit.style.color = '#ff6b6b';
                cfSubmit.style.border = '1px solid #ff6b6b';
                setTimeout(() => {
                    cfSubmit.textContent = 'Send Message →';
                    cfSubmit.style.cssText = '';
                }, 2500);
                return;
            }

            // Open mailto with pre-filled content
            const mailtoLink = `mailto:sayeed.ahemmad.05@gmail.com?subject=${encodeURIComponent(subject || 'Portfolio Contact')}&body=${encodeURIComponent(`Hi Sayed,\n\nName: ${name}\nEmail: ${email}\n\n${message}`)}`;
            window.open(mailtoLink, '_blank');

            // Visual feedback
            cfSubmit.textContent = 'Message Sent! ✓';
            cfSubmit.style.background = 'var(--accent)';
            setTimeout(() => {
                cfSubmit.textContent = 'Send Message →';
                cfSubmit.style.background = '';
                // Clear form
                document.getElementById('cf-name').value    = '';
                document.getElementById('cf-email').value   = '';
                document.getElementById('cf-subject').value = '';
                document.getElementById('cf-message').value = '';
            }, 3000);
        });
    }

    // =========================================
    // Hackathon Image Lightbox
    // =========================================
    const lightbox        = document.getElementById('img-lightbox');
    const lightboxImg     = document.getElementById('lightbox-img');
    const lightboxClose   = document.getElementById('lightbox-close');
    const lightboxBackdrop = document.getElementById('lightbox-backdrop');

    const openLightbox = (src, alt) => {
        lightboxImg.src = src;
        lightboxImg.alt = alt || 'Hackathon photo';
        lightbox.classList.add('active');
        lightbox.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';
    };

    const closeLightbox = () => {
        lightbox.classList.remove('active');
        lightbox.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
        // Clear src after transition so old image isn't flash-visible next open
        setTimeout(() => { lightboxImg.src = ''; }, 350);
    };

    // Attach click to every hackathon image CONTAINER (not the img child,
    // because the ::after overlay could block pointer events on the img).
    document.querySelectorAll('.hack-img-container').forEach(container => {
        container.addEventListener('click', (e) => {
            e.stopPropagation(); // don't bubble to hackathon-card
            const img = container.querySelector('img');
            if (img) openLightbox(img.src, img.alt);
        });
    });

    lightboxClose.addEventListener('click', closeLightbox);
    lightboxBackdrop.addEventListener('click', closeLightbox);

    document.addEventListener('keydown', e => {
        if (e.key === 'Escape' && lightbox.classList.contains('active')) closeLightbox();
    });

});