<div id="loader_screen">
        <div class="loader_animation"></div>
    </div>
    <nav style="background: linear-gradient(to right, #1f2937, #111827, #1f2937); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 16px; font-family: 'Kanit', sans-serif;">
    
        <div style="max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: center;">
            <a href="./" style="display: flex; align-items: center; text-decoration: none;">
                <img src="./assets/img/logo.png" alt="Logo" style="height: 28px; margin-right: 8px;" />
                <span class="font-bold" style="color: white; font-size: 20px;">SERET SEVEN STORE</span>
            </a>
    
            <div class="relative flex items-center gap-2">
                <a href="https://www.facebook.com/seret.seven.store" target="_blank" title="Facebook Page">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="fill-white" style="width: 24px; height: 24px;">
                        <path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/>
                    </svg>
                </a>
                <a href="https://www.youtube.com/@seret-seven-store" target="_blank" title="Youtube Channel">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="fill-white" style="width: 24px; height: 24px;">
                        <path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/>
                    </svg>
                </a>
                <a href="https://discord.gg/e6FHEnqPEp" target="_blank" title="Join Discord">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="fill-white" style="width: 24px; height: 24px;">
                        <path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/>
                    </svg>
                </a>
            </div>
        </div>
    
        <div class="menu">
            <button onclick="showSection('home')" class="active">หน้าหลัก</button>
            <button onclick="showSection('free-script')">ฟรีสคริปต์</button>
            <button onclick="showSection('DownloadPage')">ดาวน์โหลด</button>
            <button onclick="showSection('Team')">ทีมงาน</button>
        </div>
    </nav>

    <section id="home" class="active">
        <h1 class="text-white">home page</h1>
    </section>

    <section id="free-script">
        <div style="font-family: 'Kanit', sans-serif;">
            <div class="p-4 mx-auto lg:max-w-7xl md:max-w-4xl sm:max-w-xl max-sm:max-w-sm">
                <div class="flex flex-wrap justify-between items-center mb-10 gap-5 py-4">
                    <div class="flex-grow md:flex-1">
                        <div class="flex px-4 py-3 rounded-md border-2 border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 hover:bg-[#2c2f38] transition-all duration-300 ease-in-out hover:border-blue-500 overflow-hidden max-w-md font-[sans-serif]">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.904 192.904" width="16px"
                                class="fill-gray-500 mr-3 rotate-90">
                                <path
                                    d="m190.707 180.101-47.078-47.077c11.702-14.072 18.752-32.142 18.752-51.831C162.381 36.423 125.959 0 81.191 0 36.422 0 0 36.423 0 81.193c0 44.767 36.422 81.187 81.191 81.187 19.688 0 37.759-7.049 51.831-18.751l47.079 47.078a7.474 7.474 0 0 0 5.303 2.197 7.498 7.498 0 0 0 5.303-12.803zM15 81.193C15 44.694 44.693 15 81.191 15c36.497 0 66.189 29.694 66.189 66.193 0 36.496-29.692 66.187-66.189 66.187C44.693 147.38 15 117.689 15 81.193z">
                                </path>
                            </svg>
                            <input type="text" id="search" placeholder="Search..." class="w-full outline-none bg-transparent text-white text-sm" />
                        </div>
                    </div>
        
                    <div class="flex w-full md:w-auto">
                        <select 
                            id="category" 
                            class="w-full max-w-[200px] border-2 border-gray-500 rounded-lg px-4 py-2 bg-[#101117] text-white focus:outline-none focus:ring-2 focus:ring-blue-500 hover:bg-[#2c2f38] transition-all duration-300 ease-in-out hover:border-blue-500 appearance-none text-center"
                        >
                            <option value="" class="text-gray-400">ทั้งหมด</option>
                        </select>
                    </div>                    
                </div>
    
                <div id="product-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 mt-12 max-lg:max-w-3xl max-md:max-w-md mx-auto"></div>
            </div>
        </div>

        <div
            id="productModal"
            class="fixed inset-0 p-4 flex flex-wrap justify-center items-center w-full h-full z-[1000] before:fixed before:inset-0 before:w-full before:h-full before:bg-[rgba(0,0,0,0.5)] overflow-auto hidden">
            <div class="w-full max-w-lg bg-white shadow-lg rounded-lg p-8 relative">
                <div class="flex justify-end">
                    <svg id="closeModal" xmlns="http://www.w3.org/2000/svg" class="w-3.5 cursor-pointer shrink-0 fill-gray-400 hover:fill-red-500"
                        viewBox="0 0 320.591 320.591">
                        <path
                            d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z"
                            data-original="#000000"></path>
                        <path
                            d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z"
                            data-original="#000000"></path>
                    </svg>
                </div>

                <div id="modalContent" class="my-8"></div>
            </div>
        </div>
    </section>

    <section id="DownloadPage">
        <div class="flex justify-center h-screen px-4 py-6" style="font-family: 'Kanit', sans-serif;">
            <div class="p-8 md:p-16 w-full h-full flex flex-col items-center">
                <div class="bg-gray-900 shadow-xl rounded-xl p-8 md:p-12 max-w-4xl w-full">
                    <h1 class="text-4xl font-extrabold text-gray-100 text-center mb-6">
                        ดาวน์โหลด Launcher <br /> Seret Seven Store
                    </h1>
                    <p class="text-gray-400 text-center text-md md:text-lg mb-9">
                        เริ่มต้นใช้งานโปรแกรม Launcher เพื่อจัดการบริการของ Seret Seven Store
                        ได้ง่ายดาย เพียงคลิกปุ่มดาวน์โหลดด้านล่าง
                    </p>
                    <div class="flex flex-col justify-center items-center gap-4">
                        <button id="download-button" 
                            class="bg-gradient-to-r from-blue-500 to-blue-700 text-white text-lg font-semibold py-3 px-8 rounded-full shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300">
                            ดาวน์โหลด Launcher
                        </button>
                        <div id="progress-bar-container" class="relative w-full max-w-md bg-gray-800 rounded-full h-4 overflow-hidden shadow-inner hidden">
                            <div id="progress-bar" class="bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 h-full rounded-full transition-all duration-150 ease-out" style="width: 0%;"></div>
                            <span id="progress-text" class="absolute inset-0 flex items-center justify-center text-white font-bold text-xs"></span>
                        </div>
                    </div>
                    <div class="mt-10 text-center text-sm text-gray-400">
                        <p><span class="font-medium">OS ที่รองรับ:</span> <span id="os_download"></span></p>
                        <p><span class="font-medium">ขนาดไฟล์:</span> <span id="sizefile_download"></span></p>
                        <p><span class="font-medium">เวอร์ชัน:</span> <span id="version_download"></span></p>
                        <p><span class="font-medium">อัปเดตล่าสุด:</span> <span id="date_download"></span></p>
                    </div>                    
                </div>
                <div class="mt-12 py-10 w-full flex flex-col items-center gap-6">
                    <div class="w-full md:w-2/3 bg-gray-900 shadow-lg p-6 rounded-lg text-center">
                        <h2 class="text-2xl font-semibold text-gray-100 mb-4">สอนใช้งาน Launcher เเละติดตั้งโปรเเกรม</h2>
                        <p class="text-gray-400 leading-relaxed mb-4">
                            เรียนรู้วิธีการใช้งาน Launcher ของเราในคลิปวิดีโอด้านล่าง เพื่อช่วยให้คุณเข้าถึงบริการ
                            และฟีเจอร์ที่ทันสมัยได้อย่างง่ายดาย
                        </p>
                        <div class="relative w-full h-0 pb-[56.25%]">
                            <iframe 
                                class="absolute top-0 left-0 w-full h-full rounded-lg" 
                                src="https://www.youtube.com/embed/RV-sPkYVL-A?si=XxUnG-f99ySl4JDs" 
                                title="วิธีการใช้งาน Launcher" 
                                frameBorder="0" 
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                                allowFullScreen>
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="Team">
        <div class="relative font-sans before:absolute before:w-full before:h-full before:inset-0 before:bg-black before:opacity-50 before:z-10">
            <img src="./assets/img/banner.png" alt="Banner Image" class="absolute inset-0 w-full h-full object-cover" />
        
            <div class="min-h-[350px] relative z-50 h-full max-w-6xl mx-auto flex flex-col justify-center items-center text-center text-white p-6"></div>
        </div>
    
        <div class="py-8" style="font-family: 'Kanit', sans-serif;">
            <div class="max-w-2xl mx-auto text-center">
                <h2 class="text-white text-4xl font-extrabold">ทีมงานของเรา</h2>
                <p class="text-white text-sm mt-4 leading-relaxed">มาทำความรู้จักกับทีมงานของเราที่พร้อมจะดูแลคุณ</p>
            </div>
    
            <div id="team-members" class="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 gap-8 text-center mt-16 max-w-5xl max-lg:max-w-3xl max-md:max-w-xl mx-auto opacity-0">
                <div class="team-member">
                    <img 
                        src="./assets/img/image_profile_team/RONIN_Script.gif" 
                        alt="Team BACON Profile" 
                        class="w-32 h-32 shadow-lg object-cover rounded-full inline-block" 
                    />
                    <div class="py-4">
                        <h4 class="text-white text-base font-bold">RONIN Script</h4>
                        <p class="text-white text-xs mt-1">Developer 👑</p>
                    </div>
                </div>
    
                <div class="team-member">
                    <img 
                        src="./assets/img/image_profile_team/wadadang.gif" 
                        alt="Team BACON Profile" 
                        class="w-32 h-32 shadow-lg object-cover rounded-full inline-block" 
                    />
                    
                    <div class="py-4">
                        <h4 class="text-white text-base font-bold">WADADANG</h4>
                        <p class="text-white text-xs mt-1">Developer & Partners 🔰</p>
                    </div>
                </div>
    
                <div class="team-member">
                    <img 
                        src="./assets/img/image_profile_team/BACON.gif" 
                        alt="Team BACON Profile" 
                        class="w-32 h-32 shadow-lg object-cover rounded-full inline-block" 
                    />
    
                    <div class="py-4">
                        <h4 class="text-white text-base font-bold">BACON</h4>
                        <p class="text-white text-xs mt-1">Partners & Modeling 🔥</p>
                    </div>
                </div>
    
                <div class="team-member">
                    <img 
                        src="./assets/img/image_profile_team/oat.jpg" 
                        alt="Team BACON Profile" 
                        class="w-32 h-32 shadow-lg object-cover rounded-full inline-block" 
                    />
    
                    <div class="py-4">
                        <h4 class="text-white text-base font-medium">โอ๊ตเด็กวัด</h4>
                        <p class="text-white text-xs mt-1">มึงใครเนี้ยยยย ❓</p>
                    </div>
                </div>
    
            </div>
        </div>
    </section>
    
    <script>
        document.addEventListener('contextmenu', event => event.preventDefault());
        document.addEventListener('keydown', (event) => {
            if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
                event.preventDefault();
            }
        });

        function showSection(sectionId) {
            const sections = document.querySelectorAll('section');
            const buttons = document.querySelectorAll('.menu button');
            
            sections.forEach(section => section.classList.remove('active'));
            
            const activeSection = document.getElementById(sectionId);
            activeSection.classList.add('active');
            
            buttons.forEach(button => button.classList.remove('active'));
            
            document.querySelector(`.menu button[onclick="showSection('${sectionId}')"]`).classList.add('active');
        }

        document.addEventListener("DOMContentLoaded", function() {
            setTimeout(function() {
                const loader = document.getElementById('loader_screen');
                if (loader) {
                    loader.style.display = 'none';
                }
            }, 3000);

            fetch('./config/data.json')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                const productList = document.getElementById('product-list');
                const categorySelect = document.getElementById('category');

                const productModal = document.getElementById('productModal');
                const modalContent = document.getElementById('modalContent');
                const closeModal = document.getElementById('closeModal');

                closeModal.addEventListener('click', () => {
                    productModal.classList.add('hidden');
                });
                
                const categories = [...new Set(data.products.map(product => product.category))];
                categories.forEach(category => {
                    const option = document.createElement('option');
                    option.value = category;
                    option.textContent = category;
                    categorySelect.appendChild(option);
                });

                function renderProducts(filteredProducts) {
                    productList.innerHTML = '';
                    filteredProducts.forEach(product => {
                        const productDiv = document.createElement('div');
                        productDiv.innerHTML = `
                            <div class="bg-white cursor-pointer rounded-lg overflow-hidden group relative before:absolute before:inset-0 before:z-10 before:bg-black before:opacity-60">
                                <img src="${product.image_products}" alt="${product.name}" class="w-full h-96 object-cover group-hover:scale-110 transition-all duration-300" />
                                <div class="p-6 absolute bottom-0 left-0 right-0 z-20">
                                    <span class="text-sm block text-yellow-400 font-medium">${product.date} | BY ${product.credit_name}</span>
                                    <h3 class="text-lg font-medium text-white">[${product.category}] ${product.name}</h3>
                                </div>
                            </div>
                        `;

                        productDiv.addEventListener('click', () => {
                            showModal(product);
                        });

                        productList.appendChild(productDiv);
                    });
                }

                function showModal(product) {
                    modalContent.innerHTML = `
                        <img src="${product.image_products}" alt="${product.name}" class="w-full h-64 object-cover rounded-lg mb-4" />
                        <h2 class="text-2xl font-bold text-gray-800 mb-2">${product.name}</h2>
                        <p class="text-sm text-gray-500 mb-4">${product.date} | BY ${product.credit_name}</p>
                        <p class="text-gray-700 mb-4">Category: ${product.category}</p>
                        <p class="text-gray-600">${product.description || 'No additional details available.'}</p>
                    `;
                    productModal.classList.remove('hidden');
                }

                renderProducts(data.products);

                categorySelect.addEventListener('change', function() {
                    const selectedCategory = categorySelect.value;
                    if (selectedCategory) {
                        const filteredProducts = data.products.filter(product => product.category === selectedCategory);
                        renderProducts(filteredProducts);
                    } else {
                        renderProducts(data.products);
                    }
                });

                document.getElementById('search').addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase();
                    const selectedCategory = categorySelect.value;
                    let filteredProducts = data.products.filter(product => product.name.toLowerCase().includes(searchTerm));
                    
                    if (selectedCategory) {
                        filteredProducts = filteredProducts.filter(product => product.category === selectedCategory);
                    }

                    renderProducts(filteredProducts);
                });
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
            });
        });

        fetch('./config/settingconfig_downloadpage.json')
        .then(response => response.json())
        .then(data => {
            document.getElementById('os_download').innerText = data.os || 'ไม่ระบุ';
            document.getElementById('sizefile_download').innerText = data.sizefile || 'ไม่ระบุ';
            document.getElementById('version_download').innerText = data.version || 'ไม่ระบุ';
            document.getElementById('date_download').innerText = data.date || 'ไม่ระบุ';
        })
        .catch(error => {
            console.error('Error loading JSON:', error);
        });


        const downloadButton = document.getElementById('download-button');
        const progressBarContainer = document.getElementById('progress-bar-container');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');
        let progress = 0;

        const handleDownload = () => {
            downloadButton.disabled = true;
            downloadButton.textContent = 'กำลังดาวน์โหลด...';
            progressBarContainer.classList.remove('hidden');

            const encodedURL = btoa('./filesdownload/setup-launcher-seret-seven-store.exe');
            const interval = setInterval(() => {
                progress += 5;
                progressBar.style.width = `${progress}%`;
                progressText.textContent = `${progress}%`;

                if (progress >= 100) {
                    clearInterval(interval);
                    setTimeout(() => {
                        const decodedURL = atob(encodedURL);
                        window.location.href = decodedURL;
                        downloadButton.disabled = false;
                        downloadButton.textContent = 'ดาวน์โหลด Launcher';
                        progressBarContainer.classList.add('hidden');
                        progress = 0;
                        progressBar.style.width = '0%';
                    }, 500);
                }
            }, 350);
        };
        downloadButton.addEventListener('click', handleDownload);

        const section = document.querySelector('#team-members');
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('opacity-100');
                    entry.target.classList.remove('opacity-0');
                }
            });
        }, { threshold: 0.5 });
    
        observer.observe(section);
    </script>