// layout-manager.js
document.addEventListener("DOMContentLoaded", function () {
    const mediaContainer = document.getElementById('media-container');

    // Media items with the specified image URL repeated
    const mediaItems = [
        { type: 'image', src: 'https://s3-alpha-sig.figma.com/img/37a7/42fb/1daabd5424c6093ca79a6d502b3b84ef?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=FgQK8BhmZm52syueYHL8d33N9v48-lePOhb~KQgE528f-GZn8a8HXap5OvWlCdKaf2nZLlFvmgWgpnuz7iekJqEAS95CknKbniYODvBDOGMVIcHrU7YthPZ~YqZSE7pEANVBVEwkB9-1zJ77gT9uEMryjd-xb44NjnBhfLPkP4B9qlqkbuehRRhLGPBnYA9q3PHpf5ocx7j0~xAbomT~EFX2bzwBu70gKN0qTFVRy8uNu8USYah2YotQH58ChxcEPokhPxENAdNCWeDodsWVFrldbeU0CgVzCrn3MLYu9Ep96r7tjAvKfgQQqC6eORHyM-citVFu1DlJx8-CUN26RQ__', alt: 'Image 1' },
        { type: 'image', src: 'https://s3-alpha-sig.figma.com/img/37a7/42fb/1daabd5424c6093ca79a6d502b3b84ef?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=FgQK8BhmZm52syueYHL8d33N9v48-lePOhb~KQgE528f-GZn8a8HXap5OvWlCdKaf2nZLlFvmgWgpnuz7iekJqEAS95CknKbniYODvBDOGMVIcHrU7YthPZ~YqZSE7pEANVBVEwkB9-1zJ77gT9uEMryjd-xb44NjnBhfLPkP4B9qlqkbuehRRhLGPBnYA9q3PHpf5ocx7j0~xAbomT~EFX2bzwBu70gKN0qTFVRy8uNu8USYah2YotQH58ChxcEPokhPxENAdNCWeDodsWVFrldbeU0CgVzCrn3MLYu9Ep96r7tjAvKfgQQqC6eORHyM-citVFu1DlJx8-CUN26RQ__', alt: 'Image 2' },
       // { type: 'image', src: 'https://s3-alpha-sig.figma.com/img/37a7/42fb/1daabd5424c6093ca79a6d502b3b84ef?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=FgQK8BhmZm52syueYHL8d33N9v48-lePOhb~KQgE528f-GZn8a8HXap5OvWlCdKaf2nZLlFvmgWgpnuz7iekJqEAS95CknKbniYODvBDOGMVIcHrU7YthPZ~YqZSE7pEANVBVEwkB9-1zJ77gT9uEMryjd-xb44NjnBhfLPkP4B9qlqkbuehRRhLGPBnYA9q3PHpf5ocx7j0~xAbomT~EFX2bzwBu70gKN0qTFVRy8uNu8USYah2YotQH58ChxcEPokhPxENAdNCWeDodsWVFrldbeU0CgVzCrn3MLYu9Ep96r7tjAvKfgQQqC6eORHyM-citVFu1DlJx8-CUN26RQ__', alt: 'Image 3' },
        { type: 'image', src: 'https://s3-alpha-sig.figma.com/img/37a7/42fb/1daabd5424c6093ca79a6d502b3b84ef?Expires=1724630400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=FgQK8BhmZm52syueYHL8d33N9v48-lePOhb~KQgE528f-GZn8a8HXap5OvWlCdKaf2nZLlFvmgWgpnuz7iekJqEAS95CknKbniYODvBDOGMVIcHrU7YthPZ~YqZSE7pEANVBVEwkB9-1zJ77gT9uEMryjd-xb44NjnBhfLPkP4B9qlqkbuehRRhLGPBnYA9q3PHpf5ocx7j0~xAbomT~EFX2bzwBu70gKN0qTFVRy8uNu8USYah2YotQH58ChxcEPokhPxENAdNCWeDodsWVFrldbeU0CgVzCrn3MLYu9Ep96r7tjAvKfgQQqC6eORHyM-citVFu1DlJx8-CUN26RQ__', alt: 'Image 4' },
      ];

    const useQuatreA = false; // Set this to true for Quatre A, false for Quatre B

    // Apply the appropriate layout based on the number of media items
    const applyLayout = () => {
        mediaContainer.innerHTML = ''; // Clear existing content
        const itemCount = mediaItems.length;

        if (itemCount === 1) {
            // Single Image Layout
            mediaContainer.className = 'single-layout';
            mediaContainer.innerHTML += `<div class="media-item">${renderMedia(mediaItems[0])}</div>`;
        } else if (itemCount === 2) {
            // Duo Layout
            mediaContainer.className = 'duo-layout';
            mediaItems.forEach(item => {
                mediaContainer.innerHTML += `<div class="media-item">${renderMedia(item)}</div>`;
            });
        } else if (itemCount === 3) {
            // Trio Layout
            mediaContainer.className = 'trio-layout';
            mediaContainer.innerHTML += `<div class="left-column media-item">${renderMedia(mediaItems[0])}</div>`;
            mediaContainer.innerHTML += `
                <div class="right-column">
                    <div class="media-item">${renderMedia(mediaItems[1])}</div>
                    <div class="media-item">${renderMedia(mediaItems[2])}</div>
                </div>`;
            return;
        } else if (itemCount >= 4) {
            if (useQuatreA) {
                // Quatre A Layout
                mediaContainer.className = 'grid grid-cols-2 gap-4';
                mediaItems.forEach(item => {
                    mediaContainer.innerHTML += `<div class="media-item">${renderMedia(item)}</div>`;
                });
            } else {
                // Quatre B Layout
                mediaContainer.className = 'quatre-b-layout';
                mediaContainer.innerHTML += `<div class="top-image">${renderMedia(mediaItems[0])}</div>`;
                mediaContainer.innerHTML += `<div class="bottom-row">`;
                for (let i = 1; i < Math.min(5, itemCount); i++) {
                    mediaContainer.innerHTML += `<div class="media-item">${renderMedia(mediaItems[i])}</div>`;
                }
                mediaContainer.innerHTML += `</div>`;
            }
        }
    };

    // Function to render media based on its type
    const renderMedia = (item) => {
        if (item.type === 'image') {
            return `<img src="${item.src}" alt="${item.alt}">`; /* Ensure images fill their containers */
        } else if (item.type === 'video') {
            return `<video src="${item.src}" controls class="w-full h-auto"></video>`;
        }
        return '';
    };

    // Apply the layout
    applyLayout();
});
