script.js

const cursor = document.querySelector('.cursor');
const navBtns = document.querySelectorAll('.nav-btn');
const closeBtns = document.querySelectorAll('.close-btn');
const overlays = document.querySelectorAll('.overlay');
const portals = document.querySelectorAll('.portal');
const bgToggle = document.querySelector('.bg-toggle');
const heroTitleTrigger = document.getElementById('hero-title-trigger');
const scrollTrigger = document.getElementById('scroll-trigger');
const wipContainer = document.querySelector('.wip-container');
const heroContent = document.querySelector('.hero-content');

// Dynamic WIP Box Positioning - centers between header and hero text
function positionWipBox() {
    if (!wipContainer || !heroContent) return;

    // Get the header bottom position
    // On mobile, use the site-header; on desktop, use the nav/bg-toggle (fixed at ~2rem + height)
    const isMobile = window.innerWidth <= 768;
    let headerBottom;

    if (isMobile) {
        const siteHeader = document.querySelector('.site-header');
        if (siteHeader && getComputedStyle(siteHeader).display !== 'none') {
            headerBottom = siteHeader.getBoundingClientRect().bottom;
        } else {
            headerBottom = 60; // Fallback mobile header height
        }
    } else {
        // Desktop: nav is fixed at ~2rem from top, approx 32px + button height (~40px)
        headerBottom = 72; // ~4.5rem
    }

    // Get the hero content top position
    const heroRect = heroContent.getBoundingClientRect();
    const heroTop = heroRect.top;
    const wipRect = wipContainer.getBoundingClientRect();

    // Place the WIP box above the hero title with a fixed gap
    const gap = isMobile ? 16 : 24;
    const desiredTop = heroTop - wipRect.height - gap;
    const minTop = headerBottom + (isMobile ? 16 : 24);
    const top = Math.max(desiredTop, minTop);

    // Set the position (using pixels for precision)
    wipContainer.style.top = top + 'px';
}

// Run on load, resize, and orientation change
window.addEventListener('load', positionWipBox);
window.addEventListener('resize', positionWipBox);
window.addEventListener('orientationchange', positionWipBox);

// Also run after a brief delay to ensure all fonts/assets are loaded
setTimeout(positionWipBox, 100);

// Data - loaded dynamically from manifest
let CATEGORY_DATA = {};

const SCENAR_REAL_CREDITS = `
    <div class="gallery-credits">
        <h3>Crédits</h3>
        <p>
            Réalisatrice/Scénariste - Numina Ducrot<br>
            <br>
            Production Les filmeuses<br>
            Production Nogos<br>
            <br>
            Directrice de Casting - Tess Delfane<br>
            Rôle d’Alice : Alice Metteliev<br>
            Rôle Idée Noire - Antoine Thierry Anezo<br>
            Rôle Anna - Anna Stanic<br>
            <br>
            Chef opérateur - Lucas Zef<br>
            Chef électricien - Etienne De Wailly<br>
            Ingé son - David Lasserre<br>
            Perchman - Joseph Torre<br>
            Premier ass réal - Pauline Lamaignère<br>
            Script - Sarah Salazar<br>
            Régie général - Marianne Dautheville<br>
            Ass Régie - Apolline Mazard<br>
            Costumière Tournage - Lili Nugier<br>
            Chef déco et accessoiristes plateau - Manon Borgias<br>
            Décorateur - François Ferchaud<br>
            Maquillage/Coiffure - Agathe Lecoq<br>
            Chef Costume - Anna Letiembre<br>
            Fabrication du masque - Justin Pastres<br>
            Monteur son - Thomas Lachesnais<br>
            Composition musicale - Pablo Ortiz Afrikian<br>
            Colorisation / étalonnage - Alice Syrakvash<br>
            <br>
            Distribution / diffusion<br>
            Les filmeuses<br>
            Graphic Designer - Clément Guitteau<br>
            Making Off - Florijan Masselot<br>
            Photographe Plateau - Chloé David<br>
            <br>
            Remerciement spécial :<br>
            Lewis Bedar et Sebastien Kowalski<br>
            Infini remerciement pour le restaurant Sarah’s Kitchen
        </p>
    </div>
`;

const MISE_EN_SCENE_VIDEO = `
    <div class="gallery-video">
        <div class="gallery-video-frame">
            <iframe
                src="https://www.youtube.com/embed/aRjmosqFA2c"
                title="Mise en scène — vidéo"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
                loading="lazy"></iframe>
        </div>
    </div>
`;

