<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="AutoPart Online Store - Quality auto parts and accessories for all vehicle makes and models.">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'AutoPart Online Store')</title>

    {{-- Fonts --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    {{-- Tailwind CSS CDN --}}
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'] },
                    colors: {
                        brand: { red: '#e41e26', dark: '#1a1a1a', gray: '#333333' },
                        admin: { blue: '#2563eb', gray: '#f0f4ff' }
                    }
                }
            }
        }
    </script>

    {{-- Lucide Icons CDN --}}
    <script src="https://unpkg.com/lucide@latest"></script>

    <style>
        [x-cloak] { display: none !important; }
        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .scbar::-webkit-scrollbar { height: 4px; }
        .scbar::-webkit-scrollbar-thumb { background: #e41e26; border-radius: 2px; }
    </style>
    @stack('styles')
</head>
<body class="font-sans bg-white text-gray-900 antialiased">
    @include('partials.topbar')
    @include('partials.header')
    @include('partials.navbar')

    <main class="flex-grow min-h-screen">
        @yield('content')
    </main>

    @include('partials.footer')

    {{-- Floating WhatsApp Icon --}}
    <a href="https://wa.me/2349079472808" target="_blank" rel="noopener noreferrer" class="fixed bottom-6 right-6 z-50 bg-[#25D366] text-white p-4 rounded-full shadow-lg hover:bg-green-600 hover:scale-110 transition-transform duration-300 flex items-center justify-center group">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
            <path d="M11.99 2C6.47 2 2 6.48 2 12c0 1.76.46 3.42 1.25 4.89L2 22l5.24-1.31A9.973 9.973 0 0 0 11.99 22c5.52 0 10-4.48 10-10s-4.48-10-10-10zm0 18.32c-1.55 0-3.04-.39-4.36-1.12l-.31-.18-3.23.81.86-3.15-.2-.32A8.326 8.326 0 0 1 3.66 12c0-4.6 3.74-8.34 8.34-8.34 4.6 0 8.34 3.74 8.34 8.34 0 4.6-3.74 8.33-8.35 8.33zm4.56-6.24c-.25-.13-1.49-.74-1.72-.82-.23-.08-.4-.13-.57.12-.17.25-.65.82-.8 1-.15.17-.3.19-.55.07-.25-.13-1.07-.39-2.03-1.25-.75-.67-1.26-1.5-1.41-1.75-.15-.25-.02-.38.11-.51.11-.11.25-.29.38-.44.13-.15.17-.25.25-.42.08-.17.04-.32-.02-.45-.06-.13-.57-1.38-.78-1.89-.21-.5-.42-.43-.57-.44-.15-.01-.32-.01-.49-.01-.17 0-.44.06-.67.31-.23.25-.88.86-.88 2.1s.9 2.43 1.03 2.6c.13.17 1.77 2.7 4.29 3.79 1.05.45 1.62.64 2.14.81.6.19 1.15.16 1.58.1.48-.07 1.49-.61 1.7-1.2.21-.59.21-1.1.15-1.2-.06-.1-.23-.16-.48-.28z"/>
        </svg>
    </a>

    {{-- Cart & Wishlist JS --}}
    <script>
        // ========== Cart Manager ==========
        const CartManager = {
            KEY: 'autopart_cart',
            getItems() { return JSON.parse(localStorage.getItem(this.KEY) || '[]'); },
            save(items) { localStorage.setItem(this.KEY, JSON.stringify(items)); this.updateBadge(); },
            addItem(product) {
                const items = this.getItems();
                const existing = items.find(i => i.id === product.id);
                if (existing) { existing.quantity++; } else { items.push({...product, quantity: 1}); }
                this.save(items);
                this.showNotification(product.name + ' added to cart');
            },
            removeItem(id) {
                this.save(this.getItems().filter(i => i.id !== id));
            },
            updateQuantity(id, qty) {
                const items = this.getItems();
                const item = items.find(i => i.id === id);
                if (item) { item.quantity = Math.max(1, qty); }
                this.save(items);
            },
            clearCart() { this.save([]); },
            getTotal() { return this.getItems().reduce((sum, i) => sum + (i.price * i.quantity), 0); },
            getCount() { return this.getItems().reduce((sum, i) => sum + i.quantity, 0); },
            updateBadge() {
                const badge = document.getElementById('cart-badge');
                if (badge) { const c = this.getCount(); badge.textContent = c; badge.style.display = c > 0 ? 'flex' : 'none'; }
            },
            showNotification(msg) {
                const n = document.createElement('div');
                n.className = 'fixed top-4 right-4 z-[9999] bg-green-600 text-white px-6 py-3 rounded-lg shadow-xl font-bold text-sm flex items-center space-x-2 animate-slide-in';
                n.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5"></i><span>' + msg + '</span>';
                document.body.appendChild(n);
                lucide.createIcons();
                setTimeout(() => { n.style.opacity = '0'; n.style.transform = 'translateX(100%)'; n.style.transition = 'all 0.3s'; setTimeout(() => n.remove(), 300); }, 2000);
            }
        };

        // ========== Wishlist Manager ==========
        const WishlistManager = {
            KEY: 'autopart_wishlist',
            getItems() { return JSON.parse(localStorage.getItem(this.KEY) || '[]'); },
            save(items) { localStorage.setItem(this.KEY, JSON.stringify(items)); },
            toggle(id) {
                let items = this.getItems();
                if (items.includes(id)) { items = items.filter(i => i !== id); } else { items.push(id); }
                this.save(items);
                return items.includes(id);
            },
            includes(id) { return this.getItems().includes(id); }
        };

        // Init badges on load
        document.addEventListener('DOMContentLoaded', () => {
            CartManager.updateBadge();
            lucide.createIcons();
        });
    </script>

    <style>
        @keyframes slideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
        .animate-slide-in { animation: slideIn 0.3s ease-out; }
    </style>

    @stack('scripts')
</body>
</html>
