document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('contact-form');
    const faqSection = document.getElementById('faq');
    const faqNavLinks = document.querySelectorAll('[data-faq-nav]');

    if (form) {
        form.addEventListener('submit', async event => {
            event.preventDefault();

            const response = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
                },
                body: new FormData(form),
            });

            if (response.ok) {
                document.getElementById('success-message')?.classList.remove('hidden');
                form.reset();
                return;
            }

            alert('Something went wrong!');
        });
    }

    function toggleFaqNavLinks(activeHasEntries) {
        faqNavLinks.forEach(link => {
            if (activeHasEntries) {
                link.classList.remove('hidden');
                link.removeAttribute('aria-hidden');
                return;
            }

            link.classList.add('hidden');
            link.setAttribute('aria-hidden', 'true');
        });
    }

    function updateFaqLocaleDisplay(lang) {
        if (!faqSection) {
            return;
        }

        const sections = faqSection.querySelectorAll('[data-faq-locale]');
        if (!sections.length) {
            faqSection.classList.add('hidden');
            faqSection.setAttribute('aria-hidden', 'true');
            return;
        }

        let activeHasEntries = false;

        sections.forEach(section => {
            const matches = section.dataset.faqLocale === lang;
            const hasEntries = section.dataset.faqHasEntries === 'true';

            if (matches) {
                activeHasEntries = hasEntries;
                section.classList.remove('hidden');
                section.setAttribute('aria-hidden', 'false');
                return;
            }

            section.classList.add('hidden');
            section.setAttribute('aria-hidden', 'true');
        });

        if (activeHasEntries) {
            faqSection.classList.remove('hidden');
            faqSection.setAttribute('aria-hidden', 'false');
        } else {
            faqSection.classList.add('hidden');
            faqSection.setAttribute('aria-hidden', 'true');
        }

        toggleFaqNavLinks(activeHasEntries);
    }

    function applyLanguage(lang) {
        document.documentElement.lang = lang;

        document.querySelectorAll('[data-i18n-en]').forEach(element => {
            const target = element.dataset.i18nTarget || 'text';
            const key = `i18n${lang.charAt(0).toUpperCase()}${lang.slice(1)}`;
            const text = element.dataset[key] ?? '';

            if (target === 'placeholder') {
                element.setAttribute('placeholder', text);
            } else if (target === 'html') {
                element.innerHTML = text;
            } else {
                element.textContent = text;
            }
        });

        document.querySelectorAll('[data-logo-en]').forEach(element => {
            if (!(element instanceof HTMLImageElement)) {
                return;
            }

            element.src = lang === 'da' ? element.dataset.logoDa ?? element.src : element.dataset.logoEn ?? element.src;
        });

        const flagClass = lang === 'en' ? 'fi-dk' : 'fi-gb';
        document.querySelectorAll('.language-toggle .fi').forEach(icon => {
            icon.classList.remove('fi-dk', 'fi-gb');
            icon.classList.add(flagClass);
        });

        updateFaqLocaleDisplay(lang);
    }

    const stored = localStorage.getItem('locale');
    const preferred = Array.isArray(navigator.languages) && navigator.languages.length > 0
        ? navigator.languages[0]
        : navigator.language;
    const initial = stored || (preferred?.startsWith('da') ? 'da' : 'en');

    applyLanguage(initial);

    document.querySelectorAll('.language-toggle').forEach(button => {
        button.addEventListener('click', () => {
            const next = document.documentElement.lang === 'en' ? 'da' : 'en';
            localStorage.setItem('locale', next);
            applyLanguage(next);
        });
    });
});