@props([
    'organization' => null,
])

@php
    // Prepare organization data with fallbacks
    $orgName = $organization?->name ?? 'SSHIA';
    $orgAddress = $organization?->physical_address ?? 'Juba, South Sudan';
    $orgEmail = $organization?->email ?? 'info@sshia.org';
    $orgHotline = $organization?->hotline ?? '';
    $socialLinks = is_array($organization?->social_media_links) ? $organization->social_media_links : [];
@endphp

<footer class="bg-gray-900 text-white" role="contentinfo">
    {{-- Main Footer Section - 5 Columns --}}
    <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
            
            {{-- Column 1: About SSHIA --}}
            <nav aria-labelledby="footer-about">
                <h3 id="footer-about" class="text-sm font-bold text-white uppercase tracking-wide mb-4">About SSHIA</h3>
                <ul class="space-y-2">
                    <li><a href="{{ route('pages.show', 'about-us') }}" class="text-sm text-gray-300 hover:text-white transition focus:outline-none focus:underline">About Us</a></li>
                    <li><a href="{{ route('pages.show', 'vision-mission') }}" class="text-sm text-gray-300 hover:text-white transition focus:outline-none focus:underline">Vision & Mission</a></li>
                    <li><a href="{{ route('pages.show', 'what-we-do') }}" class="text-sm text-gray-300 hover:text-white transition focus:outline-none focus:underline">What We Do</a></li>
                    <li><a href="{{ route('pages.show', 'governance') }}" class="text-sm text-gray-300 hover:text-white transition focus:outline-none focus:underline">Governance</a></li>
                    @auth
                    <li><a href="{{ route('organization.organogram.show') }}" class="text-sm text-gray-300 hover:text-white transition focus:outline-none focus:underline">Leadership</a></li>
                    @endauth
                    <li><a href="{{ route('pages.show', 'contact-us') }}" class="text-sm text-gray-300 hover:text-white transition focus:outline-none focus:underline">Contact Us</a></li>
                </ul>
            </nav>
            
            {{-- Column 2: Membership & Services --}}
            <div>
                <h3 class="text-sm font-bold text-white uppercase tracking-wide mb-4">Membership & Services</h3>
                <ul class="space-y-2">
                    <li><a href="{{ route('membership.categories.index') }}" class="text-sm text-gray-300 hover:text-white transition">Membership Categories</a></li>
                    <li><a href="{{ route('register.role.member') }}" class="text-sm text-gray-300 hover:text-white transition">Apply for Membership</a></li>
                    <li><a href="{{ route('membership.check-status') }}" class="text-sm text-gray-300 hover:text-white transition">Check Status</a></li>
                    <li><a href="{{ route('register.role.contributor') }}" class="text-sm text-gray-300 hover:text-white transition">Become Contributor</a></li>
                    <li><a href="{{ route('institutions.index') }}" class="text-sm text-gray-300 hover:text-white transition">Health Institutions</a></li>
                    <li><a href="{{ route('machines.index') }}" class="text-sm text-gray-300 hover:text-white transition">Digital Machines</a></li>
                    <li><a href="{{ route('partners.public.index') }}" class="text-sm text-gray-300 hover:text-white transition">Partners Directory</a></li>
                </ul>
            </div>
            
            {{-- Column 3: Training & Mentorship --}}
            <div>
                <h3 class="text-sm font-bold text-white uppercase tracking-wide mb-4">Training & Mentorship</h3>
                <ul class="space-y-2">
                    <li><a href="{{ route('public.training.index') }}" class="text-sm text-gray-300 hover:text-white transition">Training Programmes</a></li>
                    <li><a href="{{ route('register.role.trainee') }}" class="text-sm text-gray-300 hover:text-white transition">Apply for Training</a></li>
                    <li><a href="{{ route('public.training.certificates.verify-page') }}" class="text-sm text-gray-300 hover:text-white transition">Verify Training Certificate</a></li>
                    <li><a href="{{ route('mentorship.public.index') }}" class="text-sm text-gray-300 hover:text-white transition">Mentorship Programmes</a></li>
                    <li><a href="{{ route('register.role.mentor') }}" class="text-sm text-gray-300 hover:text-white transition">Become Mentor</a></li>
                    <li><a href="{{ route('register.role.mentee') }}" class="text-sm text-gray-300 hover:text-white transition">Become Mentee</a></li>
                    <li><a href="{{ route('mentorship.certificates.verify-page') }}" class="text-sm text-gray-300 hover:text-white transition">Verify Mentorship Certificate</a></li>
                </ul>
            </div>
            
            {{-- Column 4: Research & Advocacy --}}
            <div>
                <h3 class="text-sm font-bold text-white uppercase tracking-wide mb-4">Research & Advocacy</h3>
                <ul class="space-y-2">
                    <li><a href="{{ route('research.public.index') }}" class="text-sm text-gray-300 hover:text-white transition">Publications</a></li>
                    <li><a href="{{ route('research.public.featured') }}" class="text-sm text-gray-300 hover:text-white transition">Featured Research</a></li>
                    <li><a href="{{ route('research.public.submit') }}" class="text-sm text-gray-300 hover:text-white transition">Submit Publication</a></li>
                    <li><a href="{{ route('public.knowledge-base.index') }}" class="text-sm text-gray-300 hover:text-white transition">Knowledge Base</a></li>
                    <li><a href="{{ route('public.discussions.index') }}" class="text-sm text-gray-300 hover:text-white transition">Discussions</a></li>
                    <li><a href="{{ route('advocacy.public.index') }}" class="text-sm text-gray-300 hover:text-white transition">Advocacy Campaigns</a></li>
                    <li><a href="{{ route('advocacy.public.stories.index') }}" class="text-sm text-gray-300 hover:text-white transition">Health Stories</a></li>
                    <li><a href="{{ route('advocacy.public.polls.active') }}" class="text-sm text-gray-300 hover:text-white transition">Polls &amp; Surveys</a></li>
                    <li><a href="{{ route('advocacy.public.stories.create') }}" class="text-sm text-gray-300 hover:text-white transition">Submit Your Story</a></li>
                </ul>
            </div>
            
            {{-- Column 5: Legal & Support --}}
            <div>
                <h3 class="text-sm font-bold text-white uppercase tracking-wide mb-4">Legal & Support</h3>
                <ul class="space-y-2">
                    <li><a href="{{ route('pages.privacy') }}" class="text-sm text-gray-300 hover:text-white transition">Privacy Policy</a></li>
                    <li><a href="{{ route('pages.terms') }}" class="text-sm text-gray-300 hover:text-white transition">Terms of Service</a></li>
                    <li><a href="{{ route('pages.support') }}" class="text-sm text-gray-300 hover:text-white transition">Support</a></li>
                    <li><a href="{{ route('self-paced.public.verify') }}" class="text-sm text-gray-300 hover:text-white transition">Verify Certificate</a></li>
                    <li><a href="{{ route('self-paced.public.index') }}" class="text-sm text-gray-300 hover:text-white transition">SSHIA Academy</a></li>
                </ul>
            </div>
        </div>
    </div>
    
    {{-- Contact Information Section --}}
    <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 pb-14">
        <div class="flex flex-wrap items-center justify-center gap-6 lg:gap-8">
            
            {{-- Address Card --}}
            <div class="flex items-center gap-3 bg-gray-800/50 px-4 py-3 rounded-lg hover:bg-gray-800 transition">
                <i class="fas fa-map-marker-alt text-green-400 text-lg flex-shrink-0"></i>
                <span class="text-sm text-gray-300">{{ $orgAddress }}</span>
            </div>
            
            {{-- Email Card --}}
            <a href="mailto:{{ $orgEmail }}" class="flex items-center gap-3 bg-gray-800/50 px-4 py-3 rounded-lg hover:bg-gray-800 transition group">
                <i class="fas fa-envelope text-green-400 text-lg flex-shrink-0"></i>
                <span class="text-sm text-gray-300 group-hover:text-white transition">{{ $orgEmail }}</span>
            </a>
            
            {{-- Phone Card --}}
            @if($orgHotline)
                <a href="tel:{{ $orgHotline }}" class="flex items-center gap-3 bg-gray-800/50 px-4 py-3 rounded-lg hover:bg-gray-800 transition group">
                    <i class="fas fa-phone text-green-400 text-lg flex-shrink-0"></i>
                    <span class="text-sm text-gray-300 group-hover:text-white transition">{{ $orgHotline }}</span>
                </a>
            @endif
            
            {{-- Social Media Icons Card --}}
            @if(!empty($socialLinks))
                <div class="flex items-center gap-3 bg-gray-800/50 px-4 py-3 rounded-lg">
                    @foreach($socialLinks as $platform => $url)
                        @if($url)
                            <a href="{{ $url }}" 
                               target="_blank" 
                               rel="noopener noreferrer"
                               class="w-9 h-9 rounded-full flex items-center justify-center transition hover:scale-110
                                      @if($platform === 'whatsapp') bg-[#25D366] hover:bg-[#1da851]
                                      @elseif($platform === 'facebook') bg-[#1877F2] hover:bg-[#0c63d4]
                                      @elseif($platform === 'twitter' || $platform === 'x') bg-white hover:bg-gray-200 text-gray-900
                                      @elseif($platform === 'tiktok') bg-[#ff0050] hover:bg-[#d60043]
                                      @elseif($platform === 'linkedin') bg-[#0A66C2] hover:bg-[#004182]
                                      @elseif($platform === 'instagram') bg-[#E4405F] hover:bg-[#c13584]
                                      @elseif($platform === 'youtube') bg-[#FF0000] hover:bg-[#cc0000]
                                      @else bg-gray-700 hover:bg-gray-600
                                      @endif text-white"
                               title="{{ ucfirst($platform) }}">
                                <i class="fab fa-{{ $platform === 'x' ? 'x-twitter' : $platform }}"></i>
                            </a>
                        @endif
                    @endforeach
                </div>
            @endif
        </div>
    </div>
    
    {{-- Bottom Bar --}}
    <div class="border-t border-gray-800">
        <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex flex-col md:flex-row items-center justify-between gap-4">
                {{-- Logo + Copyright --}}
                <div class="flex items-center gap-3">
                    @if(file_exists(public_path('storage/organization/logo.png')))
                        <img src="{{ asset('storage/organization/logo.png') }}" 
                             alt="{{ $orgName }}" 
                             class="h-10 w-auto opacity-80">
                    @else
                        <div class="h-10 w-10 bg-green-600 rounded-lg flex items-center justify-center opacity-80">
                            <span class="text-white font-bold text-lg">{{ substr($orgName, 0, 1) }}</span>
                        </div>
                    @endif
                    <span class="text-sm text-gray-500">
                        &copy; {{ date('Y') }} {{ $orgName }}. All rights reserved.
                    </span>
                </div>
                
                {{-- Legal Links --}}
                <div class="flex items-center gap-4 text-sm text-gray-500">
                    <a href="{{ route('pages.privacy') }}" class="hover:text-white transition">Privacy Policy</a>
                    <span>|</span>
                    <a href="{{ route('pages.terms') }}" class="hover:text-white transition">Terms of Service</a>
                </div>
            </div>
        </div>
    </div>
</footer>
