🔄 Variantes de Imagen

/* Background images responsivos */
.hero {
  min-height: 60vh;
  background-image: url('https://limbo.lefebvre.es/assets/{id}/transform?w=600&h=300&c=fill&f=webp');
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('https://limbo.lefebvre.es/assets/{id}/transform?w=1200&h=500&c=fill&f=webp');
  }
}

@media (min-width: 1200px) {
  .hero {
    background-image: url('https://limbo.lefebvre.es/assets/{id}/transform?w=1600&h=600&c=fill&f=webp');
  }
}

/* Grid de imágenes adaptativo */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.image-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

/* Placeholder con blur */
.image-placeholder {
  background-image: url('https://limbo.lefebvre.es/assets/{id}/transform?w=50&h=50&blur=20&q=20');
  background-size: cover;
  filter: blur(5px);
  transition: filter 0.3s ease;
}

.image-placeholder.loaded {
  filter: none;
}

/* Aspectos ratio fijos */
.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-1-1 {
  aspect-ratio: 1 / 1;
}

class ResponsiveImageManager {
    constructor(baseUrl = 'https://limbo.lefebvre.es') {
        this.baseUrl = baseUrl;
        this.breakpoints = {
            mobile: 480,
            tablet: 768,
            desktop: 1024,
            wide: 1400
        };
    }

    generateVariantUrl(assetId, options = {}) {
        const params = new URLSearchParams();
        
        Object.entries(options).forEach(([key, value]) => {
            if (value !== undefined && value !== null) {
                params.append(key, value);
            }
        });

        return `${this.baseUrl}/assets/${assetId}/transform?${params.toString()}`;
    }

    createResponsiveSrcSet(assetId, widths, options = {}) {
        return widths.map(width => {
            const variantOptions = { ...options, w: width };
            const url = this.generateVariantUrl(assetId, variantOptions);
            return `${url} ${width}w`;
        }).join(', ');
    }

    createRetinaSrcSet(assetId, width, options = {}) {
        const normalUrl = this.generateVariantUrl(assetId, { ...options, w: width });
        const retinaUrl = this.generateVariantUrl(assetId, { ...options, w: width, dpr: 2 });
        return `${normalUrl} 1x, ${retinaUrl} 2x`;
    }

    optimizeImagesOnLoad() {
        // Detectar soporte de formatos modernos
        const supportsWebP = this.checkWebPSupport();
        const supportsAVIF = this.checkAVIFSupport();

        document.querySelectorAll('[data-limbo-asset]').forEach(img => {
            const assetId = img.dataset.limboAsset;
            const width = img.dataset.width || 800;
            const height = img.dataset.height;
            const crop = img.dataset.crop || 'fit';

            const options = {
                w: width,
                auto: 'format,quality',
                c: crop
            };

            if (height) options.h = height;

            // Aplicar formato óptimo
            if (supportsAVIF) {
                options.f = 'avif';
            } else if (supportsWebP) {
                options.f = 'webp';
            }

            img.src = this.generateVariantUrl(assetId, options);
            
            // Configurar srcset para diferentes densidades
            img.srcset = this.createRetinaSrcSet(assetId, width, options);
        });
    }

    checkWebPSupport() {
        return new Promise(resolve => {
            const webP = new Image();
            webP.onload = webP.onerror = () => resolve(webP.height === 2);
            webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
        });
    }

    checkAVIFSupport() {
        return new Promise(resolve => {
            const avif = new Image();
            avif.onload = avif.onerror = () => resolve(avif.height === 2);
            avif.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgABogQEAwgMg8f8D///8WfhwB8+ErK42A=';
        });
    }

    lazyLoadImages() {
        if ('IntersectionObserver' in window) {
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        const assetId = img.dataset.limboAsset;
                        
                        if (assetId && !img.src) {
                            this.loadImage(img, assetId);
                        }
                        
                        observer.unobserve(img);
                    }
                });
            });

            document.querySelectorAll('[data-limbo-asset]:not([src])').forEach(img => {
                imageObserver.observe(img);
            });
        }
    }

    loadImage(img, assetId) {
        const width = img.dataset.width || img.offsetWidth || 400;
        const height = img.dataset.height;
        const crop = img.dataset.crop || 'fit';

        const options = {
            w: width,
            auto: 'format,quality',
            c: crop
        };

        if (height) options.h = height;

        // Mostrar placeholder blur mientras carga
        const placeholderUrl = this.generateVariantUrl(assetId, {
            w: 50,
            h: 50,
            blur: 20,
            q: 20
        });

        img.style.backgroundImage = `url(${placeholderUrl})`;
        img.style.backgroundSize = 'cover';

        // Cargar imagen principal
        const fullImg = new Image();
        fullImg.onload = () => {
            img.src = fullImg.src;
            img.srcset = this.createRetinaSrcSet(assetId, width, options);
            img.style.backgroundImage = '';
            img.classList.add('loaded');
        };

        fullImg.src = this.generateVariantUrl(assetId, options);
    }
}

// Inicializar
const imageManager = new ResponsiveImageManager();

document.addEventListener('DOMContentLoaded', () => {
    imageManager.optimizeImagesOnLoad();
    imageManager.lazyLoadImages();
});