{{-- Footer Component --}}
<footer class="relative bg-dark-brown bengali-pattern">
    <!-- Top gradient separator -->
    <div class="h-px bg-gradient-to-r from-transparent via-gold to-transparent opacity-40"></div>

    <!-- Newsletter Banner -->
    <div class="bg-deep-green/80 py-12 px-4">
        <div class="max-w-3xl mx-auto text-center">
            <p class="text-gold text-sm font-poppins tracking-widest uppercase mb-2" data-aos="fade-up">Stay Connected</p>
            <h3 class="font-playfair text-3xl text-cream mb-4" data-aos="fade-up" data-aos-delay="100">
                Subscribe for Exclusive Offers
            </h3>
            <p class="text-cream/60 text-sm mb-6" data-aos="fade-up" data-aos-delay="200">
                Get the latest news, special offers, and festive promotions directly to your inbox.
            </p>
            <form action="{{ route('newsletter.subscribe') }}" method="POST" class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto" data-aos="fade-up" data-aos-delay="300">
                @csrf
                <input type="email" name="email" placeholder="Your email address"
                       required
                       class="flex-1 bg-deep-green/60 border border-gold/30 text-cream placeholder-cream/40 rounded-full px-5 py-3 text-sm focus:outline-none focus:border-gold transition-colors">
                <button type="submit" class="btn-gold text-sm px-8 py-3 whitespace-nowrap">
                    Subscribe <i class="fas fa-paper-plane ml-1.5"></i>
                </button>
            </form>
        </div>
    </div>

    <!-- Main Footer -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">

            <!-- Brand Column -->
            <div class="lg:col-span-1">
                <div class="flex items-center gap-3 mb-5">
                    @if(isset($settings['logo_light']))
                        <img src="{{ asset('storage/' . $settings['logo_light']) }}" alt="{{ $settings['app_name'] ?? 'Shalik' }}" class="h-14 w-auto">
                    @else
                        <div class="w-14 h-14 rounded-full bg-gradient-to-br from-gold to-burnt-orange flex items-center justify-center shadow-lg">
                            <span class="text-white font-playfair font-bold text-2xl">{{ mb_substr($settings['app_name'] ?? 'Shalik', 0, 1) }}</span>
                        </div>
                        <div>
                            <div class="font-playfair text-cream text-2xl font-bold">{{ $settings['app_name'] ?? 'Shalik' }}</div>
                            <div class="text-gold text-xs tracking-widest uppercase">{{ $settings['app_tagline'] ?? 'Restaurant' }}</div>
                        </div>
                    @endif
                </div>
                <p class="text-cream/60 text-sm leading-relaxed mb-6">
                    {{ $settings['footer_about'] ?? 'A celebration of authentic Bengali culinary heritage, served with love and modern luxury. Experience the taste of tradition at every visit.' }}
                </p>
                <p class="text-gold font-bangla text-lg mb-4">শালিক রেস্তোরাঁ — ঐতিহ্যের স্বাদ</p>
                <div class="flex gap-4">
                    <a href="#" class="w-9 h-9 rounded-full bg-deep-green/80 border border-gold/30 flex items-center justify-center text-gold hover:bg-gold hover:text-dark-brown transition-all">
                        <i class="fab fa-facebook-f text-sm"></i>
                    </a>
                    <a href="{{ $settings['instagram_url'] ?? '#' }}" class="w-9 h-9 rounded-full bg-deep-green/80 border border-gold/30 flex items-center justify-center text-gold hover:bg-gold hover:text-dark-brown transition-all">
                        <i class="fab fa-instagram text-sm"></i>
                    </a>
                    <a href="{{ $settings['youtube_url'] ?? '#' }}" class="w-9 h-9 rounded-full bg-deep-green/80 border border-gold/30 flex items-center justify-center text-gold hover:bg-gold hover:text-dark-brown transition-all">
                        <i class="fab fa-youtube text-sm"></i>
                    </a>
                    <a href="https://wa.me/{{ $settings['whatsapp_number'] ?? '' }}"
                       class="w-9 h-9 rounded-full bg-deep-green/80 border border-gold/30 flex items-center justify-center text-gold hover:bg-green-500 hover:text-white transition-all">
                        <i class="fab fa-whatsapp text-sm"></i>
                    </a>
                </div>
            </div>

            <!-- Quick Links -->
            <div>
                <h4 class="font-playfair text-cream text-lg font-semibold mb-6 relative">
                    Quick Links
                    <span class="absolute -bottom-2 left-0 w-10 h-0.5 bg-gold rounded-full"></span>
                </h4>
                <ul class="space-y-3">
                    @foreach([
                        ['About Us', 'about'],
                        ['Our Menu', 'menu.index'],
                        ['Gallery', 'gallery.index'],
                        ['Events & Offers', 'offers.index'],
                        ['Blog', 'blog.index'],
                        ['Branches', 'branches.index'],
                        ['Career', 'career.index'],
                        ['Contact', 'contact.index'],
                    ] as [$label, $route])
                        <li>
                            <a href="{{ route($route) }}" class="text-cream/60 hover:text-gold text-sm flex items-center gap-2 transition-colors group">
                                <span class="w-1 h-1 rounded-full bg-gold/50 group-hover:bg-gold transition-colors"></span>
                                {{ $label }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            <!-- Contact Info -->
            <div>
                <h4 class="font-playfair text-cream text-lg font-semibold mb-6 relative">
                    Contact Us
                    <span class="absolute -bottom-2 left-0 w-10 h-0.5 bg-gold rounded-full"></span>
                </h4>
                <ul class="space-y-4">
                    <li class="flex items-start gap-3">
                        <i class="fas fa-map-marker-alt text-gold mt-1 text-sm"></i>
                        <span class="text-cream/60 text-sm leading-relaxed">{{ $settings['contact_address'] ?? '123 Gulshan Avenue, Dhaka 1212, Bangladesh' }}</span>
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fas fa-phone text-gold text-sm"></i>
                        <a href="tel:{{ $settings['contact_phone'] ?? '' }}" class="text-cream/60 hover:text-gold text-sm transition-colors">{{ $settings['contact_phone'] ?? '+880 17-0000-0001' }}</a>
                    </li>
                    <li class="flex items-center gap-3">
                        <i class="fas fa-envelope text-gold text-sm"></i>
                        <a href="mailto:{{ $settings['contact_email'] ?? '' }}" class="text-cream/60 hover:text-gold text-sm transition-colors">{{ $settings['contact_email'] ?? 'info@shalikrestaurant.com' }}</a>
                    </li>
                    <li class="flex items-start gap-3">
                        <i class="fas fa-clock text-gold mt-1 text-sm"></i>
                        <div class="text-cream/60 text-sm">
                            @if(($settings['is_24_hours'] ?? '0') == '1')
                                <div class="font-bold text-gold">Open 24 Hours / 7 Days</div>
                            @else
                                <div>{{ $settings['opening_hours_weekdays'] ?? 'Mon – Fri: 11:00 AM – 10:30 PM' }}</div>
                                <div>{{ $settings['opening_hours_weekends'] ?? 'Sat – Sun: 10:00 AM – 11:00 PM' }}</div>
                            @endif
                        </div>
                    </li>
                </ul>
            </div>

            <!-- Legal -->
            <div>
                <h4 class="font-playfair text-cream text-lg font-semibold mb-6 relative">
                    Legal & Info
                    <span class="absolute -bottom-2 left-0 w-10 h-0.5 bg-gold rounded-full"></span>
                </h4>
                <ul class="space-y-3">
                    <li><a href="{{ route('privacy') }}" class="text-cream/60 hover:text-gold text-sm flex items-center gap-2 transition-colors group"><span class="w-1 h-1 rounded-full bg-gold/50 group-hover:bg-gold"></span>Privacy Policy</a></li>
                    <li><a href="{{ route('terms') }}" class="text-cream/60 hover:text-gold text-sm flex items-center gap-2 transition-colors group"><span class="w-1 h-1 rounded-full bg-gold/50 group-hover:bg-gold"></span>Terms & Conditions</a></li>
                    <li><a href="{{ route('faq') }}" class="text-cream/60 hover:text-gold text-sm flex items-center gap-2 transition-colors group"><span class="w-1 h-1 rounded-full bg-gold/50 group-hover:bg-gold"></span>FAQ</a></li>
                    <li><a href="{{ route('reservation.index') }}" class="text-cream/60 hover:text-gold text-sm flex items-center gap-2 transition-colors group"><span class="w-1 h-1 rounded-full bg-gold/50 group-hover:bg-gold"></span>Book a Table</a></li>
                    <li><a href="{{ route('career.index') }}" class="text-cream/60 hover:text-gold text-sm flex items-center gap-2 transition-colors group"><span class="w-1 h-1 rounded-full bg-gold/50 group-hover:bg-gold"></span>Careers</a></li>
                    <li><a href="{{ route('sitemap') }}" class="text-cream/60 hover:text-gold text-sm flex items-center gap-2 transition-colors group"><span class="w-1 h-1 rounded-full bg-gold/50 group-hover:bg-gold"></span>Sitemap</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Bottom Bar -->
    <div class="border-t border-gold/15 py-6 px-4">
        <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-3">
            <p class="text-cream/40 text-xs text-center">
                &copy; {{ date('Y') }} {{ $settings['app_name'] ?? 'Shalik Restaurant' }}. {{ $settings['footer_copyright'] ?? 'All rights reserved.' }}
            </p>
            <p class="text-cream/40 text-xs">
                Powered by <span class="text-gold">{!! $settings['footer_powered_by'] ?? 'Shalik Tech' !!}</span>
            </p>
        </div>
    </div>
</footer>

@if(session('success'))
    <div x-data="{ show: true }" x-show="show"
         x-init="setTimeout(() => show = false, 4000)"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-4"
         class="fixed bottom-28 left-1/2 -translate-x-1/2 z-50 glass-card border border-green-500/40 text-green-400 text-sm font-medium px-6 py-3 shadow-2xl flex items-center gap-2">
        <i class="fas fa-check-circle"></i>
        {{ session('success') }}
    </div>
@endif