@extends('layouts.app')

@section('styles')
<style>
    /* Performance Optimized CSS */
    .hero-gradient {
        background: linear-gradient(135deg, #ff6b9d 0%, #c44569 50%, #f8b500 100%);
        will-change: background;
    }
    
    .product-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        position: relative;
        will-change: transform, box-shadow;
    }
    
    .product-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 35px rgba(233, 30, 99, 0.2);
    }
    
    .product-image {
        height: 250px;
        object-fit: cover;
        transition: transform 0.3s ease;
        will-change: transform;
    }
    
    .product-card:hover .product-image {
        transform: scale(1.05);
    }
    
    .price-tag {
        background: linear-gradient(45deg, #ff6b9d, #c44569);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-weight: 600;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
        font-size: 0.9rem;
    }
    
    .category-filter {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 15px;
        margin-bottom: 30px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    
    .category-btn {
        background: linear-gradient(45deg, #f8f9fa, #e9ecef);
        border: 2px solid transparent;
        border-radius: 20px;
        padding: 10px 20px;
        margin: 5px;
        transition: all 0.2s ease;
        color: #495057;
        font-weight: 500;
        font-size: 0.9rem;
        will-change: transform, background, color;
    }
    
    .category-btn:hover, .category-btn.active {
        background: linear-gradient(45deg, #ff6b9d, #c44569);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);
    }
    
    .love-heart {
        color: #ff6b9d;
        animation: heartbeat 1.5s ease-in-out infinite;
        will-change: transform;
    }
    
    @keyframes heartbeat {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    
    .floating-hearts {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
        z-index: -1;
    }
    
    .floating-heart {
        position: absolute;
        color: rgba(255, 107, 157, 0.2);
        animation: float-up 6s infinite linear;
        font-size: 18px;
        will-change: transform, opacity;
    }
    
    @keyframes float-up {
        0% {
            opacity: 1;
            transform: translateY(100vh) rotate(0deg);
        }
        100% {
            opacity: 0;
            transform: translateY(-100px) rotate(360deg);
        }
    }
    
    .add-to-cart-btn {
        background: linear-gradient(45deg, #ff6b9d, #c44569);
        border: none;
        border-radius: 20px;
        padding: 10px 20px;
        color: white;
        font-weight: 600;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        font-size: 0.9rem;
        will-change: transform, box-shadow;
    }
    
    .add-to-cart-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(233, 30, 99, 0.4);
    }
    
    .add-to-cart-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s;
    }
    
    .add-to-cart-btn:hover::before {
        left: 100%;
    }
    
    .youtube-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 15px;
        padding: 30px;
        margin: 30px 0;
        color: white;
        text-align: center;
    }
    
    .video-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .share-btn {
        background: linear-gradient(45deg, #667eea, #764ba2);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        color: white;
        transition: all 0.2s ease;
        margin: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        will-change: transform;
    }
    
    .share-btn:hover {
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }
    
    .currency-symbol {
        font-weight: 700;
        color: #28a745;
    }

    /* Share Modal Styles */
    .share-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .share-modal.active {
        opacity: 1;
        visibility: visible;
    }
    
    .share-modal-content {
        background: white;
        border-radius: 15px;
        padding: 25px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }
    
    .share-modal.active .share-modal-content {
        transform: translateY(0);
    }
    
    .share-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .share-modal-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
    }
    
    .share-modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #666;
    }
    
    .share-input-group {
        display: flex;
        margin-bottom: 20px;
    }
    
    .share-input {
        flex: 1;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px 0 0 8px;
        font-size: 1rem;
    }
    
    .share-copy-btn {
        padding: 12px 20px;
        background: linear-gradient(45deg, #667eea, #764ba2);
        color: white;
        border: none;
        border-radius: 0 8px 8px 0;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    
    .share-copy-btn:hover {
        background: linear-gradient(45deg, #5a6fd1, #6a4299);
    }
    
    .share-social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }
    
    .share-social-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        transition: transform 0.2s ease;
    }
    
    .share-social-icon:hover {
        transform: translateY(-3px);
    }
    
    .facebook-bg {
        background: #3b5998;
    }
    
    .twitter-bg {
        background: #1da1f2;
    }
    
    .whatsapp-bg {
        background: #25d366;
    }
    
    .linkedin-bg {
        background: #0077b5;
    }
    
    .pinterest-bg {
        background: #e60023;
    }

    /* Responsive Adjustments */
    @media (max-width: 767px) {
        .hero-gradient {
            padding: 60px 0;
        }
        
        .hero-gradient h1 {
            font-size: 2.2rem;
        }
        
        .hero-gradient p {
            font-size: 1rem;
        }
        
        .category-filter {
            padding: 10px;
        }
        
        .category-btn {
            padding: 8px 15px;
            font-size: 0.8rem;
            margin: 3px;
        }
        
        .product-card {
            margin-bottom: 20px;
        }
        
        .product-image {
            height: 200px;
        }
        
        .add-to-cart-btn {
            padding: 8px 15px;
            font-size: 0.8rem;
        }
        
        .youtube-section {
            padding: 20px;
            margin: 20px 0;
        }
        
        .video-container {
            margin-bottom: 15px;
        }
        
        .share-btn {
            width: 35px;
            height: 35px;
            font-size: 0.8rem;
        }
        
        .floating-heart {
            font-size: 16px;
        }
        
        .share-modal-content {
            padding: 20px;
        }
        
        .share-social-icon {
            width: 45px;
            height: 45px;
            font-size: 1.3rem;
        }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
        .product-card {
            margin-bottom: 25px;
        }
        
        .product-image {
            height: 220px;
        }
        
        .category-btn {
            padding: 10px 18px;
        }
    }

    /* Reduced motion for accessibility */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation: none !important;
            transition: none !important;
        }
        
        .product-card:hover {
            transform: none;
        }
        
        .product-image {
            transition: none;
        }
        
        .add-to-cart-btn:hover {
            transform: none;
        }
        
        .floating-hearts {
            display: none;
        }
        
        .share-modal {
            transition: none;
        }
        
        .share-modal-content {
            transition: none;
        }
    }

    /* Lazy loading for images */
    .lazy-load {
        opacity: 0;
        transition: opacity 0.5s ease;
    }
    
    .lazy-load.loaded {
        opacity: 1;
    }
    
    /* Added to cart state */
    .added-to-cart {
        background: linear-gradient(45deg, #28a745, #218838);
    }
</style>
@endsection

@section('content')
<!-- Floating Hearts Background -->
<div class="floating-hearts">
    <i class="floating-heart fas fa-heart" style="left: 10%; animation-delay: 0s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 20%; animation-delay: 1s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 30%; animation-delay: 2s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 40%; animation-delay: 3s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 50%; animation-delay: 4s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 60%; animation-delay: 5s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 70%; animation-delay: 1.5s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 80%; animation-delay: 2.5s;"></i>
    <i class="floating-heart fas fa-heart" style="left: 90%; animation-delay: 3.5s;"></i>
</div>

<!-- Hero Section -->
<div class="hero-gradient text-white py-16 md:py-20 mb-8">
    <div class="container mx-auto px-4 text-center">
        <h1 class="text-3xl md:text-5xl font-bold mb-4 animate__animated animate__fadeInDown">
            Perfect Gifts for <i class="love-heart fas fa-heart"></i> Love
        </h1>
        <p class="text-lg md:text-xl mb-8 animate__animated animate__fadeInUp">
            Discover amazing gifts for your loved ones, couples, and friends
        </p>
        <div class="flex flex-wrap justify-center gap-2 md:gap-4 animate__animated animate__fadeInUp animate__delay-1s">
            <span class="bg-white bg-opacity-20 px-4 py-2 md:px-6 md:py-3 rounded-full text-sm md:text-base">
                <i class="fas fa-heart text-pink-300 mr-2"></i>Love Gifts
            </span>
            <span class="bg-white bg-opacity-20 px-4 px-6 py-3 rounded-full text-sm md:text-base">
                <i class="fas fa-users text-purple-300 mr-2"></i>Couple Items
            </span>
            <span class="bg-white bg-opacity-20 px-4 px-6 py-3 rounded-full text-sm md:text-base">
                <i class="fas fa-user-friends text-yellow-300 mr-2"></i>Friend Gifts
            </span>
        </div>
    </div>
</div>

<!-- Share Modal -->
<div class="share-modal" id="shareModal">
    <div class="share-modal-content">
        <div class="share-modal-header">
            <h3 class="share-modal-title">Share This Product</h3>
            <button class="share-modal-close" onclick="closeShareModal()">&times;</button>
        </div>
        <div class="share-input-group">
            <input type="text" id="shareLinkInput" class="share-input" readonly>
            <button class="share-copy-btn" onclick="copyShareLink()">Copy</button>
        </div>
        <div class="share-social-icons">
            <a href="#" class="share-social-icon facebook-bg" onclick="shareOnSocial('facebook')">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="#" class="share-social-icon twitter-bg" onclick="shareOnSocial('twitter')">
                <i class="fab fa-twitter"></i>
            </a>
            <a href="#" class="share-social-icon whatsapp-bg" onclick="shareOnSocial('whatsapp')">
                <i class="fab fa-whatsapp"></i>
            </a>
            <a href="#" class="share-social-icon linkedin-bg" onclick="shareOnSocial('linkedin')">
                <i class="fab fa-linkedin-in"></i>
            </a>
            <a href="#" class="share-social-icon pinterest-bg" onclick="shareOnSocial('pinterest')">
                <i class="fab fa-pinterest-p"></i>
            </a>
        </div>
    </div>
</div>

<div class="container mx-auto px-4">
    <!-- Category Filters -->
    <div class="category-filter animate__animated animate__fadeInUp">
        <h2 class="text-xl md:text-2xl font-bold text-center mb-4 md:mb-6 text-gray-800">
            <i class="fas fa-filter text-pink-500 mr-2"></i>Choose Your Category
        </h2>
        <div class="flex flex-wrap justify-center">
            <button onclick="filterProducts('all')" class="category-btn active" data-category="all">
                <i class="fas fa-star mr-2"></i>All Products
            </button>
            @isset($categories)
                @foreach($categories as $category)
                <button onclick="filterProducts('{{ $category->id }}')" class="category-btn" data-category="{{ $category->id }}">
                    @if($category->name == 'Love Gifts')
                        <i class="fas fa-heart mr-2"></i>
                    @elseif($category->name == 'Couple Items')
                        <i class="fas fa-users mr-2"></i>
                    @elseif($category->name == 'Friend Gifts')
                        <i class="fas fa-user-friends mr-2"></i>
                    @elseif($category->name == 'Jewelry')
                        <i class="fas fa-gem mr-2"></i>
                    @elseif($category->name == 'Personalized')
                        <i class="fas fa-edit mr-2"></i>
                    @else
                        <i class="fas fa-gift mr-2"></i>
                    @endif
                    {{ $category->name }}
                </button>
                @endforeach
            @endisset
        </div>
    </div>

    <!-- YouTube Gift Ideas Section -->
    <div class="youtube-section animate__animated animate__fadeInUp">
        <h2 class="text-2xl md:text-3xl font-bold mb-4">
            <i class="fab fa-youtube text-red-400 mr-3"></i>Gift Ideas & Inspiration
        </h2>
        <p class="text-base md:text-lg mb-6 md:mb-8 opacity-90">Watch these amazing videos for gift inspiration!</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
            <div class="video-container">
                <iframe loading="lazy" src="https://www.youtube.com/embed/eMi8tV0NKQk" 
                        title="Couple's Gift Ideas from Amazon | FUN, UNIQUE & BUDGET" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen>
                </iframe>
            </div>
            <div class="video-container">
                <iframe loading="lazy" src="https://www.youtube.com/embed/5oqaWgSYyFI" 
                        title="Easy Handmade Gift ideas for your LOVE" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen>
                </iframe>
            </div>
        </div>
    </div>

    <!-- Products Grid -->
    <div class="mb-8">
        <h2 class="text-2xl md:text-3xl font-bold text-center mb-6 md:mb-8 text-gray-800">
            <i class="fas fa-shopping-bag text-pink-500 mr-3"></i>Our Products
        </h2>
        
        <div id="products-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
            @isset($products)
                @foreach($products as $product)
                <div class="product-card animate_animated animate_fadeInUp" data-category="{{ $product->category_id }}" style="animation-delay: {{ $loop->index * 0.1 }}s">
                    <div class="relative overflow-hidden">
                        <img src="{{ asset('images/placeholder.jpg') }}" 
                             data-src="{{ $product->image ? asset('storage/'.$product->image) : asset('images/placeholder.jpg') }}" 
                             alt="{{ $product->name }}" 
                             class="product-image w-full lazy-load">
                        <div class="price-tag">
                            <span class="currency-symbol">PKR</span> 
                            @if($product->sale_price)
                                {{ number_format($product->sale_price, 0) }}
                                <small class="line-through opacity-75 ml-1">{{ number_format($product->price, 0) }}</small>
                            @else
                                {{ number_format($product->price, 0) }}
                            @endif
                        </div>
                    </div>
                        
                    <div class="p-4 md:p-6">
                        <h3 class="text-lg md:text-xl font-bold text-gray-800 mb-2">{{ $product->name }}</h3>
                        <p class="text-gray-600 mb-4 line-clamp-2 text-sm md:text-base">{{ $product->description }}</p>
                        
                        <div class="flex justify-between items-center">
                            <button onclick="addToCart({{ $product->id }}, this)" class="add-to-cart-btn @if(in_array($product->id, $cartItems ?? [])) added-to-cart @endif" id="add-to-cart-{{ $product->id }}">
                                @if(in_array($product->id, $cartItems ?? []))
                                    <i class="fas fa-check mr-2"></i>Added!
                                @else
                                    <i class="fas fa-heart mr-2"></i>Add to Cart
                                @endif
                            </button>
                            
                            <div class="flex space-x-2">
                                <button onclick="openShareModal('{{ $product->slug }}', '{{ $product->name }}')" class="share-btn" title="Share Product">
                                    <i class="fas fa-share-alt"></i>
                                </button>
                                <a href="{{ route('products.show', $product->slug) }}" class="share-btn" title="View Details">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @endisset
        </div>
        
        @isset($products)
            @if($products->hasPages())
            <div class="mt-8 md:mt-12 flex justify-center">
                {{ $products->onEachSide(1)->links() }}
            </div>
            @endif
        @endisset
    </div>
</div>

<script>
// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Initialize lazy loading for images
    if ('IntersectionObserver' in window) {
        const lazyImages = document.querySelectorAll('.lazy-load');
        
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.add('loaded');
                    imageObserver.unobserve(lazyImage);
                }
            });
        }, {
            rootMargin: '200px 0px'
        });

        lazyImages.forEach(lazyImage => {
            imageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers without IntersectionObserver
        document.querySelectorAll('.lazy-load').forEach(img => {
            img.src = img.dataset.src;
            img.classList.add('loaded');
        });
    }
});

