ТЗ: Розробка інтерактивного бокового кошика (Flyout Cart Drawer) з оптимізацією Core Web Vitals

<?php
declare(strict_types=1);

function agenticlab_render_cart_drawer(): void {
    if (is_cart() || is_checkout()) return;

    $cart = WC()->cart;
    $subtotal = (float) ($cart ? $cart->get_subtotal() : 0);
    $threshold = 100.0; // Порог бесплатной доставки $100
    $percent = min(100, ($subtotal / $threshold) * 100);
    $diff = max(0, $threshold - $subtotal);
    ?>
    <div id="agenticlab-cart-drawer" class="fixed inset-0 z-50 pointer-events-none transition-all duration-300">
        <!-- Backdrop -->
        <div id="agenticlab-drawer-backdrop" class="absolute inset-0 bg-black/50 opacity-0 transition-opacity duration-300 pointer-events-auto hidden"></div>

        <!-- Sliding Panel -->
        <div id="agenticlab-drawer-panel" class="absolute top-0 right-0 h-full w-full max-w-md bg-bg-surface border-l border-border shadow-2xl transform translate-x-full transition-transform duration-300 flex flex-col pointer-events-auto">
            <!-- Header -->
            <div class="p-4 border-b border-border flex items-center justify-between">
                <h2 class="text-lg font-bold text-text-primary">Корзина</h2>
                <button id="agenticlab-close-drawer" class="p-1.5 text-text-muted hover:text-text-primary rounded-lg transition-colors">
                    ✕
                </button>
            </div>

            <!-- Free Shipping Bar -->
            <div class="p-4 bg-bg-elevated/60 border-b border-border">
                <div class="text-xs text-text-secondary mb-1.5 font-medium">
                    <?php if ($diff > 0): ?>
                        До бесплатной доставки осталось <strong class="text-accent-cyan"><?php echo wc_price($diff); ?></strong>
                    <?php else: ?>
                        <span class="text-emerald-400 font-bold">🎉 Доставка бесплатна!</span>
                    <?php endif; ?>
                </div>
                <div class="w-full h-2 bg-bg-surface rounded-full overflow-hidden border border-border">
                    <div class="h-full bg-gradient-to-r from-accent-cyan to-accent-violet transition-all duration-500 rounded-full" style="width: <?php echo esc_attr($percent); ?>%;"></div>
                </div>
            </div>

            <!-- Items List Container -->
            <div id="agenticlab-drawer-items" class="flex-1 overflow-y-auto p-4 space-y-4">
                <!-- Контент товаров инжектится через AJAX -->
            </div>

            <!-- Footer Checkout -->
            <div class="p-4 border-t border-border bg-bg-elevated/40 space-y-3">
                <div class="flex items-center justify-between text-base font-bold">
                    <span>Итого:</span>
                    <span id="agenticlab-drawer-total"><?php echo $cart ? $cart->get_cart_total() : '$0'; ?></span>
                </div>
                <a href="<?php echo esc_url(wc_get_checkout_url()); ?>" class="block w-full py-3 text-center text-sm font-bold text-white bg-accent-violet hover:bg-accent-violet/90 rounded-xl transition-all shadow-lg shadow-accent-violet/20">
                    Оформить заказ
                </a>
            </div>
        </div>
    </div>
    <?php
}
add_action('wp_footer', 'agenticlab_render_cart_drawer');