// Elite Financial Consulting - Main JavaScript

// DOM Elements
const navToggle = document.querySelector('.nav-toggle') as HTMLElement;
const navMenu = document.querySelector('.nav-menu') as HTMLElement;
const navLinks = document.querySelectorAll('.nav-link');
const contactForm = document.getElementById('contactForm') as HTMLFormElement;
const scrollIndicator = document.querySelector('.scroll-indicator') as HTMLElement;
const header = document.querySelector('.header') as HTMLElement;

// Mobile Navigation Toggle
if (navToggle && navMenu) {
    navToggle.addEventListener('click', () => {
        navMenu.classList.toggle('active');
        navToggle.classList.toggle('active');
    });
}

// Close mobile menu when clicking nav links
navLinks.forEach(link => {
    link.addEventListener('click', () => {
        navMenu?.classList.remove('active');
        navToggle?.classList.remove('active');
    });
});

// Smooth Scrolling
navLinks.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const href = link.getAttribute('href');
        if (href && href.startsWith('#')) {
            const targetSection = document.querySelector(href) as HTMLElement;
            if (targetSection) {
                const headerHeight = header.offsetHeight;
                const targetPosition = targetSection.offsetTop - headerHeight;

                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        }
    });
});

// Scroll Indicator Click
if (scrollIndicator) {
    scrollIndicator.addEventListener('click', () => {
        const aboutSection = document.getElementById('about');
        if (aboutSection) {
            const headerHeight = header.offsetHeight;
            const targetPosition = aboutSection.offsetTop - headerHeight;

            window.scrollTo({
                top: targetPosition,
                behavior: 'smooth'
            });
        }
    });
}

// Header Background on Scroll
window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;

    if (scrolled > 100) {
        header.style.background = 'rgba(0, 0, 0, 0.98)';
        header.style.boxShadow = '0 5px 20px rgba(212, 175, 55, 0.3)';
    } else {
        header.style.background = 'rgba(0, 0, 0, 0.95)';
        header.style.boxShadow = 'none';
    }
});

// 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('animate-fade-in-up');
        }
    });
}, observerOptions);

// Observe all sections and cards
const elementsToAnimate = document.querySelectorAll('.service-card, .sector-item, .about-card, .join-card, .section-header');
elementsToAnimate.forEach(el => observer.observe(el));

// Form Validation and Submission
if (contactForm) {
    contactForm.addEventListener('submit', (e) => {
        e.preventDefault();

        const formData = new FormData(contactForm);
        const formValues = Object.fromEntries(formData.entries());

        // Basic validation
        const requiredFields = ['name', 'phone', 'email', 'subject', 'message'];
        const errors: string[] = [];

        requiredFields.forEach(field => {
            if (!formValues[field] || (formValues[field] as string).trim() === '') {
                errors.push(`${field.charAt(0).toUpperCase() + field.slice(1)} is required`);
            }
        });

        // Email validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (formValues.email && !emailRegex.test(formValues.email as string)) {
            errors.push('Please enter a valid email address');
        }

        // Terms checkbox
        if (!formValues.terms) {
            errors.push('Please accept the legal notice');
        }

        if (errors.length > 0) {
            showFormMessage(errors.join('\n'), 'error');
            return;
        }

        // Simulate form submission
        showFormMessage('Thank you for your message! We will contact you shortly.', 'success');
        contactForm.reset();
    });
}

