const pages = ['home','problem','why','features','how','roi','pricing','who','trust','roadmap','faq','signin','apply'];

function openPage(pageId) {
    if (!pages.includes(pageId)) {
        console.warn(`Attempted to navigate to a non-existent page: ${pageId}`);
        return; // Do not proceed if the page is not in the allowed list
    }

    // Hide all pages
    document.querySelectorAll('.page').forEach(p => {
        p.classList.add('hidden');
    });

    // Show the active page
    const activePage = document.getElementById('page-' + pageId);
    if (activePage) {
        activePage.classList.remove('hidden');
    } else {
        // If no specific page content, default to home
        document.getElementById('page-home').classList.remove('hidden');
    }

    // Update active link styling
    document.querySelectorAll('.navlink').forEach(link => {
        if (link.dataset.page === pageId) {
            link.classList.add('active');
        } else {
            link.classList.remove('active');
        }
    });

    // Smooth scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

document.addEventListener('DOMContentLoaded', () => {
    const navLinksContainer = document.getElementById('nav-links');
    const mobileMenuContainer = document.getElementById('mobile-menu');
    const menuButton = document.getElementById('menu-button');

    // Generate navigation links
    let navHTML = '';
    pages.forEach(page => {
        navHTML += `<a href="#${page}" class="navlink px-3 py-2 rounded-full hover:bg-gray-100" data-page="${page}">${page.charAt(0).toUpperCase() + page.slice(1)}</a>`;
    });
    navLinksContainer.innerHTML = navHTML;
    mobileMenuContainer.innerHTML = navHTML.replace(/class="/g, 'class="block w-full text-left ');

    // Handle navigation clicks
    document.querySelectorAll('.navlink').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            openPage(link.dataset.page);
        });
    });

    // Toggle mobile menu
    menuButton.addEventListener('click', () => {
        mobileMenuContainer.classList.toggle('hidden');
    });

    // Open page based on hash or default to 'home'
    const initialPage = window.location.hash.substring(1) || 'home';
    openPage(initialPage);

    // Tab functionality for 'Why FinMox' page
    const whyTabs = document.querySelectorAll('.why-tab');
    const whyContents = document.querySelectorAll('.why-content');

    whyTabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const tabId = tab.dataset.tab;

            // Update tab styles
            whyTabs.forEach(t => {
                if (t.dataset.tab === tabId) {
                    t.classList.add('bg-black', 'text-white');
                    t.classList.remove('bg-gray-200', 'text-black');
                } else {
                    t.classList.remove('bg-black', 'text-white');
                    t.classList.add('bg-gray-200', 'text-black');
                }
            });

            // Show/hide content
            whyContents.forEach(content => {
                if (content.id === tabId) {
                    content.classList.remove('hidden');
                } else {
                    content.classList.add('hidden');
                }
            });
        });
    });
});