<footer class="bg-black text-white">
    <!-- Promotional Section -->
    <div class="bg-black py-8 md:py-12 lg:py-16">
        <div class="buyer-container">
            <p class="text-xl md:text-2xl lg:text-2xl xl:text-3xl font-bold  uppercase tracking-tight leading-tight">
                Lorem Ipsum is Simply <br> Dummy Text of is the <br> Printing.
            </p>
        </div>
    </div>

    <!-- Main Footer Content -->
    <div class="bg-black border-t border-gray-800 py-12 md:py-16 lg:py-20">
        <div class="buyer-container">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12 lg:gap-16">
                <!-- Office 1 -->
                <div>
                    <h4 class="font-semibold text-base md:text-lg mb-4 md:mb-5 uppercase tracking-wide">Office</h4>
                    <p class="text-gray-400 text-sm leading-relaxed">
                        United State - 564 Street, Sector 32H, Office 732 US, United State
                    </p>
                </div>

                <!-- Office 2 / Contact -->
                <div>
                    <h4 class="font-semibold text-base md:text-lg mb-4 md:mb-5 uppercase tracking-wide">Office</h4>
                    <p class="text-gray-400 text-sm mb-2">infooffice@gmail.com</p>
                    <p class="text-gray-400 text-sm">+12 123 13123123213</p>
                </div>

                <!-- Links -->
                <div>
                    <h4 class="font-semibold text-base md:text-lg mb-4 md:mb-5 uppercase tracking-wide">Links</h4>
                    <ul class="space-y-2 md:space-y-3">
                        <li>
                            <a href="{{ route('buyer.index') }}" class="text-gray-400 hover:text-white transition-colors text-sm">
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">
                                Services
                            </a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">
                                About Us
                            </a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">
                                Shop
                            </a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors text-sm">
                                Contacts
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Get in Touch / Newsletter -->
                <div>
                    <h4 class="font-semibold text-base md:text-lg mb-4 md:mb-5 uppercase tracking-wide">Get in Touch</h4>
                    <div class="space-y-4">
                        <div class="flex gap-2">
                            <input type="email" placeholder="Enter Your Email Address"
                                class="flex-1 bg-gray-900 border border-gray-700 rounded px-4 py-2.5 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-gray-600 transition-colors" />
                            <button class="bg-gray-900 hover:bg-gray-800 border border-gray-700 rounded px-4 py-2.5 transition-colors flex-shrink-0" aria-label="Subscribe">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                                </svg>
                            </button>
                        </div>
                        <div class="flex items-start gap-2">
                            <input type="checkbox" id="privacy" class="mt-1 accent-black" />
                            <label for="privacy" class="text-gray-400 text-xs leading-relaxed">
                                I agree to the Privacy Policy
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Copyright -->
    <div class="bg-black border-t border-gray-800 py-6 md:py-8">
        <div class="buyer-container">
            <p class="text-gray-400 text-xs md:text-sm ">
                Vehicle Listing © {{ date('Y') }}. All rights reserved.
            </p>
        </div>
    </div>

    <!-- Bottom Promotional Section with Car -->
    <div class="relative bg-black overflow-hidden">
        <!-- Background text overlay -->
        <div class="absolute inset-x-0 top-1/2 -translate-y-1/1 flex justify-center w-full  z-0 opacity-20 pointer-events-none">
            <p class="text-6xl md:text-8xl lg:text-9xl font-bold text-white uppercase whitespace-nowrap">
                Lorem Ipsum is S
            </p>
        </div>

        <!-- Image content -->
        <div class="relative z-10">
            <div class="flex justify-center">
                <div class="w-full max-w-5xl">
                    @if (!request()->is('shop'))
                        <img src="{{ asset('assets/buyer/home/footer.png') }}" alt="Premium Vehicle" class="w-full h-auto object-contain" />
                    @endif
                </div>
            </div>
        </div>
    </div>

</footer>
