// Sample product data - in a real app this would come from an API
const products = [
    {
        id: 1,
        title: "Handmade Ceramic Mug",
        price: 24.99,
        image: "http://static.photos/craft/640x360/1",
        category: "Home & Living",
        rating: 4.8,
        reviews: 142,
        favorite: true
    },
    {
        id: 2,
        title: "Personalized Leather Journal",
        price: 32.50,
        image: "http://static.photos/vintage/640x360/2",
        category: "Stationery",
        rating: 4.9,
        reviews: 87,
        favorite: false
    },
    {
        id: 3,
        title: "Hand-knitted Wool Scarf",
        price: 45.00,
        image: "http://static.photos/textures/640x360/3",
        category: "Accessories",
        rating: 4.7,
        reviews: 203,
        favorite: true
    },
    {
        id: 4,
        title: "Wooden Cutting Board",
        price: 38.00,
        image: "http://static.photos/wood/640x360/4",
        category: "Kitchen",
        rating: 4.9,
        reviews: 56,
        favorite: false
    },
    {
        id: 5,
        title: "Hand-painted Wall Art",
        price: 85.00,
        image: "http://static.photos/abstract/640x360/5",
        category: "Art",
        rating: 5.0,
        reviews: 34,
        favorite: true
    },
    {
        id: 6,
        title: "Crochet Baby Blanket",
        price: 42.99,
        image: "http://static.photos/textures/640x360/6",
        category: "Baby",
        rating: 4.8,
        reviews: 78,
        favorite: false
    },
    {
        id: 7,
        title: "Handmade Soap Set",
        price: 18.50,
        image: "http://static.photos/wellness/640x360/7",
        category: "Bath & Beauty",
        rating: 4.6,
        reviews: 112,
        favorite: false
    },
    {
        id: 8,
        title: "Macrame Plant Hanger",
        price: 28.00,
        image: "http://static.photos/nature/640x360/8",
        category: "Home & Living",
        rating: 4.7,
        reviews: 64,
        favorite: true
    }
];

// Initialize the storefront
document.addEventListener('DOMContentLoaded', () => {
    const productsGrid = document.getElementById('products-grid');
    
    // Render products
    products.forEach(product => {
        const productCard = document.createElement('product-card');
        productCard.setAttribute('title', product.title);
        productCard.setAttribute('price', product.price);
        productCard.setAttribute('image', product.image);
        productCard.setAttribute('category', product.category);
        productCard.setAttribute('rating', product.rating);
        productCard.setAttribute('reviews', product.reviews);
        productCard.setAttribute('favorite', product.favorite);
        productCard.setAttribute('id', product.id);
        productsGrid.appendChild(productCard);
    });
    
    // Handle search functionality
    const searchBar = document.querySelector('custom-search-bar');
    searchBar.addEventListener('search', (e) => {
        const searchTerm = e.detail.toLowerCase();
        document.querySelectorAll('product-card').forEach(card => {
            const title = card.getAttribute('title').toLowerCase();
            const category = card.getAttribute('category').toLowerCase();
            if (title.includes(searchTerm) || category.includes(searchTerm)) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
    
    // Handle category filtering
    const categoryFilter = document.querySelector('custom-category-filter');
    categoryFilter.addEventListener('filter', (e) => {
        const category = e.detail;
        document.querySelectorAll('product-card').forEach(card => {
            if (category === 'all' || card.getAttribute('category') === category) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});