@php
    $settings = \App\Models\SiteSetting::pluck('value', 'key')->toArray();
    $phone = $settings['phone'] ?? '+977 1234567890';
    $email = $settings['email'] ?? 'info@drrajanshah.com';
    $address = $settings['address'] ?? "Everest Hospital Pvt. Ltd.,\nNew Baneshwor, Kathmandu, Nepal";
    $facebook = $settings['facebook_url'] ?? '';
    $instagram = $settings['instagram_url'] ?? '';
    $linkedin = $settings['linkedin_url'] ?? '';
    $tiktok = $settings['tiktok_url'] ?? '';
@endphp

<footer class="relative bg-slate-950 text-white pt-20 pb-10 border-t border-slate-800 overflow-hidden">
    <!-- Background Decor -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-24 -right-24 w-96 h-96 bg-teal-500/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-lg h-64 bg-emerald-500/5 rounded-t-full blur-3xl"></div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-12 lg:gap-8 mb-16">
            <!-- Brand Column -->
            <div class="md:col-span-12 lg:col-span-5 flex flex-col pr-0 lg:pr-12">
                <a href="{{ route('home') }}" class="inline-block mb-6">
                    <h3 class="text-3xl font-heading font-extrabold tracking-tight text-white flex items-center">
                        <span class="text-teal-400 mr-2">Dr.</span> Rajan Shah
                    </h3>
                    <p class="text-teal-300 text-sm font-medium tracking-widest uppercase mt-1">Gynecologist & IVF Specialist</p>
                </a>
                <p class="text-slate-400 text-sm leading-relaxed mb-8 max-w-md">
                    Pioneering Fertility Excellence in Nepal. Renowned gynecologist and IVF specialist dedicated to advanced reproductive techniques and laparoscopic surgery.
                </p>
                <div class="flex space-x-4">
                    <a href="{{ $facebook ?: '#' }}" target="_blank" class="w-10 h-10 rounded-full bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:bg-teal-500 hover:text-white hover:border-teal-500 transition-all duration-300 transform hover:-translate-y-1">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.469h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.469h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </a>
                    <a href="{{ $instagram ?: '#' }}" target="_blank" class="w-10 h-10 rounded-full bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:bg-teal-500 hover:text-white hover:border-teal-500 transition-all duration-300 transform hover:-translate-y-1">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                    </a>
                    <a href="{{ $tiktok ?: '#' }}" target="_blank" class="w-10 h-10 rounded-full bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:bg-teal-500 hover:text-white hover:border-teal-500 transition-all duration-300 transform hover:-translate-y-1">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93v7.2c0 1.63-.38 3.29-1.23 4.67-1.15 1.87-3.07 3.12-5.18 3.42-2.13.3-4.4-.1-6.17-1.22-1.78-1.12-3.08-2.9-3.48-4.94-.41-2.07.02-4.27 1.16-6.05 1.25-1.95 3.32-3.24 5.56-3.6 1.44-.22 2.92-.09 4.26.43V12.1c-1.07-.3-2.2-.3-3.26-.06-1.06.24-2.06.76-2.84 1.52-.78.75-1.34 1.72-1.57 2.77-.23 1.05-.14 2.16.27 3.14.41.97 1.11 1.8 1.98 2.3 1.12.65 2.51.78 3.74.4 1.24-.38 2.3-1.25 2.93-2.38.64-1.13.88-2.5.75-3.8v-16z"/></svg>
                    </a>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="md:col-span-6 lg:col-span-3 flex flex-col">
                <h3 class="text-lg font-heading font-bold text-white mb-6">Quick Links</h3>
                <ul class="flex flex-col space-y-3 text-sm text-slate-400">
                    <li><a href="{{ route('home') }}" class="hover:text-teal-400 transition-colors inline-flex items-center group"><span class="w-1.5 h-1.5 rounded-full bg-teal-500 mr-3 opacity-0 group-hover:opacity-100 transition-opacity"></span>Home</a></li>
                    <li><a href="{{ route('about') }}" class="hover:text-teal-400 transition-colors inline-flex items-center group"><span class="w-1.5 h-1.5 rounded-full bg-teal-500 mr-3 opacity-0 group-hover:opacity-100 transition-opacity"></span>About Dr. Rajan</a></li>
                    <li><a href="{{ route('services') }}" class="hover:text-teal-400 transition-colors inline-flex items-center group"><span class="w-1.5 h-1.5 rounded-full bg-teal-500 mr-3 opacity-0 group-hover:opacity-100 transition-opacity"></span>Services & Procedures</a></li>
                    <li><a href="{{ route('gallery') }}" class="hover:text-teal-400 transition-colors inline-flex items-center group"><span class="w-1.5 h-1.5 rounded-full bg-teal-500 mr-3 opacity-0 group-hover:opacity-100 transition-opacity"></span>Gallery</a></li>
                    <li><a href="{{ route('blogs.index') }}" class="hover:text-teal-400 transition-colors inline-flex items-center group"><span class="w-1.5 h-1.5 rounded-full bg-teal-500 mr-3 opacity-0 group-hover:opacity-100 transition-opacity"></span>Blog</a></li>
                    <li><a href="{{ route('contact') }}" class="hover:text-teal-400 transition-colors inline-flex items-center group"><span class="w-1.5 h-1.5 rounded-full bg-teal-500 mr-3 opacity-0 group-hover:opacity-100 transition-opacity"></span>Contact</a></li>
                </ul>
            </div>

            <!-- Contact Info -->
            <div class="md:col-span-6 lg:col-span-4 flex flex-col">
                <h3 class="text-lg font-heading font-bold text-white mb-6">Get In Touch</h3>
                <ul class="flex flex-col space-y-5 text-sm text-slate-400">
                    <li class="flex items-start group">
                        <div class="mt-1 mr-4 flex-shrink-0 text-teal-400 group-hover:text-teal-300 transition-colors">
                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <span class="leading-relaxed group-hover:text-slate-200 transition-colors">{!! nl2br(e($address)) !!}</span>
                    </li>
                    <li class="flex items-center group">
                        <div class="mr-4 flex-shrink-0 text-teal-400 group-hover:text-teal-300 transition-colors">
                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                        </div>
                        <a href="tel:{{ preg_replace('/[^0-9+]/', '', $phone) }}" class="font-medium group-hover:text-teal-400 transition-colors tracking-wide">{{ $phone }}</a>
                    </li>
                    <li class="flex items-center group">
                        <div class="mr-4 flex-shrink-0 text-teal-400 group-hover:text-teal-300 transition-colors">
                            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <a href="mailto:{{ $email }}" class="font-medium group-hover:text-teal-400 transition-colors tracking-wide">{{ $email }}</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="border-t border-slate-800/80 pt-8 flex flex-col md:flex-row items-center justify-between text-sm text-slate-500">
            <p>&copy; {{ date('Y') }} Dr. Rajan Shah. All rights reserved.</p>
            <div class="mt-4 md:mt-0 flex space-x-6">
                <a href="#" class="hover:text-teal-400 transition-colors">Privacy Policy</a>
                <a href="#" class="hover:text-teal-400 transition-colors">Terms of Service</a>
            </div>
        </div>
    </div>
</footer>
