<footer class="bg-slate-800 border-t border-gray-200">
    <div class="default-site-margin py-8">
        <!-- Main Footer Content -->
        <div class="flex flex-col md:flex-row gap-8">
            <!-- Company Info -->
            <div class="md:w-1/3">
                <div class="flex items-center gap-3 mb-4">
                    <img src="{{ asset('images/imake_logo.jpeg') }}" alt="Logo" class="w-8 h-8 rounded">
                    <span class="text-lg font-bold text-white">{{ config('app.name') }}</span>
                </div>
                <p class="text-gray-400">Your trusted partner for mobile data bundles.</p>
            </div>

            <!-- Links -->
            <div class="md:w-1/3">
                <h4 class="text-white font-semibold mb-3">Quick Links</h4>
                <ul class="space-y-2">
                    <li><a href="/" class="text-gray-400 hover:text-white">Home</a></li>
                    <li><a href="/features" class="text-gray-400 hover:text-white">Features</a></li>
                    <li><a href="/contact" class="text-gray-400 hover:text-white">Contact</a></li>
                </ul>
            </div>

            <!-- Contact -->
            <div class="md:w-1/3">
                <h4 class="text-white font-semibold mb-3">Contact</h4>
                <ul class="space-y-2">
                    <li class="text-gray-400">support@example.com</li>
                    <li class="text-gray-400">+233 123 456 789</li>
                </ul>
            </div>
        </div>

        <!-- Copyright -->
        <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400">
            <p>&copy; {{ date('Y') }} {{ config('app.name') }}. All rights reserved.</p>
        </div>
    </div>
</footer>
