document.addEventListener('DOMContentLoaded', () => {
    
    // Function to load dynamic components (Header and Footer)
    async function loadComponents() {
        try {
            // Load Header
            const headerEl = document.getElementById('dynamic-header');
            if(headerEl) {
                const headerRes = await fetch('components/header.html');
                const headerHtml = await headerRes.text();
                headerEl.innerHTML = headerHtml;
                initNavigation(); // Initialize nav JS only after it's loaded
            }

            // Load Footer
            const footerEl = document.getElementById('dynamic-footer');
            if(footerEl) {
                const footerRes = await fetch('components/footer.html');
                const footerHtml = await footerRes.text();
                footerEl.innerHTML = footerHtml;
            }
        } catch (error) {
            console.error("Error loading components:", error);
        }
    }

    function initNavigation() {
        // Mobile Menu Toggle
        const hamburger = document.querySelector('.hamburger');
        const navLinks = document.querySelector('.nav-links');
        const links = document.querySelectorAll('.nav-links li a');

        if(hamburger && navLinks) {
            hamburger.addEventListener('click', () => {
                navLinks.classList.toggle('active');
                const icon = hamburger.querySelector('i');
                if(navLinks.classList.contains('active')) {
                    icon.classList.remove('fa-bars');
                    icon.classList.add('fa-times');
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            });

            // Close mobile menu when a link is clicked
            links.forEach(link => {
                link.addEventListener('click', () => {
                    navLinks.classList.remove('active');
                    hamburger.querySelector('i').classList.remove('fa-times');
                    hamburger.querySelector('i').classList.add('fa-bars');
                });
            });
        }

        // Sticky Navbar on Scroll
        const navbar = document.getElementById('navbar');
        if(navbar) {
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }
            });
        }
    }

    // Load components immediately
    loadComponents();

    // Scroll Reveal Animation
    const revealElements = document.querySelectorAll('.scroll-reveal');

    const revealOnScroll = () => {
        const windowHeight = window.innerHeight;
        const revealPoint = 100;

        revealElements.forEach(el => {
            const elementTop = el.getBoundingClientRect().top;
            if (elementTop < windowHeight - revealPoint) {
                el.classList.add('active');
            }
        });
    };

    // Trigger once on load
    setTimeout(revealOnScroll, 100); // slight delay to allow layout
    
    // Trigger on scroll
    window.addEventListener('scroll', revealOnScroll);

    // Simple Form Submission Handler
    const contactForm = document.getElementById('contactForm');
    if(contactForm) {
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const btn = contactForm.querySelector('button');
            const originalText = btn.innerText;
            
            btn.innerText = 'Message Sent!';
            btn.style.backgroundColor = '#28a745'; 
            btn.style.borderColor = '#28a745';
            
            contactForm.reset();
            
            setTimeout(() => {
                btn.innerText = originalText;
                btn.style.backgroundColor = '';
                btn.style.borderColor = '';
            }, 3000);
        });
    }
});
