<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Sawdabazar E-Commerce') | {{ \App\Models\Setting::getValue('site_name', 'Sawdabazar') }}</title>
    <meta name="description" content="@yield('meta_description', 'Premium single-vendor e-commerce platform delivering high quality products across Bangladesh.')">
    @stack('canonical')
    {{ $canonical ?? '' }}
    
    <!-- Dynamic Favicon -->
    @if($favicon = \App\Models\Setting::getValue('favicon'))
        <link rel="icon" type="image/x-icon" href="{{ Storage::url($favicon) }}">
    @endif

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request()->url() }}">
    <meta property="og:title" content="@yield('title', 'Sawdabazar E-Commerce') | {{ \App\Models\Setting::getValue('site_name', 'Sawdabazar') }}">
    <meta property="og:description" content="@yield('meta_description', 'Premium single-vendor e-commerce platform delivering high quality products across Bangladesh.')">
    @stack('og_image')
    {{ $ogImage ?? '' }}
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ request()->url() }}">
    <meta property="twitter:title" content="@yield('title', 'Sawdabazar E-Commerce') | {{ \App\Models\Setting::getValue('site_name', 'Sawdabazar') }}">
    <meta property="twitter:description" content="@yield('meta_description', 'Premium single-vendor e-commerce platform delivering high quality products across Bangladesh.')">
    
    <!-- Google 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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
    </style>

    <!-- Compile Assets via Vite -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <!-- Google Tag Manager (GTM) Header Injection -->
    @if($gtmId = \App\Models\Setting::getValue('gtm_container_id'))
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','{{ $gtmId }}');</script>
    @endif

    <!-- Meta Pixel Code Header Injection -->
    @if($pixelId = \App\Models\Setting::getValue('meta_pixel_id'))
        <script>
        !function(f,b,e,v,n,t,s)
        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
        n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)}(window, document,'script',
        'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '{{ $pixelId }}');
        fbq('track', 'PageView');
        </script>
        <noscript><img height="1" width="1" style="display:none"
        src="https://www.facebook.com/tr?id={{ $pixelId }}&ev=PageView&noscript=1"
        /></noscript>
    @endif

    <!-- Google Analytics (GA4) Standalone Header Injection -->
    @if($gaId = \App\Models\Setting::getValue('google_analytics_id'))
        <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id={{ $gaId }}"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '{{ $gaId }}');
        </script>
    @endif

    <!-- Dynamic Header Scripts -->
    {!! \App\Models\Setting::getValue('header_scripts') !!}

    @stack('json_ld')
    {!! $extraHead ?? '' !!}

    @livewireStyles
</head>
<body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col antialiased">

    <!-- GTM Body Code (noscript) -->
    @if($gtmId = \App\Models\Setting::getValue('gtm_container_id'))
        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ $gtmId }}"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    @endif

    <!-- Header Navigation -->
    <header x-data="{ mobileMenuOpen: false }" class="bg-white border-b border-gray-100 sticky top-0 z-40 shadow-sm/5 glass-nav">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 sm:h-20">
                <!-- Logo -->
                <div class="flex-shrink-0">
                    <a href="/" class="flex items-center space-x-2">
                        @if($logo = \App\Models\Setting::getValue('logo'))
                            <img src="{{ Storage::url($logo) }}" alt="{{ \App\Models\Setting::getValue('site_name', 'Sawdabazar') }}" class="h-10 w-auto object-contain">
                        @else
                            <span class="text-2xl font-extrabold bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent tracking-tight">
                                {{ \App\Models\Setting::getValue('site_name', 'Sawdabazar') }}
                            </span>
                        @endif
                    </a>
                </div>

                <!-- Navigation Links -->
                <nav class="hidden md:flex space-x-8 text-sm font-semibold text-gray-600">
                    <a href="/" class="hover:text-indigo-600 transition-colors">Home</a>
                    <a href="/shop" class="hover:text-indigo-600 transition-colors">Shop</a>
                    <a href="/categories" class="hover:text-indigo-600 transition-colors">Categories</a>
                    <a href="/contact" class="hover:text-indigo-600 transition-colors">Contact</a>
                </nav>

                <!-- Search component -->
                <div class="hidden lg:block w-64 xl:w-80">
                    @livewire('storefront.product-search')
                </div>

                <!-- Header Actions (Search, Account, Cart) -->
                <div class="flex items-center space-x-4 sm:space-x-6">
                    <!-- Wishlist Badge -->
                    @livewire('storefront.wishlist-badge')

                    <!-- Account Icon / Profile -->
                    @auth
                        <a href="/dashboard" class="p-2 text-gray-400 hover:text-indigo-600 transition-colors" title="My Account">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                        </a>
                    @else
                        <a href="/login" class="text-sm font-semibold text-gray-600 hover:text-indigo-600 transition-colors" title="Sign In">
                            Sign In
                        </a>
                    @endauth

                    <!-- Cart Trigger Component -->
                    @livewire('storefront.cart-trigger')

                    <!-- Mobile Menu Toggle Button -->
                    <button 
                        @click="mobileMenuOpen = !mobileMenuOpen"
                        type="button" 
                        class="p-2 text-gray-400 hover:text-indigo-600 md:hidden focus:outline-none transition-colors"
                        aria-controls="mobile-menu" 
                        aria-expanded="false"
                    >
                        <span class="sr-only">Open main menu</span>
                        <svg x-show="!mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                        <svg x-show="mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" x-cloak>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Menu Container -->
        <div 
            x-show="mobileMenuOpen" 
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-y-2"
            x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 -translate-y-2"
            class="md:hidden border-t border-gray-100 py-4 space-y-1 bg-white"
            id="mobile-menu"
            x-cloak
        >
            <a href="/" class="block px-4 py-2 text-base font-semibold text-gray-650 hover:bg-gray-50 hover:text-indigo-650 transition-colors">Home</a>
            <a href="/shop" class="block px-4 py-2 text-base font-semibold text-gray-650 hover:bg-gray-50 hover:text-indigo-650 transition-colors">Shop</a>
            <a href="/categories" class="block px-4 py-2 text-base font-semibold text-gray-650 hover:bg-gray-50 hover:text-indigo-650 transition-colors">Categories</a>
            <a href="/contact" class="block px-4 py-2 text-base font-semibold text-gray-650 hover:bg-gray-50 hover:text-indigo-650 transition-colors">Contact</a>
            
            <div class="border-t border-gray-100 pt-4 mt-4">
                @auth
                    <div class="px-4 py-2 flex items-center justify-between">
                        <span class="text-sm font-semibold text-gray-800">{{ auth()->user()->name }}</span>
                        <a href="/dashboard" class="text-xs font-bold text-indigo-600 hover:underline">Dashboard</a>
                    </div>
                    <form method="POST" action="{{ route('logout') }}" class="px-4">
                        @csrf
                        <button type="submit" class="w-full text-left py-2 text-sm font-semibold text-red-500 hover:text-red-650">
                            Sign Out
                        </button>
                    </form>
                @else
                    <a href="/login" class="block px-4 py-2 text-base font-semibold text-indigo-600 hover:bg-gray-50 transition-colors">Sign In</a>
                    <a href="/register" class="block px-4 py-2 text-base font-semibold text-gray-650 hover:bg-gray-50 transition-colors">Create Account</a>
                @endauth
            </div>
        </div>
    </header>

    <!-- Main Content Grid -->
    <main class="flex-grow">
        {{ $slot }}
    </main>

    <!-- Cart Sidebar Flyout -->
    @livewire('storefront.cart-flyout')

    <!-- Toast Notification Container -->
    <div 
        x-data="toastContainer()" 
        @show-toast.window="addToast($event.detail)" 
        class="fixed bottom-5 right-5 z-50 flex flex-col space-y-3 max-w-sm w-full pointer-events-none"
    >
        <template x-for="toast in toasts" :key="toast.id">
            <div 
                x-show="toast.visible"
                x-transition:enter="toast-enter"
                x-transition:leave="toast-leave"
                class="bg-white rounded-xl shadow-lg border border-gray-100 p-4 pointer-events-auto flex items-start space-x-3 border-l-4"
                :class="{
                    'border-l-red-500': toast.type === 'error',
                    'border-l-green-500': toast.type === 'success',
                    'border-l-blue-500': toast.type === 'info',
                    'border-l-amber-500': toast.type === 'warning'
                }"
            >
                <div class="flex-shrink-0">
                    <template x-if="toast.type === 'error'">
                        <svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </template>
                    <template x-if="toast.type === 'success'">
                        <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </template>
                    <template x-if="toast.type !== 'error' && toast.type !== 'success'">
                        <svg class="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </template>
                </div>
                <div class="flex-grow">
                    <p class="text-sm font-semibold text-gray-900" x-text="toast.message"></p>
                </div>
                <button @click="removeToast(toast.id)" class="text-gray-400 hover:text-gray-500 transition-colors">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </template>
    </div>

    <!-- Global Loading Overlay -->
    <div wire:loading.delay.longest class="fixed inset-0 z-50 flex items-center justify-center bg-gray-950/20 backdrop-blur-xs">
        <div class="bg-white p-4 rounded-xl shadow-xl flex items-center space-x-3 border border-gray-100">
            <svg class="animate-spin h-6 w-6 text-indigo-650" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span class="text-sm font-semibold text-gray-750 animate-pulse">Processing request...</span>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 border-t border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 sm:gap-12">
                <!-- Branding / Info -->
                <div class="space-y-4">
                    <span class="text-xl font-bold text-white tracking-tight">
                        {{ \App\Models\Setting::getValue('site_name', 'Sawdabazar') }}
                    </span>
                    <p class="text-sm text-gray-500">
                        Premium single-vendor e-commerce platform delivering high quality products across Bangladesh.
                    </p>
                </div>

                <!-- Shopping links -->
                <div>
                    <h3 class="text-white font-semibold text-sm tracking-wider uppercase mb-4">Shop</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="/shop" class="hover:text-white transition-colors">All Products</a></li>
                        <li><a href="/shop?featured=1" class="hover:text-white transition-colors">Featured Items</a></li>
                        <li><a href="/shop?discount=1" class="hover:text-white transition-colors">Hot Deals</a></li>
                    </ul>
                </div>

                <!-- Corporate links -->
                <div>
                    <h3 class="text-white font-semibold text-sm tracking-wider uppercase mb-4">Customer Support</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="/contact" class="hover:text-white transition-colors">Contact Us</a></li>
                        <li><a href="/pages/privacy-policy" class="hover:text-white transition-colors">Privacy Policy</a></li>
                        <li><a href="/pages/terms-and-conditions" class="hover:text-white transition-colors">Terms of Service</a></li>
                    </ul>
                </div>

                <!-- Contact & Payment partner details -->
                <div class="space-y-4">
                    <h3 class="text-white font-semibold text-sm tracking-wider uppercase">Contact info</h3>
                    <p class="text-sm text-gray-500">
                        {!! nl2br(e(\App\Models\Setting::getValue('store_address', 'Dhaka, Bangladesh'))) !!}
                    </p>
                    <!-- Small payment partner icons indicator -->
                    <div class="pt-2">
                        <span class="text-xs font-semibold uppercase tracking-wider text-gray-600 block mb-2">We Accept</span>
                        <div class="flex space-x-2 text-xs font-bold text-gray-500">
                            <span class="bg-gray-800 px-2 py-1 rounded text-white">bKash</span>
                            <span class="bg-gray-800 px-2 py-1 rounded text-white">Nagad</span>
                            <span class="bg-gray-800 px-2 py-1 rounded text-white">Cards</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Copyright footer -->
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-gray-600">
                <p>&copy; {{ date('Y') }} {{ \App\Models\Setting::getValue('site_name', 'Sawdabazar') }}. All rights reserved.</p>
                <p class="mt-2 sm:mt-0">Powered by Sawdabazar Premium Platform</p>
            </div>
        </div>
    </footer>

    <!-- Dynamic Footer Scripts Injection -->
    {!! \App\Models\Setting::getValue('footer_scripts') !!}

    <!-- Analytics & Tracking Event Listeners -->
    <script>
        window.addEventListener('track-dataLayer', event => {
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({ ecommerce: null }); // Clear previous ecommerce object
            window.dataLayer.push(event.detail);
        });

        window.addEventListener('track-pixel', event => {
            if (window.fbq) {
                fbq('track', event.detail.eventName, event.detail.customData, { eventID: event.detail.eventId });
            }
        });
    </script>

    @livewireScripts
</body>
</html>