// Form Message Display
function showFormMessage(message: string, type: 'success' | 'error') {
    // Remove existing messages
    const existingMessage = document.querySelector('.form-message');
    if (existingMessage) {
        existingMessage.remove();
    }

    const messageDiv = document.createElement('div');
    messageDiv.className = `form-message ${type}`;
    messageDiv.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: ${type === 'success' ? 'linear-gradient(135deg, #D4AF37, #FFD700)' : 'linear-gradient(135deg, #dc3545, #c82333)'};
        color: #000;
        padding: 1.5rem 2rem;
        border-radius: 10px;
        font-weight: 600;
        z-index: 10000;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        text-align: center;
        white-space: pre-line;
    `;
    messageDiv.textContent = message;

    document.body.appendChild(messageDiv);

    setTimeout(() => {
        messageDiv.remove();
    }, 5000);
}

// Parallax Effect for Hero Background
window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    const heroSection = document.querySelector('.hero') as HTMLElement;

    if (heroSection) {
        const speed = scrolled * 0.5;
        heroSection.style.transform = `translateY(${speed}px)`;
    }
});

// Financial Icons Interactive Animation
const iconCircles = document.querySelectorAll('.icon-circle');
iconCircles.forEach((icon) => {
    icon.addEventListener('mouseenter', () => {
        // Add glow effect
        (icon as HTMLElement).style.boxShadow = '0 0 40px rgba(212, 175, 55, 0.8)';
        (icon as HTMLElement).style.transform = 'scale(1.1)';
    });

    icon.addEventListener('mouseleave', () => {
        // Remove glow effect
        (icon as HTMLElement).style.boxShadow = '0 10px 30px rgba(212, 175, 55, 0.4)';
        (icon as HTMLElement).style.transform = 'scale(1)';
    });
});

// Service Cards Hover Effects
const serviceCards = document.querySelectorAll('.service-card');
serviceCards.forEach(card => {
    card.addEventListener('mouseenter', () => {
        // Add golden glow
        (card as HTMLElement).style.boxShadow = '0 20px 60px rgba(212, 175, 55, 0.4)';
    });

    card.addEventListener('mouseleave', () => {
        // Reset shadow
        (card as HTMLElement).style.boxShadow = '';
    });
});

// Sector Items Pulse Animation
const sectorItems = document.querySelectorAll('.sector-item');
sectorItems.forEach((item, index) => {
    // Add staggered animation delay
    (item as HTMLElement).style.animationDelay = `${index * 0.1}s`;

    item.addEventListener('click', () => {
        // Add click animation
        (item as HTMLElement).style.animation = 'pulse 0.6s ease-in-out';
        setTimeout(() => {
            (item as HTMLElement).style.animation = '';
        }, 600);
    });
});

// Add pulse animation keyframes to CSS
const style = document.createElement('style');
style.textContent = `
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
`;
document.head.appendChild(style);

// Button Click Effects
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
    button.addEventListener('click', (e: Event) => {
        const mouseEvent = e as MouseEvent;
        const buttonElement = button as HTMLElement;
        // Create ripple effect
        const ripple = document.createElement('span');
        const rect = buttonElement.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = mouseEvent.clientX - rect.left - size / 2;
        const y = mouseEvent.clientY - rect.top - size / 2;

        ripple.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            left: ${x}px;
            top: ${y}px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        `;

        buttonElement.appendChild(ripple);

        setTimeout(() => {
            ripple.remove();
        }, 600);
    });
});

// Add ripple animation
const rippleStyle = document.createElement('style');
rippleStyle.textContent = `
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }

    .btn {
        position: relative;
        overflow: hidden;
    }
`;
document.head.appendChild(rippleStyle);

// Loading Animation
window.addEventListener('load', () => {
    // Add fade-in animation to main content
    document.body.style.opacity = '0';
    document.body.style.transition = 'opacity 0.5s ease-in-out';

    setTimeout(() => {
        document.body.style.opacity = '1';
    }, 100);
});

// Navbar Active Link Highlighting
function updateActiveNavLink() {
    const sections = document.querySelectorAll('section[id]');
    const scrollPos = window.pageYOffset + 100;

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

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

window.addEventListener('scroll', updateActiveNavLink);

// Add active link styles
const activeNavStyle = document.createElement('style');
activeNavStyle.textContent = `
    .nav-link.active {
        color: var(--primary-gold);
    }

    .nav-link.active::after {
        width: 100%;
    }
`;
document.head.appendChild(activeNavStyle);

console.log('Elite Financial Consulting website loaded successfully!');