script.js

// Main JavaScript for NOIRWAY

// Product data
const products = [
    {
        id: 1,
        name: "DIGITAL GHOST",
        category: "Limited Edition",
        price: 49.99,
        description: "Glitch art meets streetwear. Responsive design changes subtly under different lighting.",
        image: "http://static.photos/abstract/640x360/10",
        colors: ["Black", "Charcoal", "Midnight"],
        sizes: ["S", "M", "L", "XL"],
        featured: true
    },
    {
        id: 2,
        name: "NEON NOIR",
        category: "Hoodie",
        price: 79.99,
        description: "Reflective thread patterns reveal hidden messages under UV light.",
        image: "http://static.photos/technology/640x360/15",
        colors: ["Black", "Dark Grey"],
        sizes: ["S", "M", "L", "XL", "XXL"],
        featured: true
    },
    {
        id: 3,
        name: "VOID CALLING",
        category: "Graphic Tee",
        price: 44.99,
        description: "Minimalist design with cosmic inspiration. Made from organic cotton.",
        image: "http://static.photos/minimal/640x360/20",
        colors: ["White", "Black", "Ash"],
        sizes: ["XS", "S", "M", "L"],
        featured: true
    },
    {
        id: 4,
        name: "SYSTEM ERROR",
        category: "Limited Edition",
        price: 54.99,
        description: "Deconstructed typography on premium jersey fabric.",
        image: "http://static.photos/technology/640x360/25",
        colors: ["Black", "Dark Green"],
        sizes: ["S", "M", "L", "XL"],
        featured: true
    },
    {
        id: 5,
        name: "URBAN ECHO",
        category: "Long Sleeve",
        price: 59.99,
        description: "Soundwave visualization of city frequencies. Breathable fabric.",
        image: "http://static.photos/cityscape/640x360/30",
        colors: ["Black", "Grey", "Navy"],
        sizes: ["M", "L", "XL"],
        featured: false
    },
    {
        id: 6,
        name: "DIGITAL NOMAD",
        category: "Premium Tee",
        price: 49.99,
        description: "For the remote worker with style. Wrinkle-resistant and soft.",
        image: "http://static.photos/workspace/640x360/35",
        colors: ["White", "Black", "Sand"],
        sizes: ["S", "M", "L", "XL"],
        featured: false
    }
];

// Cart functionality
let cart = JSON.parse(localStorage.getItem('noirway_cart')) || [];

function addToCart(productId, size = 'M', color = 'Black', quantity = 1) {
    const product = products.find(p => p.id === productId);
    if (!product) return;

    const cartItem = {
        id: Date.now(),
        productId,
        name: product.name,
        price: product.price,
        size,
        color,
        quantity,
        image: product.image
    };

    cart.push(cartItem);
    localStorage.setItem('noirway_cart', JSON.stringify(cart));
    updateCartCount();
    showNotification(`${product.name} added to cart`);
}

function updateCartCount() {
    const count = cart.reduce((total, item) => total + item.quantity, 0);
    const cartCountElements = document.querySelectorAll('.cart-count');
    cartCountElements.forEach(el => {
        el.textContent = count;
        el.classList.toggle('hidden', count === 0);
    });
}

function showNotification(message) {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = 'fixed top-4 right-4 bg-noir-900 text-white px-6 py-3 rounded-lg shadow-xl z-50 transform translate-x-full transition-transform duration-300';
    notification.innerHTML = `
        <div class="flex items-center gap-3">
            <i data-feather="check-circle" class="w-5 h-5 text-accent-400"></i>
            <span>${message}</span>
        </div>
    `;
    
    document.body.appendChild(notification);
    feather.replace();
    
    // Animate in
    setTimeout(() => {
        notification.classList.remove('translate-x-full');
        notification.classList.add('translate-x-0');
    }, 10);
    
    // Animate out and remove
    setTimeout(() => {
        notification.classList.remove('translate-x-0');
        notification.classList.add('translate-x-full');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Load featured products
function loadFeaturedProducts() {
    const container = document.getElementById('featured-products');
    if (!container) return;

    const featuredProducts = products.filter(p => p.featured);
    
    featuredProducts.forEach(product => {
        const productCard = document.createElement('product-card');
        productCard.setAttribute('product-id', product.id);
        productCard.setAttribute('name', product.name);
        productCard.setAttribute('category', product.category);
        productCard.setAttribute('price', product.price);
        productCard.setAttribute('description', product.description);
        productCard.setAttribute('image', product.image);
        productCard.setAttribute('colors', JSON.stringify(product.colors));
        productCard.setAttribute('sizes', JSON.stringify(product.sizes));
        container.appendChild(productCard);
    });
}

// Initialize cart count on page load
document.addEventListener('DOMContentLoaded', function() {
    updateCartCount();
    
    // Add smooth loading for images
    const images = document.querySelectorAll('img');
    images.forEach(img => {
        img.classList.add('opacity-0', 'transition-opacity', 'duration-500');
        img.onload = () => img.classList.remove('opacity-0');
    });
});

// Newsletter subscription
function subscribeNewsletter(email) {
    if (!email || !email.includes('@')) {
        showNotification('Please enter a valid email address');
        return false;
    }
    
    // In a real app, this would be an API call
    showNotification('Welcome to the NOIRWAY tribe! Check your email for a special welcome gift.');
    return true;
}

// Product search functionality
function searchProducts(query) {
    return products.filter(product => 
        product.name.toLowerCase().includes(query.toLowerCase()) ||
        product.description.toLowerCase().includes(query.toLowerCase()) ||
        product.category.toLowerCase().includes(query.toLowerCase())
    );
}

// Initialize feather icons periodically (for dynamically added icons)
setInterval(() => {
    feather.replace();
}, 1000);