const GROUPED_CATEGORIES = {
    dessins: {
        order: ['carrousel', 'black-bg', 'white-bg'],
        labels: {
            'carrousel': 'Carrousel',
            'black-bg': 'Fond noir',
            'white-bg': 'Fond blanc',
            'misc': 'Autres'
        },
        matchers: {
            'carrousel': (src) => src.includes('/carrousel-'),
            'black-bg': (src) => src.includes('/black-bg-'),
            'white-bg': (src) => src.includes('/white-bg-')
        }
    },
    poesie: {
        order: ['recueil', 'fille-qui-etait-une-blague', 'poesie-en-vrac'],
        labels: {
            'recueil': 'Recueil',
            'fille-qui-etait-une-blague': 'Fille qui était une blague',
            'poesie-en-vrac': 'Poésie en vrac',
            'misc': 'Autres'
        },
        matchers: {
            'recueil': (src) => {
                const lowerSrc = src.toLowerCase();
                return lowerSrc.includes('recueuil') || lowerSrc.includes('recueil');
            },
            'fille-qui-etait-une-blague': (src) => src.toLowerCase().includes('fille-qui-etait-une-blague'),
            'poesie-en-vrac': (src) => src.toLowerCase().includes('poesie-en-vrac')
        }
    }
};

const toSectionSlug = (value) => value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');

const toSectionLabel = (category, sectionKey) => {
    const configuredLabel = GROUPED_CATEGORIES[category]?.labels?.[sectionKey];
    if (configuredLabel) return configuredLabel;

    const readable = sectionKey.replace(/-/g, ' ').trim();
    if (!readable) return sectionKey;
    return readable.charAt(0).toUpperCase() + readable.slice(1);
};

function getGroupedSections(category, categoryData) {
    if (!categoryData) return null;

    if (typeof categoryData === 'object' && !Array.isArray(categoryData)) {
        const configOrder = GROUPED_CATEGORIES[category]?.order || [];
        const objectKeys = Object.keys(categoryData);
        const baseOrder = configOrder.length ? [...configOrder] : [...objectKeys];

        if (configOrder.length) {
            objectKeys.forEach((key) => {
                if (!baseOrder.includes(key)) baseOrder.push(key);
            });
        }

        const order = baseOrder.filter((key) => Array.isArray(categoryData[key]) && categoryData[key].length > 0);
        return order.length ? { sections: categoryData, order } : null;
    }

    const config = GROUPED_CATEGORIES[category];
    if (!config || !Array.isArray(categoryData)) return null;

    const matched = new Set();
    const sections = {};
    const order = [];

    config.order.forEach((key) => {
        const matcher = config.matchers[key];
        if (!matcher) return;
        const items = categoryData.filter((src) => matcher(src));
        if (!items.length) return;
        sections[key] = items;
        order.push(key);
        items.forEach((src) => matched.add(src));
    });

    const leftovers = categoryData.filter((src) => !matched.has(src));
    if (leftovers.length) {
        sections.misc = leftovers;
        order.push('misc');
    }

    return order.length ? { sections, order } : null;
}

