<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title', ($seo->title ?? 'MotoSolution Bangladesh – Japanese Reconditioned Cars & Japan Live Auction'))</title>
    <meta name="description" content="@yield('meta_description', ($seo->description ?? 'Explore verified Japanese vehicles, bid on live Japan auctions, and calculate Bangladesh landed cost before you buy.'))">
    <meta name="keywords" content="@yield('meta_keywords', ($seo->keywords ?? 'japanese reconditioned cars bangladesh, japan auction bid dhaka, corolla cross hybrid, toyota harrier'))">
    <link rel="canonical" href="@yield('canonical', ($seo->canonical_url ?? url()->current()))">

    <!-- Open Graph & Social -->
    <meta property="og:title" content="@yield('og_title', ($seo->og_title ?? 'MotoSolution Bangladesh'))">
    <meta property="og:description" content="@yield('og_description', ($seo->og_description ?? 'Your Dream Car, Directly From Japan.'))">
    <meta property="og:image" content="@yield('og_image', ($seo->og_image ?? 'https://images.unsplash.com/photo-1549399542-7e3f8b79c341?w=1200&q=80'))">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">

    <!-- 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=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- FontAwesome 6 Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- Schema JSON-LD -->
    @if(isset($schemaJson))
        <script type="application/ld+json">
            {!! json_encode($schemaJson, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
        </script>
    @endif
    @yield('extra_schema')

    <!-- Vite Assets -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900 font-sans antialiased selection:bg-red-600 selection:text-white flex flex-col min-h-screen">

    <!-- Top Announcement & Showroom Bar -->
    <div class="bg-[#070A11] border-b border-white/5 text-[11px] text-slate-400 py-2 px-4 sm:px-6 lg:px-8 hidden md:block">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <div class="flex items-center space-x-6">
                <span class="flex items-center gap-2 text-slate-400">
                    <i class="fa-solid fa-location-dot text-red-500"></i>
                    <span>{{ config('motosolution.contact.address', 'House 24, Road 3, Block B, Niketan, Gulshan-1, Dhaka') }}</span>
                </span>
                <span class="flex items-center gap-2 text-slate-400">
                    <i class="fa-regular fa-clock text-slate-500"></i>
                    <span>{{ config('motosolution.contact.hours', 'Sat - Thu: 10:00 AM - 8:00 PM') }}</span>
                </span>
            </div>
            <div class="flex items-center space-x-4">
                <a href="tel:{{ config('motosolution.contact.phone') }}" class="hover:text-white transition flex items-center gap-1.5 font-medium text-slate-300">
                    <i class="fa-solid fa-phone text-red-500 text-xs"></i>
                    <span>{{ config('motosolution.contact.phone', '+8801714116695') }}</span>
                </a>
                <span class="text-white/10">|</span>
                <!-- Language Switcher -->
                <div class="flex items-center space-x-1 font-semibold text-[11px]">
                    <a href="{{ route('locale.switch', 'en') }}" class="px-2 py-0.5 rounded transition {{ app()->getLocale() === 'en' ? 'bg-red-600 text-white font-bold' : 'text-slate-400 hover:text-white' }}">EN</a>
                    <a href="{{ route('locale.switch', 'bn') }}" class="px-2 py-0.5 rounded transition {{ app()->getLocale() === 'bn' ? 'bg-red-600 text-white font-bold' : 'text-slate-400 hover:text-white' }}">বাংলা</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Sticky Main Navigation Header -->
    <header class="sticky top-0 z-50 bg-[#0B0F19]/95 backdrop-blur-xl border-b border-white/10 text-white transition-all duration-200 shadow-2xl shadow-black/40" x-data="{ mobileMenuOpen: false }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between gap-4 xl:gap-6">
            
            <!-- Brand Logo -->
            <a href="{{ route('home') }}" class="flex items-center gap-3 shrink-0 group py-1">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-red-600 via-red-600 to-red-800 flex items-center justify-center text-white font-extrabold text-xl shadow-lg shadow-red-900/50 group-hover:scale-105 transition-all duration-300 ring-1 ring-white/20">
                    M
                </div>
                <div>
                    <span class="text-xl font-extrabold tracking-tight text-white flex items-center font-heading leading-tight">
                        MOTO<span class="text-red-500">SOLUTION</span>
                    </span>
                    <span class="block text-[9px] uppercase tracking-widest text-slate-400 font-bold -mt-0.5">Bangladesh · Japan Import</span>
                </div>
            </a>

            <!-- Desktop Navigation Links (Never wrapping, single line) -->
            <nav class="hidden xl:flex items-center space-x-1 text-xs font-semibold tracking-wide">
                <a href="{{ route('home') }}" class="px-3 py-2 rounded-lg whitespace-nowrap transition {{ request()->routeIs('home') ? 'text-red-500 bg-red-500/10' : 'text-slate-300 hover:text-white hover:bg-white/5' }}">
                    {{ __('app.home') }}
                </a>
                <a href="{{ route('inventory.index') }}" class="px-3 py-2 rounded-lg whitespace-nowrap transition flex items-center gap-1.5 {{ request()->routeIs('inventory.*') ? 'text-red-500 bg-red-500/10' : 'text-slate-300 hover:text-white hover:bg-white/5' }}">
                    <span>{{ __('app.inventory') }}</span>
                    <span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-red-600/20 text-red-400 border border-red-500/30 uppercase">Stock</span>
                </a>
                <a href="{{ route('auction.index') }}" class="px-3 py-2 rounded-lg whitespace-nowrap transition flex items-center gap-1.5 {{ request()->routeIs('auction.*') ? 'text-red-500 bg-red-500/10' : 'text-slate-300 hover:text-white hover:bg-white/5' }}">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
                    </span>
                    <span>{{ __('app.live_auctions') }}</span>
                </a>
                <a href="{{ route('calculator') }}" class="px-3 py-2 rounded-lg whitespace-nowrap transition {{ request()->routeIs('calculator') ? 'text-red-500 bg-red-500/10' : 'text-slate-300 hover:text-white hover:bg-white/5' }}">
                    {{ __('app.calculator') }}
                </a>
                <a href="{{ route('preorder') }}" class="px-3 py-2 rounded-lg whitespace-nowrap transition {{ request()->routeIs('preorder') ? 'text-red-500 bg-red-500/10' : 'text-slate-300 hover:text-white hover:bg-white/5' }}">
                    {{ __('app.preorder') }}
                </a>
                <a href="{{ route('auction-sheet') }}" class="px-3 py-2 rounded-lg whitespace-nowrap transition {{ request()->routeIs('auction-sheet') ? 'text-red-500 bg-red-500/10' : 'text-slate-300 hover:text-white hover:bg-white/5' }}">
                    {{ __('app.auction_sheet') }}
                </a>
                
                <!-- More Dropdown -->
                <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                    <button @click="open = !open" class="px-3 py-2 rounded-lg whitespace-nowrap text-slate-300 hover:text-white hover:bg-white/5 flex items-center gap-1.5 transition">
                        <span>More</span>
                        <i class="fa-solid fa-chevron-down text-[9px] opacity-70 transition-transform duration-200" :class="{'rotate-180': open}"></i>
                    </button>
                    <div x-show="open" x-transition class="absolute right-0 mt-2 w-52 bg-[#111827] border border-white/10 rounded-2xl shadow-2xl py-2 z-50 text-xs backdrop-blur-xl">
                        <a href="{{ route('how-it-works') }}" class="flex items-center gap-2.5 px-4 py-2.5 text-slate-300 hover:text-white hover:bg-white/5 transition">
                            <i class="fa-solid fa-route text-red-400 w-4 text-center"></i>
                            <span>How It Works</span>
                        </a>
                        <a href="{{ route('services') }}" class="flex items-center gap-2.5 px-4 py-2.5 text-slate-300 hover:text-white hover:bg-white/5 transition">
                            <i class="fa-solid fa-screwdriver-wrench text-blue-400 w-4 text-center"></i>
                            <span>Our Services</span>
                        </a>
                        <a href="{{ route('about') }}" class="flex items-center gap-2.5 px-4 py-2.5 text-slate-300 hover:text-white hover:bg-white/5 transition">
                            <i class="fa-solid fa-building text-amber-400 w-4 text-center"></i>
                            <span>About MotoSolution</span>
                        </a>
                        <a href="{{ route('blog.index') }}" class="flex items-center gap-2.5 px-4 py-2.5 text-slate-300 hover:text-white hover:bg-white/5 transition">
                            <i class="fa-solid fa-newspaper text-emerald-400 w-4 text-center"></i>
                            <span>Insights & Guides</span>
                        </a>
                        <a href="{{ route('faq') }}" class="flex items-center gap-2.5 px-4 py-2.5 text-slate-300 hover:text-white hover:bg-white/5 transition">
                            <i class="fa-solid fa-circle-question text-purple-400 w-4 text-center"></i>
                            <span>Frequently Asked Q's</span>
                        </a>
                        <div class="my-1 border-t border-white/10"></div>
                        <a href="{{ route('contact') }}" class="flex items-center gap-2.5 px-4 py-2.5 text-slate-300 hover:text-white hover:bg-white/5 transition">
                            <i class="fa-solid fa-location-dot text-rose-400 w-4 text-center"></i>
                            <span>Showroom & Contact</span>
                        </a>
                    </div>
                </div>
            </nav>

            <!-- Actions & User Button (WhatsApp Button Removed per User Request) -->
            <div class="flex items-center space-x-3">
                @auth
                    <!-- Auth Dropdown -->
                    <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open" class="flex items-center gap-2.5 bg-white/5 hover:bg-white/10 border border-white/10 px-3 py-1.5 rounded-xl text-xs font-semibold transition group">
                            <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-red-600 to-red-800 text-white flex items-center justify-center font-bold text-xs shadow-md">
                                {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                            </div>
                            <div class="text-left hidden sm:block">
                                <p class="font-bold text-white text-xs leading-none group-hover:text-red-400 transition">{{ Str::words(Auth::user()->name, 1, '') }}</p>
                                <span class="text-[9px] text-slate-400 uppercase font-bold tracking-wider">
                                    {{ Auth::user()->role === 'customer' ? 'Client' : str_replace('_', ' ', Auth::user()->role) }}
                                </span>
                            </div>
                            <i class="fa-solid fa-chevron-down text-[9px] text-slate-400 ml-1 transition-transform duration-200" :class="{'rotate-180': open}"></i>
                        </button>
                        <div x-show="open" x-transition class="absolute right-0 mt-2 w-56 bg-[#111827] border border-white/10 rounded-2xl shadow-2xl py-2 z-50 text-xs backdrop-blur-xl">
                            <div class="px-4 py-2.5 border-b border-white/10">
                                <p class="font-bold text-white truncate">{{ Auth::user()->name }}</p>
                                <p class="text-[10px] text-slate-400 truncate">{{ Auth::user()->email }}</p>
                            </div>
                            @if(Auth::user()->isAdmin())
                                <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-2.5 px-4 py-2.5 text-red-400 hover:bg-white/5 font-bold">
                                    <i class="fa-solid fa-gauge-high w-4 text-center"></i>
                                    <span>Admin CRM Console</span>
                                </a>
                            @endif
                            <a href="{{ route('customer.dashboard') }}" class="flex items-center gap-2.5 px-4 py-2 text-slate-200 hover:bg-white/5">
                                <i class="fa-solid fa-chart-pie w-4 text-center text-slate-400"></i>
                                <span>My Dashboard</span>
                            </a>
                            <a href="{{ route('customer.bids.index') }}" class="flex items-center gap-2.5 px-4 py-2 text-slate-200 hover:bg-white/5">
                                <i class="fa-solid fa-gavel w-4 text-center text-slate-400"></i>
                                <span>My Authorized Bids</span>
                            </a>
                            <a href="{{ route('customer.orders.index') }}" class="flex items-center gap-2.5 px-4 py-2 text-slate-200 hover:bg-white/5">
                                <i class="fa-solid fa-ship w-4 text-center text-slate-400"></i>
                                <span>My Orders & Tracking</span>
                            </a>
                            <a href="{{ route('customer.watchlist') }}" class="flex items-center gap-2.5 px-4 py-2 text-slate-200 hover:bg-white/5">
                                <i class="fa-solid fa-heart w-4 text-center text-slate-400"></i>
                                <span>Saved Watchlist</span>
                            </a>
                            <a href="{{ route('customer.profile') }}" class="flex items-center gap-2.5 px-4 py-2 text-slate-200 hover:bg-white/5 border-b border-white/10">
                                <i class="fa-solid fa-user-gear w-4 text-center text-slate-400"></i>
                                <span>Profile & Security</span>
                            </a>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="w-full text-left flex items-center gap-2.5 px-4 py-2.5 text-rose-400 hover:bg-white/5 font-bold transition">
                                    <i class="fa-solid fa-arrow-right-from-bracket w-4 text-center"></i>
                                    <span>Sign Out</span>
                                </button>
                            </form>
                        </div>
                    </div>
                @else
                    <!-- Sign In / Register (Refined styling) -->
                    <div class="flex items-center space-x-2">
                        <a href="{{ route('login') }}" class="text-xs font-bold text-slate-300 hover:text-white px-3 py-2 rounded-xl hover:bg-white/5 transition">
                            Sign In
                        </a>
                        <a href="{{ route('register') }}" class="inline-flex items-center gap-1.5 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-white text-xs font-bold px-4 py-2 rounded-xl shadow-lg shadow-red-900/30 transition transform hover:-translate-y-0.5">
                            <span>Register</span>
                            <i class="fa-solid fa-arrow-right text-[10px]"></i>
                        </a>
                    </div>
                @endauth

                <!-- Mobile Menu Toggle Button (Screens < 1280px) -->
                <button type="button" @click="mobileMenuOpen = !mobileMenuOpen" class="xl:hidden p-2 rounded-xl text-slate-400 hover:text-white hover:bg-white/10 transition">
                    <i class="fa-solid" :class="mobileMenuOpen ? 'fa-xmark text-lg' : 'fa-bars text-lg'"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Drawer Navigation -->
        <div x-show="mobileMenuOpen" x-transition class="xl:hidden bg-[#0F172A] border-b border-white/10 px-4 pt-3 pb-6 space-y-1 text-sm shadow-2xl">
            <a href="{{ route('home') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">{{ __('app.home') }}</a>
            <a href="{{ route('inventory.index') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5 flex items-center justify-between">
                <span>{{ __('app.inventory') }}</span>
                <span class="text-[10px] bg-red-600/30 text-red-400 font-bold px-2 py-0.5 rounded-full">Showroom Stock</span>
            </a>
            <a href="{{ route('auction.index') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5 flex items-center justify-between">
                <span>{{ __('app.live_auctions') }}</span>
                <span class="text-[10px] bg-emerald-500/20 text-emerald-400 font-bold px-2 py-0.5 rounded-full">Live Floor</span>
            </a>
            <a href="{{ route('calculator') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">{{ __('app.calculator') }}</a>
            <a href="{{ route('preorder') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">{{ __('app.preorder') }}</a>
            <a href="{{ route('auction-sheet') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">{{ __('app.auction_sheet') }}</a>
            <a href="{{ route('how-it-works') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">How It Works</a>
            <a href="{{ route('services') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">Our Services</a>
            <a href="{{ route('about') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">About Us</a>
            <a href="{{ route('blog.index') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">Blog & Guides</a>
            <a href="{{ route('contact') }}" class="block px-3 py-2 rounded-xl text-slate-200 font-medium hover:bg-white/5">Contact</a>
            
            <div class="pt-4 mt-2 border-t border-white/10 flex items-center justify-between">
                <span class="text-xs text-slate-400">Language:</span>
                <div class="flex items-center space-x-2">
                    <a href="{{ route('locale.switch', 'en') }}" class="px-3 py-1 rounded text-xs font-bold {{ app()->getLocale() === 'en' ? 'bg-red-600 text-white' : 'bg-white/10 text-slate-300' }}">English</a>
                    <a href="{{ route('locale.switch', 'bn') }}" class="px-3 py-1 rounded text-xs font-bold {{ app()->getLocale() === 'bn' ? 'bg-red-600 text-white' : 'bg-white/10 text-slate-300' }}">বাংলা</a>
                </div>
            </div>
        </div>
    </header>

    <!-- System Flash Alerts -->
    @if(session('success'))
        <div class="bg-emerald-600 text-white text-sm font-medium py-3 px-4 shadow-lg text-center flex items-center justify-center gap-2">
            <i class="fa-solid fa-circle-check text-emerald-200"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif
    @if(session('error'))
        <div class="bg-red-600 text-white text-sm font-medium py-3 px-4 shadow-lg text-center flex items-center justify-center gap-2">
            <i class="fa-solid fa-triangle-exclamation text-red-200"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif
    @if(session('info'))
        <div class="bg-blue-600 text-white text-sm font-medium py-3 px-4 shadow-lg text-center flex items-center justify-center gap-2">
            <i class="fa-solid fa-info-circle text-blue-200"></i>
            <span>{{ session('info') }}</span>
        </div>
    @endif

    <!-- Main Content Area -->
    <main class="flex-grow">
        @yield('content')
    </main>

    <!-- Sticky Mobile Bottom CTA Bar -->
    <div class="lg:hidden fixed bottom-0 inset-x-0 z-40 bg-[#0B0F19]/95 backdrop-blur-md border-t border-white/15 px-3 py-2.5 flex items-center justify-between gap-2 shadow-2xl">
        <a href="{{ route('auction.index') }}" class="flex-1 bg-red-600 hover:bg-red-700 text-white text-xs font-bold py-2.5 px-3 rounded-lg text-center flex items-center justify-center gap-1.5 shadow-md">
            <i class="fa-solid fa-gavel"></i>
            <span>Bid Now</span>
        </a>
        <a href="{{ route('calculator') }}" class="flex-1 bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold py-2.5 px-3 rounded-lg text-center flex items-center justify-center gap-1.5 border border-white/10">
            <i class="fa-solid fa-calculator text-amber-400"></i>
            <span>Cost Calc</span>
        </a>
        <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=Hello%20MotoSolution,%20I%20need%20vehicle%20information." target="_blank" rel="noopener" class="w-11 h-10 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg flex items-center justify-center text-lg shadow-md shrink-0">
            <i class="fa-brands fa-whatsapp"></i>
        </a>
        <a href="tel:{{ config('motosolution.contact.phone') }}" class="w-11 h-10 bg-white/10 hover:bg-white/20 text-white rounded-lg flex items-center justify-center text-sm border border-white/10 shrink-0">
            <i class="fa-solid fa-phone"></i>
        </a>
    </div>

    <!-- Luxury Footer -->
    <footer class="bg-[#0B0F19] border-t border-white/10 text-slate-400 pt-16 pb-24 lg:pb-12 text-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 pb-12 border-b border-white/10">
                
                <!-- Col 1: Brand & Bio -->
                <div class="lg:col-span-2 space-y-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-red-600 to-red-800 flex items-center justify-center text-white font-extrabold text-xl shadow-lg shadow-red-900/40">
                            M
                        </div>
                        <span class="text-2xl font-extrabold tracking-tight text-white font-heading">
                            MOTO<span class="text-red-500">SOLUTION</span>
                        </span>
                    </div>
                    <p class="text-slate-400 text-sm leading-relaxed max-w-sm">
                        Premier Japanese automobile importer and Japan live auction concierge in Bangladesh. Sourcing high-grade reconditioned vehicles directly from USS Tokyo, TAA, and CAA auction floors with complete Chittagong customs and BRTA registration transparency.
                    </p>
                    <div class="pt-2 flex items-center space-x-3">
                        <a href="https://facebook.com/motosolbd" target="_blank" class="w-9 h-9 rounded-lg bg-white/5 hover:bg-red-600 text-white flex items-center justify-center transition"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="https://youtube.com/@motosolbd" target="_blank" class="w-9 h-9 rounded-lg bg-white/5 hover:bg-red-600 text-white flex items-center justify-center transition"><i class="fa-brands fa-youtube"></i></a>
                        <a href="https://instagram.com/motosolbd" target="_blank" class="w-9 h-9 rounded-lg bg-white/5 hover:bg-red-600 text-white flex items-center justify-center transition"><i class="fa-brands fa-instagram"></i></a>
                        <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}" target="_blank" class="w-9 h-9 rounded-lg bg-white/5 hover:bg-emerald-600 text-white flex items-center justify-center transition"><i class="fa-brands fa-whatsapp"></i></a>
                    </div>
                </div>

                <!-- Col 2: Marketplace -->
                <div>
                    <h4 class="text-xs font-bold uppercase tracking-wider text-white mb-4">Marketplace</h4>
                    <ul class="space-y-2.5 text-sm">
                        <li><a href="{{ route('inventory.index') }}" class="hover:text-white transition">Ready Stock Dhaka</a></li>
                        <li><a href="{{ route('auction.index') }}" class="hover:text-white transition flex items-center gap-1.5">Japan Live Auction <span class="text-[9px] bg-red-600 text-white px-1.5 py-0.5 rounded font-bold">LIVE</span></a></li>
                        <li><a href="{{ route('preorder') }}" class="hover:text-white transition">Japan Pre-Order Guide</a></li>
                        <li><a href="{{ route('calculator') }}" class="hover:text-white transition">Import Cost Calculator</a></li>
                        <li><a href="{{ route('auction-sheet') }}" class="hover:text-white transition">Auction Sheet Verification</a></li>
                    </ul>
                </div>

                <!-- Col 3: Company & Trust -->
                <div>
                    <h4 class="text-xs font-bold uppercase tracking-wider text-white mb-4">Company</h4>
                    <ul class="space-y-2.5 text-sm">
                        <li><a href="{{ route('how-it-works') }}" class="hover:text-white transition">How It Works</a></li>
                        <li><a href="{{ route('about') }}" class="hover:text-white transition">About MotoSolution</a></li>
                        <li><a href="{{ route('services') }}" class="hover:text-white transition">Full Services & Support</a></li>
                        <li><a href="{{ route('blog.index') }}" class="hover:text-white transition">Automotive Blog</a></li>
                        <li><a href="{{ route('faq') }}" class="hover:text-white transition">Frequently Asked Questions</a></li>
                        <li><a href="{{ route('contact') }}" class="hover:text-white transition">Showroom Location</a></li>
                    </ul>
                </div>

                <!-- Col 4: Showroom & Contacts -->
                <div>
                    <h4 class="text-xs font-bold uppercase tracking-wider text-white mb-4">Dhaka Showroom</h4>
                    <ul class="space-y-3 text-xs">
                        <li class="flex items-start gap-2.5">
                            <i class="fa-solid fa-map-pin text-red-500 mt-1 shrink-0"></i>
                            <span>House 24, Road 3, Block B, Niketan, Gulshan-1, Dhaka 1212, Bangladesh</span>
                        </li>
                        <li class="flex items-center gap-2.5">
                            <i class="fa-solid fa-phone text-emerald-400 shrink-0"></i>
                            <a href="tel:{{ config('motosolution.contact.phone') }}" class="hover:text-white transition">{{ config('motosolution.contact.phone') }}</a>
                        </li>
                        <li class="flex items-center gap-2.5">
                            <i class="fa-brands fa-whatsapp text-emerald-400 shrink-0"></i>
                            <a href="https://wa.me/{{ config('motosolution.contact.whatsapp') }}" target="_blank" class="hover:text-white transition">+880 1404-066329</a>
                        </li>
                        <li class="flex items-center gap-2.5">
                            <i class="fa-solid fa-envelope text-slate-400 shrink-0"></i>
                            <span>info@motosolbd.com</span>
                        </li>
                    </ul>
                </div>

            </div>

            <!-- Bottom Disclaimer & Copyright -->
            <div class="pt-8 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-slate-500">
                <p>© {{ date('Y') }} MotoSolution Bangladesh. All rights reserved. Japanese Vehicle Specialist.</p>
                <p class="max-w-xl text-center md:text-right text-[11px] text-slate-600">
                    Important: Bidding on MotoSolution authorizes maximum customer purchase ceilings. Total landed costs are commercial estimates subject to official NBR customs assessment at Chittagong Port.
                </p>
            </div>
        </div>
    </footer>

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