<div class="floating-panel" id="floatingPanel">
    <div class="panel-content">
        <!-- Поиск -->
        <div class="search-widget">
            <input type="text" placeholder="Найти косметику...">
            <button class="search-btn">🔍</button>
        </div>
        
        <!-- Корзина с счетчиком -->
        <div class="cart-widget">
            <span class="cart-icon">🛒</span>
            <span class="cart-count">0</span>
            <span class="cart-total">0₽</span>
        </div>
        
        <!-- Быстрые действия -->
        <div class="quick-actions">
            <button class="phone-btn">📞</button>
            <button class="favorites-btn">❤️</button>
            <button class="account-btn">👤</button>
        </div>
    </div>
</div>

.floating-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: transform 0.3s ease;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .floating-panel {
        top: auto;
        bottom: 0;
        border-radius: 20px 20px 0 0;
    }
}

class FloatingPanel {
    constructor() {
        this.panel = document.getElementById('floatingPanel');
        this.lastScrollY = window.scrollY;
        this.init();
    }
    
    init() {
        window.addEventListener('scroll', this.handleScroll.bind(this));
        this.updateCartInfo();
    }
    
    handleScroll() {
        const currentScrollY = window.scrollY;
        
        if (currentScrollY > 100) {
            this.showPanel();
        } else {
            this.hidePanel();
        }
        
        // Прячем при скролле вниз, показываем при скролле вверх
        if (currentScrollY > this.lastScrollY) {
            this.panel.style.transform = 'translateY(-100%)';
        } else {
            this.panel.style.transform = 'translateY(0)';
        }
        
        this.lastScrollY = currentScrollY;
    }
    
    showPanel() {
        this.panel.style.opacity = '1';
        this.panel.style.visibility = 'visible';
    }
    
    hidePanel() {
        this.panel.style.opacity = '0';
        this.panel.style.visibility = 'hidden';
    }
    
    updateCartInfo() {
        // Обновление данных корзины в реальном времени
        const cart = JSON.parse(localStorage.getItem('cart') || '[]');
        const count = cart.reduce((sum, item) => sum + item.quantity, 0);
        const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
        
        document.querySelector('.cart-count').textContent = count;
        document.querySelector('.cart-total').textContent = total + '₽';
    }
}

// Инициализация
new FloatingPanel();