// Load manifest on page load
fetch('assets/manifest.json')
    .then(response => response.json())
    .then(data => {
        CATEGORY_DATA = data;
        console.log('✅ Manifest loaded:', Object.keys(data).length, 'categories');

        // Portal Click Logic - moved here to ensure CATEGORY_DATA is loaded
        portals.forEach(portal => {
            portal.addEventListener('click', () => {
                const category = portal.getAttribute('data-category');
                if (category === 'about') {
                    const aboutOverlay = document.getElementById('about');
                    if (aboutOverlay) aboutOverlay.classList.add('active');
                    return;
                }
                const categoryData = CATEGORY_DATA[category];
                const info = CATEGORY_INFO[category] || { title: category, desc: "" };

                // Create gallery overlay
                const galleryOverlay = document.createElement('div');
                galleryOverlay.className = 'overlay active dynamic-gallery-overlay';
                galleryOverlay.style.zIndex = '300';

                let imagesHtml = '';

                const grouped = getGroupedSections(category, categoryData);

                if (grouped) {
                    let globalIndex = 0;
                    let sectionsRendered = 0;

                    grouped.order.forEach((sectionKey) => {
                        const items = grouped.sections[sectionKey] || [];
                        if (!items.length) return;

                        if (sectionsRendered > 0) imagesHtml += `<hr class="gallery-divider">`;

                        const sectionLabel = toSectionLabel(category, sectionKey);
                        imagesHtml += `<h3 class="gallery-section-label">${sectionLabel}</h3>`;

                        const sectionSlug = toSectionSlug(sectionKey);
                        imagesHtml += `<div class="gallery-section gallery-section--${sectionSlug}">`;
                        imagesHtml += items.map((src, index) => `
                            <img src="${encodeURI(src)}" class="gallery-item gallery-item--${sectionSlug}" style="animation-delay: ${(globalIndex + index) * 0.1}s" alt="${category} ${sectionKey} ${index + 1}" data-src="${encodeURI(src)}">
                        `).join('');
                        imagesHtml += `</div>`;

                        globalIndex += items.length;
                        sectionsRendered += 1;
                    });
                } else {
                    // Standard array of images for other categories
                    const images = Array.isArray(categoryData) ? categoryData : [];
                    imagesHtml = images.map((src, index) => `
                        <img src="${encodeURI(src)}" class="gallery-item" style="animation-delay: ${index * 0.1}s" alt="${category} image ${index + 1}" data-src="${encodeURI(src)}">
                    `).join('');
                }

                galleryOverlay.innerHTML = `
                    <button class="close-btn" style="z-index:301">&times;</button>
                    <div class="overlay-content">
                        <h2>${info.title}</h2>
                        <p>${info.desc}</p>
                        <div class="gallery-grid">
                            ${imagesHtml}
                        </div>
                        ${category === 'mise-en-scene-theatre' ? MISE_EN_SCENE_VIDEO : ''}
                        ${category === 'scenar-real' ? SCENAR_REAL_CREDITS : ''}
                    </div>
                `;
                document.body.appendChild(galleryOverlay);

                const close = galleryOverlay.querySelector('.close-btn');
                close.addEventListener('click', () => galleryOverlay.remove());

                // Add cursor hover effect to new elements
                const newClose = galleryOverlay.querySelector('.close-btn');
                newClose.addEventListener('mouseenter', addHoverState);
                newClose.addEventListener('mouseleave', removeHoverState);

                // Lightbox Logic for this gallery
                const items = Array.from(galleryOverlay.querySelectorAll('.gallery-item'));
                const sources = items.map(item => item.getAttribute('data-src'));

                items.forEach((item, index) => {
                    item.addEventListener('click', (e) => {
                        e.stopPropagation(); // Prevent bubbling
                        openLightbox(sources, index);
                    });
                    item.addEventListener('mouseenter', addHoverState);
                    item.addEventListener('mouseleave', removeHoverState);
                });
            });
        });
    })
    .catch(err => {
        console.error('❌ Failed to load manifest:', err);
    });

const CATEGORY_INFO = {
    "modele": { title: "Modelling", desc: "Exploring the dialogue between body and fabric; movement as soft rebellion." },
    "photo": {
        title: "Photographie", desc: "La photographie m’aide à développer mon imaginaire à partir des scènes de vie " +
            "du quotidien. Elle me pousse à inventer des histoires à partir de l’immobile, du familier, de ce qu’on voit tous les" +
            "jours sans vraiment y penser. En capturant ces petits instants, j’apprends à regarder autrement et à laisser mon imagination prendre le relais."
    },
    "dessins": {
        title: "Dessins", desc: "Le dessin enrichit mes textes. Les mots et les images se répondent, et l’un" +
            "ouvre un passage vers l’autre.<br>J’aime mettre en scène mes dessins par la superposition et le collage, " +
            "pour créer des situations, des scènes et des enjeux. Cette pratique visuelle me permet de repenser les " +
            "mécanismes des récits et de questionner une autre manière de raconter.<br>Elle ouvre un pont naturel vers " +
            "l’écriture, où mes histoires se réinventent."
    },
    "poesie": {
        title: "Poésie", desc: "Recueils et fragments, pour dire l’intime autrement.<br>" +
            "Mon envie d’écrire de la poésie vient de ma frustration face à ma dysorthographie. <br>" +
            "Longtemps, j’ai eu peur des mots. Avec la poésie, j’ai appris à jouer avec eux : la prosodie, " +
            "le sens, le rythme, les formes et les genres deviennent autant de terrains de jeu. "
    },
    "mise-en-scene-theatre": {
        title: "Mise en scène", desc: "La mise en scène m’a appris les bases de la dramaturgie et m’a permis de" +
            "tester différents outils pour raconter des histoires : le rythme des scènes, la tension entre les personnages," +
            "l’espace scénique, le jeu du corps et de la voix. Ces expériences m’ont offert un terrain pour expérimenter et" +
            "comprendre comment construire un récit vivant."
    },
    "scenar-real": {
        title: "Scénar. / Réal.", desc: "Synopsis : Alice vit recluse dans un appartement plongé dans l'ombre. <br>" +
            "Une présence inquiétante, qu'elle appelle Idée noire, l'empêche de franchir la porte. <br>" +
            "De l'extérieur, sa sœur tente de la pousser à réagir pour l'aider à retrouver la lumière." +
            "<br><br>Court métrage de 10 min.<br>Produit par Les filmeuses et Nogos films."
    }
};

