document.addEventListener('DOMContentLoaded', function () {
    const toggle = document.querySelector('.af-mobile-toggle');
    const menu = document.querySelector('.af-mobile-menu');

    if (toggle && menu) {
        toggle.addEventListener('click', () => {
            menu.classList.toggle('open');
        });
    }

    // Lightbox
    const lightbox = document.getElementById('af-lightbox');
    const lightboxImg = document.getElementById('af-lightbox-image');
    const closeBtn = document.querySelector('.af-lightbox-close');

    if (lightbox && lightboxImg && closeBtn) {
        document.querySelectorAll('.af-lightbox-trigger').forEach(link => {
            link.addEventListener('click', e => {
                e.preventDefault();
                const src = link.getAttribute('href');
                lightboxImg.setAttribute('src', src);
                lightbox.classList.add('open');
            });
        });

        closeBtn.addEventListener('click', () => {
            lightbox.classList.remove('open');
            lightboxImg.setAttribute('src', '');
        });

        lightbox.addEventListener('click', e => {
            if (e.target === lightbox) {
                lightbox.classList.remove('open');
                lightboxImg.setAttribute('src', '');
            }
        });
    }
});
document.addEventListener('DOMContentLoaded', function () {
    // ...existing code...

    // Video modal
    const videoModal = document.getElementById('af-video-modal');
    const videoEmbed = document.getElementById('af-video-embed');
    const videoClose = document.querySelector('.af-video-modal-close');

    if (videoModal && videoEmbed && videoClose) {
        document.querySelectorAll('.af-video-card').forEach(card => {
            card.addEventListener('click', () => {
                const url = card.getAttribute('data-video-url');
                if (!url) return;

                const embedUrl = url.replace('watch?v=', 'embed/');

                videoEmbed.innerHTML = `<iframe src="${embedUrl}" frameborder="0" allowfullscreen></iframe>`;
                videoModal.classList.add('open');
            });
        });

        const closeVideoModal = () => {
            videoModal.classList.remove('open');
            videoEmbed.innerHTML = '';
        };

        videoClose.addEventListener('click', closeVideoModal);
        videoModal.addEventListener('click', e => {
            if (e.target === videoModal) closeVideoModal();
        });
    }
});
document.addEventListener('DOMContentLoaded', function () {

    // Helper: Create dropzone uploader
    function createUploader(dropzoneId, previewId, hiddenInputName, allowedTypes) {

        const dropzone = document.getElementById(dropzoneId);
        const preview = document.getElementById(previewId);
        const hiddenInput = document.querySelector(`input[name="${hiddenInputName}"]`);

        let uploadedItems = [];

        // Click to upload
        dropzone.addEventListener('click', () => {
            const input = document.createElement('input');
            input.type = 'file';
            input.multiple = true;
            input.accept = allowedTypes.join(',');
            input.onchange = () => handleFiles(input.files);
            input.click();
        });

        // Drag over
        dropzone.addEventListener('dragover', e => {
            e.preventDefault();
            dropzone.classList.add('dragover');
        });

        dropzone.addEventListener('dragleave', () => {
            dropzone.classList.remove('dragover');
        });

        // Drop
        dropzone.addEventListener('drop', e => {
            e.preventDefault();
            dropzone.classList.remove('dragover');
            handleFiles(e.dataTransfer.files);
        });

        // Handle file uploads
        function handleFiles(files) {
            [...files].forEach(file => uploadFile(file));
        }

        // Upload file via AJAX
        function uploadFile(file) {

            const formData = new FormData();
            formData.append('action', 'af_upload_media');
            formData.append('file', file);

            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/wp-admin/admin-ajax.php', true);

            // Progress bar
            const item = document.createElement('div');
            item.className = 'af-upload-item';
            item.innerHTML = `
                <div class="af-upload-progress"></div>
                <span>${file.name}</span>
            `;
            preview.appendChild(item);

            xhr.upload.addEventListener('progress', e => {
                if (e.lengthComputable) {
                    const percent = (e.loaded / e.total) * 100;
                    item.querySelector('.af-upload-progress').style.width = percent + '%';
                }
            });

            xhr.onload = () => {
                const response = JSON.parse(xhr.responseText);

                if (response.success) {
                    const data = response.data;

                    uploadedItems.push(data);
                    hiddenInput.value = JSON.stringify(uploadedItems);

                    // Replace progress bar with preview
                    item.innerHTML = renderPreview(data);
                } else {
                    item.innerHTML = `<span class="error">${response.data.message}</span>`;
                }
            };

            xhr.send(formData);
        }

        // Render preview based on file type
        function renderPreview(data) {
            if (data.type.startsWith('image/')) {
                return `<img src="${data.thumb}" class="af-preview-img">`;
            }
            if (data.type.startsWith('video/')) {
                return `<video controls src="${data.url}" class="af-preview-video"></video>`;
            }
            if (data.type.startsWith('audio/')) {
                return `<audio controls src="${data.url}" class="af-preview-audio"></audio>`;
            }
            return `<span>${data.url}</span>`;
        }
    }
 document.querySelectorAll('.af-profile-tabs button').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.af-profile-tabs button').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const tab = btn.getAttribute('data-tab');

        document.querySelectorAll('.af-tab-content').forEach(c => c.classList.remove('active'));
        document.getElementById(`tab-${tab}`).classList.add('active');
    });
});
   

    // Initialize uploaders
    createUploader('photoDropzone', 'photoPreview', 'uploaded_photos', ['image/*']);
    createUploader('videoDropzone', 'videoPreview', 'uploaded_videos', ['video/*']);
    createUploader('audioDropzone', 'audioPreview', 'uploaded_audio', ['audio/*']);

});
const steps = document.querySelectorAll('.af-step');
let currentStep = 1;

