script.js

document.addEventListener('DOMContentLoaded', () => {
    const nav = document.querySelector('nav[role="navigation"]');
    const toggle = document.getElementById('nav-toggle');
    if (!nav || !toggle) return;

    function setOpen(isOpen) {
        nav.classList.toggle('is-open', isOpen);
        nav.setAttribute('data-open', isOpen ? 'true' : 'false');
        toggle.setAttribute('aria-expanded', String(isOpen));
    }

    toggle.addEventListener('click', () => {
        const isOpen = !nav.classList.contains('is-open');
        setOpen(isOpen);
        if (isOpen) {
            // move focus into nav for keyboard users
            const firstLink = nav.querySelector('a');
            if (firstLink) firstLink.focus();
        }
    });

    // Close on Escape
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && nav.classList.contains('is-open')) {
            setOpen(false);
            toggle.focus();
        }
    });

    // Close when clicking outside
    document.addEventListener('click', (e) => {
        if (!nav.contains(e.target) && !toggle.contains(e.target) && nav.classList.contains('is-open')) {
            setOpen(false);
        }
    });

    // Smooth scrolling for same-page links: JS fallback + accessible focus management
    function isSmoothScrollSupported() {
        try {
            return 'scrollBehavior' in document.documentElement.style || (window.CSS && CSS.supports && CSS.supports('scroll-behavior', 'smooth'));
        } catch (e) {
            return false;
        }
    }

    function animateScrollTo(targetY, duration = 500) {
        const startY = window.pageYOffset;
        const diff = targetY - startY;
        if (!diff) return Promise.resolve();
        let start;
        return new Promise((resolve) => {
            function step(ts) {
                start = start || ts;
                const elapsed = Math.min((ts - start) / duration, 1);
                // easeInOutQuad
                const eased = elapsed < 0.5 ? 2 * elapsed * elapsed : -1 + (4 - 2 * elapsed) * elapsed;
                window.scrollTo(0, Math.round(startY + diff * eased));
                if (elapsed < 1) requestAnimationFrame(step);
                else resolve();
            }
            requestAnimationFrame(step);
        });
    }

    function focusElement(el) {
        if (!el) return;
        const tag = el.tagName;
        const focusable = el.hasAttribute('tabindex') || /^(A|BUTTON|INPUT|TEXTAREA|SELECT)$/.test(tag) || el.getAttribute('contenteditable') === 'true';
        if (!focusable) {
            el.setAttribute('tabindex', '-1');
            el.dataset._tempTabindex = 'true';
        }
        el.focus({ preventScroll: true });
        if (el.dataset._tempTabindex) {
            setTimeout(() => {
                el.removeAttribute('tabindex');
                delete el.dataset._tempTabindex;
            }, 1000);
        }
    }

    document.addEventListener('click', (e) => {
        const anchor = e.target.closest('a[href^="#"]');
        if (!anchor) return;
        const href = anchor.getAttribute('href');
        if (!href || href === '#' || href === '#!') return;
        const id = href.slice(1);
        const target = document.getElementById(id);
        if (!target) return;
        // Only intercept same-page links
        if (location.pathname === anchor.pathname && location.hostname === anchor.hostname) {
            e.preventDefault();
            const header = document.querySelector('header');
            const headerFixed = header && window.getComputedStyle(header).position === 'fixed';
            const offset = headerFixed ? header.offsetHeight : 0;
            const targetY = Math.max(0, target.getBoundingClientRect().top + window.pageYOffset - offset - 8);

            const doScroll = isSmoothScrollSupported()
                ? (window.scrollTo({ top: targetY, behavior: 'smooth' }), Promise.resolve())
                : animateScrollTo(targetY, 500);

            doScroll.then(() => {
                history.pushState(null, '', `#${id}`);
                focusElement(target);
            });
        }
    });

    // Projects filter: accessible buttons that show/hide projects, update ARIA and hash
    (function initProjectFilter() {
        const filterButtons = Array.from(document.querySelectorAll('.filter-btn'));
        const projects = Array.from(document.querySelectorAll('.projects-list article'));
        const announcer = document.querySelector('.filter-announcer');

        if (!filterButtons.length || !projects.length) return;

        function applyFilter(filter) {
            let visibleCount = 0;
            projects.forEach((proj) => {
                const tags = (proj.dataset.tags || '').split(',').map(t => t.trim()).filter(Boolean);
                const matches = filter === 'all' || tags.includes(filter);
                const li = proj.closest('li');
                if (li) {
                    if (matches) {
                        li.removeAttribute('hidden');
                        proj.setAttribute('aria-hidden', 'false');
                        visibleCount++;
                    } else {
                        li.setAttribute('hidden', '');
                        proj.setAttribute('aria-hidden', 'true');
                    }
                }
            });

            // update buttons' pressed state
            filterButtons.forEach((btn) => {
                btn.setAttribute('aria-pressed', btn.dataset.filter === filter ? 'true' : 'false');
            });

            // announce results for screen readers
            if (announcer) {
                const label = filter === 'all' ? 'all projects' : `${filter} projects`;
                announcer.textContent = `Showing ${visibleCount} ${label}`;
            }

            // update URL hash for deep linking
            try {
                const newHash = filter === 'all' ? '#projects' : `#projects?filter=${encodeURIComponent(filter)}`;
                history.replaceState(null, '', newHash);
            } catch (e) { /* ignore */ }
        }

        // wire up buttons
        filterButtons.forEach((btn) => {
            btn.addEventListener('click', () => {
                applyFilter(btn.dataset.filter || 'all');
            });
        });

        // apply filter from hash if present
        (function applyFilterFromHash() {
            const hash = location.hash || '';
            const m = hash.match(/filter=([^&]+)/);
            const filterFromHash = m ? decodeURIComponent(m[1]) : 'all';
            const valid = filterButtons.some(b => b.dataset.filter === filterFromHash);
            applyFilter(valid ? filterFromHash : 'all');
        })();
    })();

    // Lightbox for project images
    (function initLightbox() {
        const thumbs = Array.from(document.querySelectorAll('.project-thumb'));
        const lightbox = document.getElementById('lightbox');
        if (!lightbox || !thumbs.length) return;

        const imgEl = lightbox.querySelector('.lightbox__img');
        const captionEl = lightbox.querySelector('.lightbox__caption');
        const closeBtn = lightbox.querySelector('.lightbox__close');
        const prevBtn = lightbox.querySelector('.lightbox__prev');
        const nextBtn = lightbox.querySelector('.lightbox__next');
        const overlay = lightbox.querySelector('.lightbox__overlay');

        // Fallback: if the lightbox image fails to load, show a placeholder
        imgEl.addEventListener('error', () => {
            imgEl.src = 'images/placeholder.svg';
            imgEl.alt = 'Image not available';
        });

        let currentIndex = -1;
        let lastFocused = null;

        function show(index) {
            const thumb = thumbs[index];
            if (!thumb) return;
            const full = thumb.dataset.full || thumb.src;
            const caption = thumb.closest('figure')?.querySelector('figcaption')?.textContent || thumb.alt || '';
            imgEl.src = full;
            imgEl.alt = thumb.alt || '';
            captionEl.textContent = caption;
            currentIndex = index;

            lightbox.hidden = false;
            lightbox.setAttribute('aria-hidden', 'false');
            lastFocused = document.activeElement;
            closeBtn.focus();

            preload(index - 1);
            preload(index + 1);
        }

        function preload(i) {
            const t = thumbs[i];
            if (!t) return;
            const src = t.dataset.full || t.src;
            const im = new Image();
            im.src = src;
        }

        function close() {
            lightbox.hidden = true;
            lightbox.setAttribute('aria-hidden', 'true');
            imgEl.src = '';
            captionEl.textContent = '';
            if (lastFocused && lastFocused.focus) lastFocused.focus();
            currentIndex = -1;
        }

        function next() {
            if (currentIndex < thumbs.length - 1) show(currentIndex + 1);
            else show(0);
        }
        function prev() {
            if (currentIndex > 0) show(currentIndex - 1);
            else show(thumbs.length - 1);
        }

        thumbs.forEach((thumb, i) => {
            thumb.setAttribute('tabindex', '0');

            // If a thumbnail fails to load, replace it with the placeholder to avoid broken icons
            thumb.addEventListener('error', () => {
                if (!thumb.dataset._errored) {
                    thumb.dataset._errored = 'true';
                    thumb.src = 'images/placeholder.svg';
                    if (!thumb.dataset.full) thumb.dataset.full = 'images/placeholder.svg';
                }
            });

            thumb.addEventListener('click', (e) => {
                e.preventDefault();
                show(i);
            });
            thumb.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    show(i);
                }
            });
        });

        closeBtn.addEventListener('click', close);
        overlay.addEventListener('click', close);
        nextBtn.addEventListener('click', next);
        prevBtn.addEventListener('click', prev);

        document.addEventListener('keydown', (e) => {
            if (lightbox.hidden || lightbox.getAttribute('aria-hidden') === 'true') return;
            if (e.key === 'Escape') {
                e.preventDefault();
                close();
            } else if (e.key === 'ArrowRight') {
                e.preventDefault();
                next();
            } else if (e.key === 'ArrowLeft') {
                e.preventDefault();
                prev();
            } else if (e.key === 'Tab') {
                const focusables = [closeBtn, prevBtn, nextBtn].filter(Boolean);
                if (!focusables.length) return;
                const idx = focusables.indexOf(document.activeElement);
                if (e.shiftKey) {
                    const nextIdx = idx <= 0 ? focusables.length - 1 : idx - 1;
                    focusables[nextIdx].focus();
                    e.preventDefault();
                } else {
                    const nextIdx = idx === -1 || idx === focusables.length - 1 ? 0 : idx + 1;
                    focusables[nextIdx].focus();
                    e.preventDefault();
                }
            }
        });
    })();

    // Contact form: client-side validation, accessible messages, local fallback
    (function initContactForm() {
        const form = document.getElementById('contact-form');
        if (!form) return;

        const statusLive = document.getElementById('contact-status');
        const messageEl = document.getElementById('form-message');
        const submitBtn = form.querySelector('button[type="submit"]');

        function setFieldError(el, msg) {
            const err = document.getElementById(`${el.id}-error`);
            if (err) err.textContent = msg || '';
            if (msg) el.setAttribute('aria-invalid', 'true');
            else el.removeAttribute('aria-invalid');
        }

        function clearErrors() {
            Array.from(form.elements).forEach((el) => {
                if (el.id && el.willValidate) setFieldError(el, '');
            });
            messageEl.hidden = true;
            messageEl.className = 'form-message';
            statusLive.textContent = '';
        }

        // optional: restore draft if present
        try {
            const draft = localStorage.getItem('contact-draft');
            if (draft) {
                const data = JSON.parse(draft);
                if (data.name) form.querySelector('#name').value = data.name;
                if (data.email) form.querySelector('#email').value = data.email;
                if (data.message) form.querySelector('#message').value = data.message;
            }
        } catch (e) { /* ignore */ }

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            clearErrors();

            // Built-in constraint validation
            if (!form.checkValidity()) {
                // show messages for invalid fields
                const invalid = Array.from(form.elements).find(el => el.willValidate && !el.checkValidity());
                Array.from(form.elements).forEach((el) => {
                    if (el.willValidate && !el.checkValidity()) {
                        setFieldError(el, el.validationMessage);
                    }
                });
                if (invalid && invalid.focus) invalid.focus();
                statusLive.textContent = 'Please fix the highlighted fields.';
                return;
            }

            // prepare submit
            submitBtn.disabled = true;
            submitBtn.setAttribute('aria-busy', 'true');
            statusLive.textContent = 'Sending message…';

            const action = (form.getAttribute('action') || '').trim();
            const method = (form.getAttribute('method') || 'POST').toUpperCase();
            const data = new FormData(form);

            // If a real endpoint is provided (not '#' or empty), attempt to POST; otherwise save locally
            const shouldSend = action && action !== '#';

            if (shouldSend) {
                fetch(action, { method, body: data, credentials: 'same-origin' })
                    .then((res) => {
                        if (!res.ok) throw new Error('Network error');
                        return res.json().catch(() => ({}));
                    })
                    .then(() => {
                        messageEl.hidden = false;
                        messageEl.className = 'form-message success';
                        messageEl.textContent = 'Thanks — your message was sent.';
                        statusLive.textContent = 'Message sent.';
                        form.reset();
                        localStorage.removeItem('contact-draft');
                    })
                    .catch(() => {
                        messageEl.hidden = false;
                        messageEl.className = 'form-message error';
                        messageEl.textContent = 'Sorry — there was a problem sending your message. Your message was saved locally.';
                        statusLive.textContent = 'Message not sent — saved locally.';
                        try { localStorage.setItem('contact-draft', JSON.stringify(Object.fromEntries(data))); } catch (err) { /* ignore */ }
                    })
                    .finally(() => {
                        submitBtn.disabled = false;
                        submitBtn.removeAttribute('aria-busy');
                    });
            } else {
                // no backend configured: save locally and simulate quick success
                try { localStorage.setItem('contact-draft', JSON.stringify(Object.fromEntries(data))); } catch (err) { /* ignore */ }
                setTimeout(() => {
                    messageEl.hidden = false;
                    messageEl.className = 'form-message success';
                    messageEl.textContent = 'Thanks — your message has been saved locally (no server configured).';
                    statusLive.textContent = 'Message saved locally.';
                    form.reset();
                    submitBtn.disabled = false;
                    submitBtn.removeAttribute('aria-busy');
                }, 600);
            }
        });
    })();

});