{{-- resources/views/livewire/footer.php --}}
<div>
    <footer class="bg-gray-900">
        <div class="mx-auto w-full max-w-screen-xl">
            <div class="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
                <!-- Company Info -->
                <div>
                    <h2 class="mb-6 text-sm font-semibold text-white uppercase">Rendra'sCatering</h2>
                    <ul class="text-gray-400 font-medium">
                        <li class="mb-4">
                            <p class="text-sm">Menyajikan hidangan lezat untuk setiap momen spesial Anda dengan cita rasa terbaik dan pelayanan prima.</p>
                        </li>
                        <li class="mb-4">
                            <div class="flex items-center">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="text-sm">Jl. Hj Dogon G3 no.2, Jakarta</span>
                            </div>
                        </li>
                        <li class="mb-4">
                            <div class="flex items-center">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path>
                                </svg>
                                <span class="text-sm">+62 821-1135-8308</span>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- Services -->
                <div>
                    <h2 class="mb-6 text-sm font-semibold text-white uppercase">Email</h2>
                    <p class="mb-6 text-gray-400 text-sm">rendracatering@gmail.com</p></h2>
                    <h2 class="mb-6 text-sm font-semibold text-white uppercase">Instagram</h2>
                    <p class="text-gray-400 text-sm">RendraCatering</p>
                </div>
                <div>
                    <h2 class="mb-6 text-sm font-semibold text-white uppercase">Jam Operasional</h2>
                    <p class="text-gray-400 text-sm">Senin - Jumat: 06:00 - 22:00</p>
                    <p class="text-gray-400 text-sm">Sabtu - Minggu: 07:00 - 23:00</p>
                </div>
                <div>
                    <h2 class="mb-6 text-sm font-semibold text-white uppercase">Layanan</h2>
                    <p class="text-gray-400 text-sm">Menerima Harian</p>
                    <p class="text-gray-400 text-sm">Menerima Event</p>
                    <p class="text-gray-400 text-sm">Menerima Pernikahan</p>
                </div>
                </div>


            <!-- Newsletter Subscription -->
            
                <div class="flex flex-col sm:flex-row gap-2">
                </div>
            </div>

            <!-- Social Media & Copyright -->
            <div class="px-4 py-6 bg-gray-800 md:flex md:items-center md:justify-between border-t border-gray-700">
                <span class="text-sm text-gray-400 sm:text-center">
                    © 2024 <a href="#" class="hover:text-white">Rendra'sCatering</a>. All Rights Reserved.
                </span>
                <div class="flex mt-4 space-x-5 sm:justify-center md:mt-0">
                    <!-- WhatsApp -->
                    <a href="https://wa.me/6282111358308" class="text-gray-400 hover:text-white transition-colors duration-200">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>
</div>