/**
 * Take Care Of My - Main JavaScript
 * With Dynamic FAQ Loading from WordPress AND Jump Ahead Menu
 */
(function() {
    'use strict';

    /* =======================================================================
       SCARCITY COUNTER
       ======================================================================= */
    function initScarcityCounter() {
        const elements = document.querySelectorAll('.tcom-scarcity-count');
        elements.forEach(el => {
            const count = el.getAttribute('data-count');
            el.textContent = count;
        });
    }

    /* =======================================================================
       CALCULATOR FUNCTIONALITY
       ======================================================================= */
    function initCalculator() {
        const homepageCalcBtn = document.getElementById('calculateBtn');
        if (!homepageCalcBtn) return;

        homepageCalcBtn.addEventListener('click', function() {
            calculateDetailedCost();
        });
    }

    function calculateDetailedCost() {
        const socialHours = parseFloat(document.getElementById('socialHours').value) || 0;
        const websiteHours = parseFloat(document.getElementById('websiteHours').value) || 0;
        const blogHours = parseFloat(document.getElementById('blogHours').value) || 0;
        const emailHours = parseFloat(document.getElementById('emailHours').value) || 0;
        const hourlyValue = parseFloat(document.getElementById('hourlyValue').value) || 0;

        const socialCost = socialHours * hourlyValue;
        const websiteCost = websiteHours * hourlyValue;
        const blogCost = blogHours * hourlyValue;
        const emailCost = emailHours * hourlyValue;
        const totalCost = socialCost + websiteCost + blogCost + emailCost;

        const socialSavings = socialCost - 297;
        const websiteSavings = websiteCost - 396;
        const blogSavings = blogCost - 297;
        const emailSavings = emailCost;

        const bundlePrice = 792;
        const totalSavings = totalCost - bundlePrice;

        document.getElementById('gridSocialHours').textContent = socialHours;
        document.getElementById('gridSocialCost').textContent = formatNumber(socialCost) + '/mo';
        document.getElementById('gridSocialSavings').textContent = formatNumber(socialSavings) + '/mo';

        document.getElementById('gridWebsiteHours').textContent = websiteHours;
        document.getElementById('gridWebsiteCost').textContent = formatNumber(websiteCost) + '/mo';
        document.getElementById('gridWebsiteSavings').textContent = formatNumber(websiteSavings) + '/mo';

        document.getElementById('gridBlogHours').textContent = blogHours;
        document.getElementById('gridBlogCost').textContent = formatNumber(blogCost) + '/mo';
        document.getElementById('gridBlogSavings').textContent = formatNumber(blogSavings) + '/mo';

        document.getElementById('gridEmailHours').textContent = emailHours;
        document.getElementById('gridEmailCost').textContent = formatNumber(emailCost) + '/mo';
        document.getElementById('gridEmailSavings').textContent = formatNumber(emailSavings) + '/mo';

        const totalHours = socialHours + websiteHours + blogHours + emailHours;
        document.getElementById('gridTotalHours').textContent = totalHours;
        document.getElementById('gridTotalCost').textContent = formatNumber(totalCost) + '/mo';
        document.getElementById('gridTotalSavings').textContent = formatNumber(totalSavings) + '/mo';

        const ctaSavingsEl = document.getElementById('ctaSavings');
        if (ctaSavingsEl) {
            ctaSavingsEl.textContent = formatNumber(totalSavings);
        }

        const resultsDiv = document.getElementById('detailedResults');
        if (resultsDiv) {
            resultsDiv.style.display = 'block';
            resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
    }

    window.calculateDetailedCost = calculateDetailedCost;

    function formatNumber(num) {
        return '$' + Math.round(num).toLocaleString();
    }

    /* =======================================================================
       FAQ ACCORDION - DYNAMIC FROM WORDPRESS
       ======================================================================= */
    function initFAQ() {
        const faqContainer = document.querySelector('[data-faq-page]');
        if (!faqContainer) return;

        const pageSlug = faqContainer.getAttribute('data-faq-page') || 'homepage';

        fetch(`${tcomFAQ.ajaxUrl}?action=get_faqs&page=${pageSlug}`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data.length > 0) {
                    renderFAQs(data.data, faqContainer);
                }
            })
            .catch(error => console.error('Error loading FAQs:', error));
    }

    function renderFAQs(faqs, container) {
        container.innerHTML = '';

        faqs.forEach((faq, index) => {
            const questionDiv = document.createElement('div');
            questionDiv.style.borderBottom = '1px solid #e5e5e5';
            questionDiv.style.padding = '1.5rem';
            questionDiv.style.cursor = 'pointer';
            if (index === 0) questionDiv.style.background = '#F7FAFC';

            const questionContent = document.createElement('div');
            questionContent.style.display = 'flex';
            questionContent.style.justifyContent = 'space-between';
            questionContent.style.alignItems = 'center';

            const questionTitle = document.createElement('h3');
            questionTitle.style.fontSize = '1.125rem';
            questionTitle.style.color = '#1A365D';
            questionTitle.style.margin = '0';
            questionTitle.style.fontWeight = '600';
            questionTitle.textContent = faq.question;

            const toggle = document.createElement('span');
            toggle.style.color = '#00A3B4';
            toggle.style.fontSize = '1.5rem';
            toggle.textContent = index === 0 ? '−' : '+';

            questionContent.appendChild(questionTitle);
            questionContent.appendChild(toggle);
            questionDiv.appendChild(questionContent);

            const answerDiv = document.createElement('div');
            answerDiv.className = 'faq-answer';
            answerDiv.style.display = index === 0 ? 'block' : 'none';
            answerDiv.style.padding = '0 1.5rem 1.5rem 1.5rem';
            answerDiv.style.color = '#4A5568';
            answerDiv.style.lineHeight = '1.6';
            answerDiv.innerHTML = faq.answer;

            questionDiv.addEventListener('click', function() {
                const isOpen = answerDiv.style.display === 'block';
                
                const allQuestions = container.querySelectorAll('div[style*="cursor: pointer"]');
                allQuestions.forEach(q => {
                    const nextSibling = q.nextElementSibling;
                    if (nextSibling) {
                        nextSibling.style.display = 'none';
                    }
                    q.style.background = 'white';
                    const toggleSpan = q.querySelector('span');
                    if (toggleSpan) toggleSpan.textContent = '+';
                });

                if (!isOpen) {
                    answerDiv.style.display = 'block';
                    toggle.textContent = '−';
                    questionDiv.style.background = '#F7FAFC';
                }
            });

            container.appendChild(questionDiv);
            container.appendChild(answerDiv);
        });
    }

    /* =======================================================================
       JUMP AHEAD MENU VISIBILITY (Portfolio Trigger)
       ======================================================================= */
    function initJumpMenuVisibility() {
        const menu = document.getElementById('jump-ahead-menu');
        const portfolioSection = document.getElementById('portfolio');
        const heroSection = document.getElementById('hero');
        
        if (!menu || !portfolioSection) {
            console.error('Jump menu or portfolio section not found!');
            return;
        }

        menu.classList.add('hidden');
        let menuShown = false;

        function checkAndShowMenu() {
            if (menuShown) return;

            const heroScrolledPast = heroSection ? heroSection.getBoundingClientRect().bottom < 0 : true;
            const portfolioRect = portfolioSection.getBoundingClientRect();
            const portfolioVisible = portfolioRect.top < window.innerHeight;

            if (heroScrolledPast && portfolioVisible) {
                menu.classList.remove('hidden');
                menuShown = true;
                console.log('Menu shown permanently');
            }
        }

        window.addEventListener('scroll', checkAndShowMenu);
        checkAndShowMenu();
    }

    /* =======================================================================
       JUMP AHEAD MENU TOGGLE (Mobile Hamburger)
       ======================================================================= */
    function initJumpMenuToggle() {
        window.toggleJumpMenu = function() {
            const menu = document.querySelector('.jump-ahead-content');
            if (!menu) return;

            if (menu.classList.contains('menu-open')) {
                menu.classList.remove('menu-open');
                document.body.classList.remove('jump-menu-open');
            } else {
                menu.classList.add('menu-open');
                document.body.classList.add('jump-menu-open');
            }
        };

        window.closeJumpMenuMobile = function() {
            if (window.innerWidth <= 1024) {
                const menu = document.querySelector('.jump-ahead-content');
                if (menu) {
                    menu.classList.remove('menu-open');
                    document.body.classList.remove('jump-menu-open');
                }
            }
        };

        document.addEventListener('click', function(event) {
            if (window.innerWidth <= 1024) {
                const menu = document.querySelector('.jump-ahead-content');
                const hamburger = document.querySelector('.jump-ahead-hamburger');
                
                if (menu && menu.classList.contains('menu-open')) {
                    if (!menu.contains(event.target) && hamburger && !hamburger.contains(event.target)) {
                        menu.classList.remove('menu-open');
                        document.body.classList.remove('jump-menu-open');
                    }
                }
            }
        });
    }

    /* =======================================================================
       INITIALIZE ALL
       ======================================================================= */
    function init() {
        console.log('Initializing all scripts...');
        initScarcityCounter();
        initCalculator();
        initFAQ();
        initJumpMenuVisibility();
        initJumpMenuToggle();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

})();