// Custom Cursor Logic - only on non-touch devices
const isTouchDevice = window.matchMedia('(hover: none)').matches || 'ontouchstart' in window;

const addHoverState = () => cursor.classList.add('hovered');
const removeHoverState = () => cursor.classList.remove('hovered');

if (!isTouchDevice && cursor) {
    document.addEventListener('mousemove', (e) => {
        cursor.style.left = e.clientX + 'px';
        cursor.style.top = e.clientY + 'px';
    });

    document.querySelectorAll('a, button, .portal, .hero-content, .scroll-indicator').forEach(el => {
        el.addEventListener('mouseenter', addHoverState);
        el.addEventListener('mouseleave', removeHoverState);
    });
} else if (cursor) {
    // Hide cursor element on touch devices
    cursor.style.display = 'none';
}

// Background Toggle Logic
if (bgToggle) {
    bgToggle.addEventListener('click', () => {
        document.body.classList.toggle('hide-bg');
        const isHidden = document.body.classList.contains('hide-bg');
        bgToggle.querySelector('.toggle-text').textContent = isHidden ? 'BG: Pure' : 'BG: Image';
    });
    bgToggle.addEventListener('mouseenter', addHoverState);
    bgToggle.addEventListener('mouseleave', removeHoverState);
}

// Scroll Logic
const scrollToUniverse = () => {
    const universe = document.getElementById('universe');
    if (universe) {
        universe.scrollIntoView({ behavior: 'smooth' });
    }
};

if (heroTitleTrigger) heroTitleTrigger.addEventListener('click', scrollToUniverse);
if (scrollTrigger) scrollTrigger.addEventListener('click', scrollToUniverse);

// Navigation Logic
navBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        const targetId = btn.getAttribute('data-target');
        if (!targetId) return;

        const target = document.getElementById(targetId);
        if (!target) return;

        if (target.classList.contains('overlay')) {
            target.classList.add('active');
        } else {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});

closeBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        overlays.forEach(overlay => overlay.classList.remove('active'));
        // Remove dynamic gallery overlays
        const dynamic = document.querySelector('.dynamic-gallery-overlay');
        if (dynamic) dynamic.remove();
    });
});

// Close overlay on escape key
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        overlays.forEach(overlay => overlay.classList.remove('active'));
        const dynamic = document.querySelector('.dynamic-gallery-overlay');
        if (dynamic) dynamic.remove();
    }
});

// Global Lightbox Function
function openLightbox(sources, startIndex = 0) {
    const images = Array.isArray(sources) ? sources : [sources];
    if (!images.length) return;

    let currentIndex = Math.max(0, Math.min(startIndex, images.length - 1));

    const lightbox = document.createElement('div');
    lightbox.className = 'lightbox-overlay active';
    lightbox.innerHTML = `
        <button class="lightbox-nav lightbox-nav--prev" aria-label="Image précédente">&larr;</button>
        <img src="${images[currentIndex]}" class="lightbox-img" alt="">
        <button class="lightbox-nav lightbox-nav--next" aria-label="Image suivante">&rarr;</button>
    `;

    const img = lightbox.querySelector('.lightbox-img');
    const prevBtn = lightbox.querySelector('.lightbox-nav--prev');
    const nextBtn = lightbox.querySelector('.lightbox-nav--next');

    const updateImage = () => {
        img.src = images[currentIndex];
    };

    const moveBy = (delta) => {
        if (images.length < 2) return;
        currentIndex = (currentIndex + delta + images.length) % images.length;
        updateImage();
    };

    const closeLightbox = () => {
        lightbox.classList.remove('active');
        setTimeout(() => lightbox.remove(), 300);
        document.removeEventListener('keydown', onKeyDown);
    };

    const onKeyDown = (e) => {
        if (e.key === 'Escape') {
            closeLightbox();
        } else if (e.key === 'ArrowLeft') {
            moveBy(-1);
        } else if (e.key === 'ArrowRight') {
            moveBy(1);
        }
    };

    if (images.length < 2) {
        prevBtn.style.display = 'none';
        nextBtn.style.display = 'none';
    }

    prevBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        moveBy(-1);
    });

    nextBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        moveBy(1);
    });

    img.addEventListener('click', (e) => {
        e.stopPropagation();
    });

    // Close on click anywhere outside controls
    lightbox.addEventListener('click', closeLightbox);
    document.addEventListener('keydown', onKeyDown);

    document.body.appendChild(lightbox);
}