// Category filtering
function filterProducts(categoryId) {
    const products = document.querySelectorAll('.product-card');
    const buttons = document.querySelectorAll('.category-btn');
    
    // Update active button
    buttons.forEach(btn => btn.classList.remove('active'));
    document.querySelector(`[data-category="${categoryId}"]`).classList.add('active');
    
    // Filter products
    products.forEach((product, index) => {
        if (categoryId === 'all' || product.dataset.category === categoryId) {
            product.style.display = 'block';
            product.style.animationDelay = (index * 0.1) + 's';
            product.classList.remove('animate__fadeOut');
            product.classList.add('animate__fadeInUp');
        } else {
            product.classList.remove('animate__fadeInUp');
            product.classList.add('animate__fadeOut');
            setTimeout(() => {
                product.style.display = 'none';
            }, 300);
        }
    });
}

// Add to cart function
function addToCart(productId, buttonElement) {
    const btn = buttonElement || document.getElementById('add-to-cart-' + productId);
    const originalContent = btn.innerHTML;
    
    btn.innerHTML = '<span class="loading-spinner"></span>';
    btn.disabled = true;
    
    fetch('{{ route("cart.add") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            product_id: productId,
            quantity: 1
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update button to show "Added!" state
            btn.innerHTML = '<i class="fas fa-check mr-2"></i>Added!';
            btn.classList.add('added-to-cart');
            showNotification('Product added to cart! ❤️', 'success');
            updateCartCount();
        } else {
            showNotification(data.message || 'Error adding product to cart', 'error');
            btn.innerHTML = originalContent;
        }
        btn.disabled = false;
    })
    .catch(error => {
        console.error('Error:', error);
        btn.innerHTML = originalContent;
        btn.disabled = false;
        showNotification('Error adding product to cart', 'error');
    });
}

