document.addEventListener("DOMContentLoaded", function () {
    const componentContainer = document.getElementById('component-container');
    const header3 = document.getElementById('header3');
    const header4 = document.getElementById('header4');


    const showHeader3 = true;
    const showHeader4 = true;

    if (!showHeader3) {
        header3.style.display = 'none';
    }
    if (!showHeader4) {
        header4.style.display = 'none';
    }

    const componentItems = [
        {
            imgSrc: 'https://s3-alpha-sig.figma.com/img/76ee/44f2/f217c1ad69179127d1a6a4090d526d86?Expires=1725235200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=K4KFTc-I4v1fXpSb3eXUkK2kDxJ4hpOVzH6xOyxXXqQCrbew8GjtlOBtRnhihEjtHa2U5N5BfsLyJ4Cvu6K8hW9fyUobMuWuwuWY9~lWEqg-gkTjxSRbxaQVWWrUGsTAFi6-AjqF8PBm3gxandf4JwXTqqydEwYfwPRVb3kTwue5-lDhj4ydmVhO5XXqeqFOQJG4PFIxV7lbCPhqnsCZdB~6uRUkGbFf8HJaqsOKmpnslmtdw237rTlu6VhpQEcs7AKcsIF9N2WI9rnK1OYQdqWz59vbhmYbb0MNuznykLLAINuDFVYU8D958mBrGM1z3zZjVm31ErbnpvzaJarpDQ__',
            title: 'Title 1',
            description: 'Image Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
        },
        {
            imgSrc: 'https://s3-alpha-sig.figma.com/img/76ee/44f2/f217c1ad69179127d1a6a4090d526d86?Expires=1725235200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=K4KFTc-I4v1fXpSb3eXUkK2kDxJ4hpOVzH6xOyxXXqQCrbew8GjtlOBtRnhihEjtHa2U5N5BfsLyJ4Cvu6K8hW9fyUobMuWuwuWY9~lWEqg-gkTjxSRbxaQVWWrUGsTAFi6-AjqF8PBm3gxandf4JwXTqqydEwYfwPRVb3kTwue5-lDhj4ydmVhO5XXqeqFOQJG4PFIxV7lbCPhqnsCZdB~6uRUkGbFf8HJaqsOKmpnslmtdw237rTlu6VhpQEcs7AKcsIF9N2WI9rnK1OYQdqWz59vbhmYbb0MNuznykLLAINuDFVYU8D958mBrGM1z3zZjVm31ErbnpvzaJarpDQ__',
            title: 'Title 2',
            description: 'Image Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
        },
        {
            imgSrc: 'https://s3-alpha-sig.figma.com/img/76ee/44f2/f217c1ad69179127d1a6a4090d526d86?Expires=1725235200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=K4KFTc-I4v1fXpSb3eXUkK2kDxJ4hpOVzH6xOyxXXqQCrbew8GjtlOBtRnhihEjtHa2U5N5BfsLyJ4Cvu6K8hW9fyUobMuWuwuWY9~lWEqg-gkTjxSRbxaQVWWrUGsTAFi6-AjqF8PBm3gxandf4JwXTqqydEwYfwPRVb3kTwue5-lDhj4ydmVhO5XXqeqFOQJG4PFIxV7lbCPhqnsCZdB~6uRUkGbFf8HJaqsOKmpnslmtdw237rTlu6VhpQEcs7AKcsIF9N2WI9rnK1OYQdqWz59vbhmYbb0MNuznykLLAINuDFVYU8D958mBrGM1z3zZjVm31ErbnpvzaJarpDQ__',
            title: 'Title 3',
            description: 'Image Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
        },
        {
            imgSrc: 'https://s3-alpha-sig.figma.com/img/76ee/44f2/f217c1ad69179127d1a6a4090d526d86?Expires=1725235200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=K4KFTc-I4v1fXpSb3eXUkK2kDxJ4hpOVzH6xOyxXXqQCrbew8GjtlOBtRnhihEjtHa2U5N5BfsLyJ4Cvu6K8hW9fyUobMuWuwuWY9~lWEqg-gkTjxSRbxaQVWWrUGsTAFi6-AjqF8PBm3gxandf4JwXTqqydEwYfwPRVb3kTwue5-lDhj4ydmVhO5XXqeqFOQJG4PFIxV7lbCPhqnsCZdB~6uRUkGbFf8HJaqsOKmpnslmtdw237rTlu6VhpQEcs7AKcsIF9N2WI9rnK1OYQdqWz59vbhmYbb0MNuznykLLAINuDFVYU8D958mBrGM1z3zZjVm31ErbnpvzaJarpDQ__',
            title: 'Title 3',
            description: 'Image Description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.',
        }
    ];

    const renderComponent = (item) => {
        return `
            <div class="component-instance">
                <div class="circle-image">
                    <img src="${item.imgSrc}" alt="${item.title}">
                </div>
                <h3 class="component-title">${item.title}</h3>
                <p class="component-description">${item.description}</p>
            </div>
        `;
    };

    const applyLayout = () => {
        const itemCount = componentItems.length;
        componentContainer.innerHTML = '';

        let itemWidth, itemHeight;

        if (itemCount === 2) {
            itemWidth = '508px';
            itemHeight = '374px';
            componentContainer.className = 'flex justify-center gap-8';
        } else if (itemCount === 3) {
            itemWidth = '339px';
            itemHeight = '398px';
            componentContainer.className = 'flex justify-center gap-8';
        } else if (itemCount === 4) {
            itemWidth = '254px';
            itemHeight = '422px';
            componentContainer.className = 'flex justify-center gap-8';
        } else {
            itemWidth = '100%';
            itemHeight = 'auto';
            componentContainer.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8';
        }

        componentItems.forEach(item => {
            const componentHTML = renderComponent(item);
            const componentElement = document.createElement('div');
            componentElement.innerHTML = componentHTML;
            const instance = componentElement.firstElementChild;
            instance.style.width = itemWidth;
            instance.style.height = itemHeight;
            componentContainer.appendChild(instance);
        });
    };

    applyLayout();
});
