script.js

// ===== DOM ELEMENTS =====
const navbar = document.getElementById('navbar');
const navToggle = document.getElementById('navToggle');
const navLinks = document.getElementById('navLinks');
const navLinkItems = document.querySelectorAll('.nav-link');

// ===== NAVBAR SCROLL EFFECT =====
let lastScroll = 0;
window.addEventListener('scroll', () => {
    const currentScroll = window.scrollY;
    if (currentScroll > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
    lastScroll = currentScroll;
});

// ===== MOBILE MENU TOGGLE =====
navToggle.addEventListener('click', () => {
    navToggle.classList.toggle('open');
    navLinks.classList.toggle('open');
    document.body.style.overflow = navLinks.classList.contains('open') ? 'hidden' : '';
});

navLinkItems.forEach(link => {
    link.addEventListener('click', () => {
        navToggle.classList.remove('open');
        navLinks.classList.remove('open');
        document.body.style.overflow = '';
    });
});

// ===== ACTIVE NAV LINK ON SCROLL =====
const sections = document.querySelectorAll('section[id]');

function updateActiveNav() {
    const scrollY = window.scrollY + 100;
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;
        const sectionId = section.getAttribute('id');

        if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
            navLinkItems.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === `#${sectionId}`) {
                    link.classList.add('active');
                }
            });
        }
    });
}

window.addEventListener('scroll', updateActiveNav);

// ===== TYPEWRITER EFFECT =====
const typewriterEl = document.getElementById('typewriter');
const roles = [
    'Flutter Developer',
    'Mobile App Developer',
    'UI/UX Enthusiast',
    'Problem Solver',
    'Freelancer'
];

let roleIndex = 0;
let charIndex = 0;
let isDeleting = false;
let typeSpeed = 100;

function typeWriter() {
    const currentRole = roles[roleIndex];

    if (isDeleting) {
        typewriterEl.textContent = currentRole.substring(0, charIndex - 1);
        charIndex--;
        typeSpeed = 50;
    } else {
        typewriterEl.textContent = currentRole.substring(0, charIndex + 1);
        charIndex++;
        typeSpeed = 100;
    }

    if (!isDeleting && charIndex === currentRole.length) {
        typeSpeed = 2000;
        isDeleting = true;
    } else if (isDeleting && charIndex === 0) {
        isDeleting = false;
        roleIndex = (roleIndex + 1) % roles.length;
        typeSpeed = 500;
    }

    setTimeout(typeWriter, typeSpeed);
}

typeWriter();

// ===== COUNTER ANIMATION =====
function animateCounters() {
    const counters = document.querySelectorAll('.stat-number');
    counters.forEach(counter => {
        const target = parseInt(counter.getAttribute('data-target'));
        const duration = 2000;
        const step = target / (duration / 16);
        let current = 0;

        const updateCounter = () => {
            current += step;
            if (current < target) {
                counter.textContent = Math.ceil(current);
                requestAnimationFrame(updateCounter);
            } else {
                counter.textContent = target;
            }
        };

        updateCounter();
    });
}

// ===== PARTICLE SYSTEM =====
function createParticles() {
    const container = document.getElementById('particles');
    if (!container) return;

    const particleCount = 30;

    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');

        const size = Math.random() * 3 + 1;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.animationDuration = `${Math.random() * 15 + 10}s`;
        particle.style.animationDelay = `${Math.random() * 10}s`;

        const colors = ['#6c5ce7', '#a29bfe', '#00cec9'];
        particle.style.background = colors[Math.floor(Math.random() * colors.length)];

        container.appendChild(particle);
    }
}

createParticles();

