// Á¦Ç° Ä«µå HTML »ý¼º ÇÔ¼ö
function createProductCard(product) {
    return `
        <div class="product-card" onclick="goToProductDetail(${product.id})">
            <div class="product-image">
                <img src="${product.images.main}" alt="${product.name}">
                <div class="product-overlay">
                    <span class="product-category">${product.category}</span>
                </div>
            </div>
            <div class="product-info">
                <div class="product-name-container">
                    <h2 class="product-name">${product.name}</h2>
                    <p class="product-description">${product.description}</p>
                </div>
                <div class="product-division">${product.division}</div>
            </div>
        </div>
    `;
}


// Á¦Ç° »ó¼¼ ÆäÀÌÁö·Î À̵¿ÇÏ´Â ÇÔ¼ö
function goToProductDetail(productId) {
    // URL ÆĶó¹ÌÅÍ·Î Á¦Ç° ID¸¦ Àü´Þ
    window.location.href = `productDetail.php?id=${productId}`;
}


// Á¦Ç° ÇÊÅ͸µ ÇÔ¼ö
function filterProducts(category) {
    // Ä«Å×°í¸® ¹öÆ° È°¼ºÈ­ »óÅ º¯°æ
    document.querySelectorAll('.category-btn').forEach(btn => {
        btn.classList.remove('active');
        if (btn.getAttribute('onclick').includes(category)) {
            btn.classList.add('active');
        }
    });


    // Á¦Ç° ÇÊÅ͸µ
    const filteredProducts = category === 'all' 
        ? products 
        : products.filter(product => product.category === category);


    // Á¦Ç° ±×¸®µå ¾÷µ¥ÀÌÆ®
    const productGrid = document.getElementById('productGrid');
    productGrid.innerHTML = filteredProducts.map(createProductCard).join('');
}


// ÆäÀÌÁö ·Îµå ½Ã Ãʱâ Á¦Ç° ¸ñ·Ï Ç¥½Ã
document.addEventListener('DOMContentLoaded', function() {
    filterProducts('all');
});