// Share Modal Functions
let currentShareUrl = '';
let currentShareTitle = '';
function openShareModal(slug, title) {
    // Generate clean URL without /Needly/public/
    currentShareUrl = `${window.location.origin}/products/${slug}`;
    currentShareTitle = title;
    
    const shareModal = document.getElementById('shareModal');
    const shareLinkInput = document.getElementById('shareLinkInput');
    
    shareLinkInput.value = currentShareUrl;
    shareModal.classList.add('active');
    
    // Set up social share links
    document.querySelector('.facebook-bg').setAttribute('href', 
        `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentShareUrl)}&quote=${encodeURIComponent('Check out this product: ' + currentShareTitle)}`);
    
    document.querySelector('.twitter-bg').setAttribute('href', 
        `https://twitter.com/intent/tweet?text=${encodeURIComponent('Check out this product: ' + currentShareTitle)}&url=${encodeURIComponent(currentShareUrl)}`);
    
    document.querySelector('.whatsapp-bg').setAttribute('href', 
        `https://wa.me/?text=${encodeURIComponent('Check out this product: ' + currentShareTitle + ' - ' + currentShareUrl)}`);
    
    document.querySelector('.linkedin-bg').setAttribute('href', 
        `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(currentShareUrl)}&title=${encodeURIComponent(currentShareTitle)}&summary=${encodeURIComponent('Check out this amazing product!')}`);
    
    document.querySelector('.pinterest-bg').setAttribute('href', 
        `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(currentShareUrl)}&description=${encodeURIComponent(currentShareTitle)}`);
}