// ===== SCROLL REVEAL ANIMATION =====
function setupScrollReveal() {
    const revealTargets = document.querySelectorAll(
        '.about-grid, .about-image-card, .about-content-col, ' +
        '.timeline-item, .usp-card, .exp-card, .achievement-card, ' +
        '.project-card, .service-card, .testimonial-card, ' +
        '.contact-info, .contact-form-wrapper, .section-header'
    );

    revealTargets.forEach(el => el.classList.add('reveal'));

    const revealObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('revealed');
                revealObserver.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });

    revealTargets.forEach(el => revealObserver.observe(el));
}

// Run when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    setupScrollReveal();
});

// ===== COUNTER TRIGGER ON SCROLL =====
let counterTriggered = false;
const heroSection = document.getElementById('home');

const counterObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting && !counterTriggered) {
            counterTriggered = true;
            animateCounters();
        }
    });
}, { threshold: 0.3 });

if (heroSection) counterObserver.observe(heroSection);

// ===== TESTIMONIALS SLIDER =====
const testimonialCards = document.querySelectorAll('.testimonial-card');
const dots = document.querySelectorAll('.testimonial-dots .dot');
const prevBtn = document.getElementById('prevTestimonial');
const nextBtn = document.getElementById('nextTestimonial');
let currentTestimonial = 0;

function showTestimonial(index) {
    testimonialCards.forEach(card => card.classList.remove('active'));
    dots.forEach(dot => dot.classList.remove('active'));

    currentTestimonial = (index + testimonialCards.length) % testimonialCards.length;
    testimonialCards[currentTestimonial].classList.add('active');
    dots[currentTestimonial].classList.add('active');
}

if (prevBtn && nextBtn) {
    prevBtn.addEventListener('click', () => showTestimonial(currentTestimonial - 1));
    nextBtn.addEventListener('click', () => showTestimonial(currentTestimonial + 1));
}

dots.forEach((dot, index) => {
    dot.addEventListener('click', () => showTestimonial(index));
});

// Auto-slide testimonials
setInterval(() => {
    showTestimonial(currentTestimonial + 1);
}, 5000);

// ===== CONTACT FORM WITH EMAILJS =====
const contactForm = document.getElementById('contactForm');
if (contactForm) {
    // Initialize EmailJS with Public Key
    // IMPORTANT: Replace 'YOUR_PUBLIC_KEY' with your actual EmailJS Public Key
    (function() {
        emailjs.init({
          publicKey: "YOUR_PUBLIC_KEY",
        });
    })();

    contactForm.addEventListener('submit', (e) => {
        e.preventDefault();

        const btn = contactForm.querySelector('.btn');
        const btnText = btn.querySelector('span');
        const btnIcon = btn.querySelector('i');
        const originalText = btnText.textContent;
        const originalIconClass = btnIcon.className;

        // Loading state
        btn.disabled = true;
        btnText.textContent = 'Sending...';
        btnIcon.className = 'bx bx-loader-alt bx-spin';

        // Send email using EmailJS
        // Replace 'YOUR_SERVICE_ID' and 'YOUR_TEMPLATE_ID' with yours
        emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', contactForm)
            .then(() => {
                // Success state
                btn.style.background = 'linear-gradient(135deg, #00cec9, #55efc4)';
                btnText.textContent = 'Message Sent!';
                btnIcon.className = 'bx bx-check';
                
                contactForm.reset();
                
                setTimeout(() => {
                    btn.disabled = false;
                    btn.style.background = '';
                    btnText.textContent = originalText;
                    btnIcon.className = originalIconClass;
                }, 3000);
            }, (error) => {
                // Error state
                console.error('FAILED...', error);
                btn.style.background = 'linear-gradient(135deg, #ff7675, #d63031)';
                btnText.textContent = 'Error sending!';
                btnIcon.className = 'bx bx-error-circle';
                
                setTimeout(() => {
                    btn.disabled = false;
                    btn.style.background = '';
                    btnText.textContent = originalText;
                    btnIcon.className = originalIconClass;
                }, 3000);
            });
    });
}

// ===== SMOOTH SCROLL FOR ALL 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' });
        }
    });
});