/* ----------------------------------------------------------------
   Le Shed — Objets décoratifs
   On place les 15 SVG d'objets pré-générés (assets/objets/objet-XX.svg)
   à des positions choisies, avec des vitesses de parallax variées.

   Règle de placement :
   - Bords (gauche/droite) du haut et du milieu → AU-DESSUS du contenu
   - Centre de page (entre les colonnes) à partir du milieu → EN-DESSOUS

   Vitesses Rellax variées par objet pour un effet de profondeur.
   ---------------------------------------------------------------- */

(function () {

    // Configuration des objets à placer.
    // file : SVG à charger (1..15)
    // x : décalage horizontal en pixels depuis 'side'
    // y : position verticale en pixels depuis le haut du document
    // side : 'left' | 'right' | 'center' (ancrage horizontal)
    // size : taille (largeur) en pixels
    // speed : vitesse Rellax (négative = plus rapide, positive = plus lente)
    // layer : 'over' (au-dessus du contenu) | 'under' (en dessous)
    var OBJETS = [
        // === HAUT — bords, au-dessus ===
        { file:  1, side: 'left',   x: -50,  y: 180,  size: 392, speed: -2, layer: 'over' },
        { file:  3, side: 'right',  x: -30,  y: 380,  size: 336, speed:  3, layer: 'over' },

        // === MILIEU — bords, au-dessus, vitesses variées ===
        { file:  5, side: 'left',   x: -40,  y: 720,  size: 308, speed:  1, layer: 'over' },
        { file:  7, side: 'right',  x: -60,  y: 950,  size: 420, speed: -3, layer: 'over' },
        { file:  9, side: 'left',   x: -30,  y: 1280, size: 280, speed:  4, layer: 'over' },
        { file: 11, side: 'right',  x: -20,  y: 1480, size: 364, speed: -1, layer: 'over' },

        // === MILIEU → BAS — vers le centre, EN-DESSOUS ===
        { file: 13, side: 'center', x: 0,    y: 1750, size: 336, speed:  2, layer: 'under' },
        { file: 15, side: 'center', x: -120, y: 2050, size: 392, speed: -2, layer: 'under' },
        { file:  2, side: 'center', x: 100,  y: 2300, size: 308, speed:  3, layer: 'under' }
    ];

    function createObjet(spec) {
        var el = document.createElement('img');
        el.src = 'assets/objets/objet-' + String(spec.file).padStart(2, '0') + '.svg';
        el.alt = '';
        el.setAttribute('data-rellax-speed', spec.speed);

        el.style.position = 'absolute';
        el.style.width = spec.size + 'px';
        el.style.height = 'auto';
        el.style.top = spec.y + 'px';
        el.style.pointerEvents = 'none';
        el.style.userSelect = 'none';

        if (spec.side === 'left') {
            el.style.left = spec.x + 'px';
        } else if (spec.side === 'right') {
            el.style.right = spec.x + 'px';
        } else {
            // center : positionné à 50 % de la largeur viewport puis décalé
            el.style.left = 'calc(50% + ' + spec.x + 'px)';
            el.style.transform = 'translateX(-50%)';
        }

        return el;
    }

    function injectObjets() {
        // Deux layers : "under" (z-index négatif) et "over" (z-index positif)
        // chacune en position absolute, en visibilité overflow visible.
        var layerUnder = document.createElement('div');
        layerUnder.className = 'objets-layer objets-layer--under';
        layerUnder.style.cssText =
            'position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:-1';

        var layerOver = document.createElement('div');
        layerOver.className = 'objets-layer objets-layer--over';
        layerOver.style.cssText =
            'position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:20';

        document.body.insertBefore(layerUnder, document.body.firstChild);
        document.body.appendChild(layerOver);

        OBJETS.forEach(function (spec) {
            var el = createObjet(spec);
            if (spec.layer === 'under') {
                layerUnder.appendChild(el);
            } else {
                layerOver.appendChild(el);
            }
        });

        return Promise.resolve();
    }

    window.LeShedObjets = { inject: injectObjets };

})();