function showStep(step) {
    steps.forEach(s => s.classList.remove('active'));
    document.querySelector(`.af-step[data-step="${step}"]`).classList.add('active');

    const progress = (step - 1) / (steps.length - 1) * 100;
    document.querySelector('.af-progress-bar').style.width = progress + '%';

    currentStep = step;
}

showStep(1);

document.querySelectorAll('.af-next').forEach(btn => {
    btn.addEventListener('click', () => showStep(currentStep + 1));
});

document.querySelectorAll('.af-prev').forEach(btn => {
    btn.addEventListener('click', () => showStep(currentStep - 1));
});
const wizardForm = document.getElementById('afWizardForm');

if (wizardForm) {
    wizardForm.addEventListener('input', () => {
        const data = new FormData(wizardForm);
        const obj = {};
        data.forEach((value, key) => obj[key] = value);
        localStorage.setItem('af_memorial_wizard', JSON.stringify(obj));
    });

    const saved = localStorage.getItem('af_memorial_wizard');
    if (saved) {
        const data = JSON.parse(saved);
        Object.keys(data).forEach(key => {
            const field = wizardForm.querySelector(`[name="${key}"]`);
            if (field) field.value = data[key];
        });
    }
}
/* Desktop nav visible, mobile hidden */
.af-nav {
    display: flex;
}

.af-mobile-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.af-mobile-toggle span {
    width: 28px;
    height: 3px;
    background: #fff;
    display: block;
}

/* Mobile menu hidden by default */
.af-mobile-menu {
    display: none;
    background: #111;
    padding: 20px;
}

/* When open */
.af-mobile-menu.open {
    display: block;
}

/* MOBILE BREAKPOINT */
@media (max-width: 900px) {

    /* Hide desktop nav */
    .af-nav {
        display: none;
    }

    /* Show hamburger */
    .af-mobile-toggle {
        display: flex;
    }
}
/* ---------------------------------------------------------
   UPLOAD AREA
--------------------------------------------------------- */
.af-upload {
    background: #fafafa;
    border: 2px dashed #ccc;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.2s ease;
    font-size: 15px;
    color: #666;
}

.af-upload.dragover {
    background: #f0f8ff;
    border-color: #0073aa;
    color: #0073aa;
}

/* ---------------------------------------------------------
   PREVIEW GRID
--------------------------------------------------------- */
.af-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.af-preview-item {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.af-preview-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video preview */
.af-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Audio preview */
.af-preview-item audio {
    width: 100%;
}

/* ---------------------------------------------------------
   SWIPER CAROUSEL (Fixes small images)
--------------------------------------------------------- */
.af-gallery-swiper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 40px auto;
}

.af-gallery-slide {
    width: 100%;
    height: 500px; /* FIXES SMALL PHOTO ISSUE */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Navigation buttons */
.swiper-button-next,
.swiper-button-prev {
    color: #333;
    transition: 0.2s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #000;
}

/* Pagination dots */
.swiper-pagination-bullet {
    background: #999;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #333;
}

/* ---------------------------------------------------------
   VIDEO + AUDIO ON MEMORIAL PAGE
--------------------------------------------------------- */
.af-video {
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.af-audio-item {
    margin-bottom: 15px;
}

/* ---------------------------------------------------------
   QR CODE
--------------------------------------------------------- */
.af-qr {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    margin: 20px auto;
}

/* ---------------------------------------------------------
   GENERAL MEMORIAL PAGE LAYOUT
--------------------------------------------------------- */
.af-section {
    margin-bottom: 50px;
}

.af-section h2 {
    margin-bottom: 15px;
    font-size: 26px;
    font-weight: 600;
}

.af-biography {
    font-size: 17px;
    line-height: 1.7;
    color: #444;
}
/* HERO */
.af-hero {
    position: relative;
    min-height: 420px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    color: #ffffff;
}

.af-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.15));
}

.af-hero-inner {
    position: relative;
    padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.af-hero-inner h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}

.af-hero-inner p {
    font-size: 1.1rem;
    max-width: 640px;
}

/* HOME SECTIONS */
.af-home-wrapper {
    max-width: 1100px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.af-home-section {
    margin-bottom: 4rem;
}

.af-section-title {
    font-size: 2rem;
    color: #111;
    margin-bottom: 1rem;
}

.af-section-text {
    font-size: 1.1rem;
    color: #444;
}

/* STEPS */
.af-steps {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.af-step {
    flex: 1;
    min-width: 260px;
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.af-step-number {
    background: #c9a15b;
    color: #111;
    font-weight: bold;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* BENEFITS */
.af-benefits {
    list-style: none;
    padding: 0;
}

.af-benefits li {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}