script.js

document.addEventListener('DOMContentLoaded', () => {

    // Reveal on scroll
    const reveals = document.querySelectorAll('.reveal');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
    reveals.forEach(el => observer.observe(el));

    // Nav scroll effect
    const nav = document.getElementById('nav');
    let ticking = false;
    window.addEventListener('scroll', () => {
        if (!ticking) {
            requestAnimationFrame(() => {
                nav.classList.toggle('nav-scrolled', window.scrollY > 50);
                ticking = false;
            });
            ticking = true;
        }
    });

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(a => {
        a.addEventListener('click', e => {
            e.preventDefault();
            const t = document.querySelector(a.getAttribute('href'));
            if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    });

    // FAQ accordion
    document.querySelectorAll('.faq-trigger').forEach(btn => {
        btn.addEventListener('click', () => {
            const item = btn.parentElement;
            const open = item.classList.contains('active');
            document.querySelectorAll('.faq-item.active').forEach(i => {
                i.classList.remove('active');
                i.querySelector('.faq-trigger').setAttribute('aria-expanded', 'false');
            });
            if (!open) {
                item.classList.add('active');
                btn.setAttribute('aria-expanded', 'true');
            }
        });
    });

    // Template card scroll on hover
    document.querySelectorAll('.template-card').forEach(card => {
        const preview = card.querySelector('.template-preview');
        const scroll = card.querySelector('.template-scroll');
        if (!preview || !scroll) return;

        card.addEventListener('mouseenter', () => {
            const maxScroll = -(scroll.scrollHeight - preview.clientHeight);
            scroll.style.transform = `translateY(${maxScroll}px)`;
        });

        card.addEventListener('mouseleave', () => {
            scroll.style.transform = 'translateY(0)';
        });

        card.addEventListener('touchstart', () => {
            const maxScroll = -(scroll.scrollHeight - preview.clientHeight);
            scroll.style.transform = `translateY(${maxScroll}px)`;
        }, { passive: true });

        card.addEventListener('touchend', () => {
            scroll.style.transform = 'translateY(0)';
        });
    });

    // Template modal / lightbox
    const modal = document.getElementById('templateModal');
    const modalPreview = modal.querySelector('.template-modal-preview');
    const modalClose = modal.querySelector('.template-modal-close');
    const modalPrev = modal.querySelector('.template-modal-prev');
    const modalNext = modal.querySelector('.template-modal-next');
    const modalBackdrop = modal.querySelector('.template-modal-backdrop');
    const cards = [...document.querySelectorAll('.template-card')];
    let currentIndex = 0;

    let rafId = null;
    let mouseY = null;
    let hintTimeout = null;
    let hintDismissed = false;
    let cleanupTimeout = null;
    const modalHint = modalPreview.querySelector('.template-modal-hint');

    function onModalMouseMove(e) {
        const rect = modalPreview.getBoundingClientRect();
        mouseY = (e.clientY - rect.top) / rect.height;

        if (!hintDismissed && modalHint) {
            hintDismissed = true;
            modalHint.classList.remove('visible');
        }
    }

    function onModalMouseLeave() {
        mouseY = null;
    }

    function scrollTick() {
        if (mouseY !== null) {
            const maxScroll = modalPreview.scrollHeight - modalPreview.clientHeight;
            const normalized = (mouseY - 0.5) * 2; // -1 to 1
            const deadzone = 0.3;
            let speed = 0;
            if (Math.abs(normalized) > deadzone) {
                speed = (Math.abs(normalized) - deadzone) / (1 - deadzone);
                speed = speed * speed * 4;
                speed *= Math.sign(normalized);
            }
            modalPreview.scrollTop = Math.max(0, Math.min(maxScroll, modalPreview.scrollTop + speed));
        }
        rafId = requestAnimationFrame(scrollTick);
    }

    function openModal(card) {
        currentIndex = cards.indexOf(card);
        const scrollEl = card.querySelector('.template-scroll');
        if (!scrollEl) return;
        const clone = scrollEl.cloneNode(true);
        clone.style.transform = 'none';
        clone.style.width = (modalPreview.clientWidth / 2) + 'px';

        clearTimeout(cleanupTimeout);
        Array.from(modalPreview.children).forEach(child => {
            if (child !== modalHint) modalPreview.removeChild(child);
        });
        modalPreview.insertBefore(clone, modalHint);

        modalPreview.scrollTop = 0;
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';

        hintDismissed = false;
        if (modalHint) {
            modalHint.classList.remove('visible');
            hintTimeout = setTimeout(() => modalHint.classList.add('visible'), 400);
        }

        mouseY = null;
        modalPreview.addEventListener('mousemove', onModalMouseMove);
        modalPreview.addEventListener('mouseleave', onModalMouseLeave);
        rafId = requestAnimationFrame(scrollTick);
    }

    function closeModal() {
        cancelAnimationFrame(rafId);
        clearTimeout(hintTimeout);
        mouseY = null;
        if (modalHint) modalHint.classList.remove('visible');
        modalPreview.removeEventListener('mousemove', onModalMouseMove);
        modalPreview.removeEventListener('mouseleave', onModalMouseLeave);
        modal.classList.remove('active');
        document.body.style.overflow = '';
        cleanupTimeout = setTimeout(() => {
            Array.from(modalPreview.children).forEach(child => {
                if (child !== modalHint) modalPreview.removeChild(child);
            });
        }, 300);
    }

    function navigateModal(direction) {
        if (!modal.classList.contains('active')) return;
        currentIndex = (currentIndex + direction + cards.length) % cards.length;
        const card = cards[currentIndex];
        const scrollEl = card.querySelector('.template-scroll');
        if (!scrollEl) return;
        const clone = scrollEl.cloneNode(true);
        clone.style.transform = 'none';
        clone.style.width = (modalPreview.clientWidth / 2) + 'px';

        clearTimeout(cleanupTimeout);
        Array.from(modalPreview.children).forEach(child => {
            if (child !== modalHint) modalPreview.removeChild(child);
        });
        modalPreview.insertBefore(clone, modalHint);
        modalPreview.scrollTop = 0;

        hintDismissed = false;
        clearTimeout(hintTimeout);
        if (modalHint) {
            modalHint.classList.remove('visible');
            hintTimeout = setTimeout(() => modalHint.classList.add('visible'), 400);
        }
    }

    document.querySelectorAll('.template-card .template-browser').forEach(browser => {
        browser.addEventListener('click', () => {
            openModal(browser.closest('.template-card'));
        });
    });

    modalClose.addEventListener('click', closeModal);
    modalPrev.addEventListener('click', () => navigateModal(-1));
    modalNext.addEventListener('click', () => navigateModal(1));
    modalBackdrop.addEventListener('click', closeModal);
    document.addEventListener('keydown', (e) => {
        if (!modal.classList.contains('active')) return;
        if (e.key === 'Escape') closeModal();
        if (e.key === 'ArrowLeft') navigateModal(-1);
        if (e.key === 'ArrowRight') navigateModal(1);
    });

    // Contact form
    const form = document.querySelector('.contact-form');
    if (form) {
        form.querySelectorAll('[required]').forEach(input => {
            input.addEventListener('input', () => input.classList.remove('invalid'));
        });

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const inputs = form.querySelectorAll('[required]');
            let valid = true;

            inputs.forEach(input => {
                const val = input.value.trim();
                if (!val || (input.type === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val))) {
                    input.classList.add('invalid');
                    valid = false;
                } else {
                    input.classList.remove('invalid');
                }
            });

            if (!valid) return;

            const formData = new FormData(form);
            fetch('/', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams(formData).toString()
            }).then(() => {
                const success = document.createElement('div');
                success.className = 'form-success';
                const h3 = document.createElement('h3');
                h3.textContent = 'Sent!';
                const p = document.createElement('p');
                p.textContent = "I'll get back to you within 24 hours. Probably sooner.";
                success.appendChild(h3);
                success.appendChild(p);
                form.replaceChildren(success);
            }).catch(() => {
                const error = document.createElement('div');
                error.className = 'form-success';
                const h3 = document.createElement('h3');
                h3.textContent = 'Something broke (ironic, I know)';
                const p = document.createElement('p');
                p.textContent = 'Email me directly at ';
                const a = document.createElement('a');
                a.href = 'mailto:fixedfastdev@protonmail.com';
                a.textContent = 'fixedfastdev@protonmail.com';
                p.appendChild(a);
                error.appendChild(h3);
                error.appendChild(p);
                form.replaceChildren(error);
            });
        });
    }

});