function closeShareModal() {
    document.getElementById('shareModal').classList.remove('active');
}

function copyShareLink() {
    const shareLinkInput = document.getElementById('shareLinkInput');
    shareLinkInput.select();
    shareLinkInput.setSelectionRange(0, 99999);
    
    try {
        document.execCommand('copy');
        showNotification('Link copied to clipboard!', 'success');
    } catch (err) {
        showNotification('Failed to copy link', 'error');
    }
}

function shareOnSocial(network) {
    // Track social shares if needed
    console.log(`Shared to ${network}`);
    return true;
}

// Notification system
function showNotification(message, type) {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 z-50 p-3 md:p-4 rounded-lg text-white font-semibold animate__animated animate__fadeInRight ${
        type === 'success' ? 'bg-green-500' : 'bg-red-500'
    }`;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.remove('animate__fadeInRight');
        notification.classList.add('animate__fadeOutRight');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Close modal when clicking outside
document.getElementById('shareModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeShareModal();
    }
});

// Close modal with Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeShareModal();
    }
});

// Loading spinner style
document.head.insertAdjacentHTML('beforeend', `
    <style>
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @media (prefers-reduced-motion: reduce) {
            .loading-spinner {
                animation: none;
                border: 3px solid white;
                border-right-color: transparent;
                border-radius: 50%;
            }
        }
    </style>
`);

// Update cart count function
function updateCartCount() {
    // In a real app, you would fetch the updated cart count from the server
    const cartCountBadge = document.querySelector('.cart-count');
    if (cartCountBadge) {
        const currentCount = parseInt(cartCountBadge.textContent) || 0;
        cartCountBadge.textContent = currentCount + 1;
        cartCountBadge.style.display = 'flex';
    }
}
</script>
@endsection