@php
    $org = $organization ?? \App\Models\Organization::first();
@endphp

<!-- Footer -->
<footer class="relative bg-gradient-to-b from-primary-800 to-primary-900 text-white overflow-hidden">
    <!-- Decorative wave -->
    <div class="absolute top-0 left-0 w-full overflow-hidden leading-none">
        <svg class="relative block w-full h-12" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="white" opacity=".9"></path>
        </svg>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
            <!-- Brand Column -->
            <div class="lg:col-span-1">
                <div class="flex items-center space-x-3 mb-5">
                    <div class="w-12 h-12 bg-gradient-to-br from-primary-400 to-accent-500 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="text-white font-bold text-xl font-display">A</span>
                    </div>
                    <div>
                        <div class="font-bold text-lg leading-tight">Angaza Mediation</div>
                        <div class="text-primary-300 text-sm">Centre</div>
                    </div>
                </div>
                <p class="text-primary-200 text-sm leading-relaxed mb-4">
                    Accredited by TVET and recognized by MAC to offer professional mediation training aligned with global standards.
                </p>
                @if($org && $org->social_media_links)
                    <div class="flex space-x-3">
                        @foreach($org->social_media_links as $platform => $url)
                            @if($url)
                                <a href="{{ $url }}" target="_blank" rel="noopener noreferrer"
                                   class="w-9 h-9 bg-primary-700/50 hover:bg-gradient-to-r hover:from-primary-500 hover:to-accent-500 rounded-lg flex items-center justify-center transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                                    @if($platform === 'facebook')<i class="fab fa-facebook-f text-sm"></i>
                                    @elseif($platform === 'twitter')<i class="fab fa-x-twitter text-sm"></i>
                                    @elseif($platform === 'linkedin')<i class="fab fa-linkedin-in text-sm"></i>
                                    @elseif($platform === 'youtube')<i class="fab fa-youtube text-sm"></i>
                                    @elseif($platform === 'instagram')<i class="fab fa-instagram text-sm"></i>
                                    @else<i class="fas fa-globe text-sm"></i>
                                    @endif
                                </a>
                            @endif
                        @endforeach
                    </div>
                @endif
            </div>

            <!-- Quick Links -->
            <div>
                <h4 class="font-semibold text-base mb-4 flex items-center space-x-2">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-400 to-accent-500 rounded-full"></div>
                    <span>Quick Links</span>
                </h4>
                <ul class="space-y-2.5">
                    <li><a href="#home" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Home</span></a></li>
                    <li><a href="#about" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>About Us</span></a></li>
                    <li><a href="#programs" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Programs</span></a></li>
                    <li><a href="#experts" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Our Experts</span></a></li>
                    <li><a href="#benefits" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Benefits</span></a></li>
                    <li><a href="#gallery" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Gallery</span></a></li>
                    <li><a href="#assessment" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Assessment</span></a></li>
                </ul>
            </div>

            <!-- Useful Links -->
            <div>
                <h4 class="font-semibold text-base mb-4 flex items-center space-x-2">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-400 to-accent-500 rounded-full"></div>
                    <span>Useful Links</span>
                </h4>
                <ul class="space-y-2.5">
                    <li><a href="{{ url('/login') }}" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Login</span></a></li>
                    <li><a href="{{ url('/register/trainee') }}" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Trainee Registration</span></a></li>
                    <li><a href="{{ url('/self-paced/verify') }}" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Verify Certificate</span></a></li>
                    <li><a href="https://www.tveta.go.ke/institution-details/?details=TVETA/PRIVATE/TVC/0064/2023" target="_blank" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>TVET Accreditation</span></a></li>
                    <li><a href="https://judiciary.go.ke/list-of-accredited-mediators/" target="_blank" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>MAC Accreditation</span></a></li>
                    <li><a href="https://www.angazainstitute.ac.ke/accreditation-and-affiliation/" target="_blank" class="text-primary-200 hover:text-white text-sm transition-colors duration-200 flex items-center space-x-2"><i class="fas fa-chevron-right text-xs text-primary-400"></i><span>Global Affiliations</span></a></li>
                </ul>
            </div>

            <!-- Contact Info -->
            <div>
                <h4 class="font-semibold text-base mb-4 flex items-center space-x-2">
                    <div class="w-1 h-5 bg-gradient-to-b from-primary-400 to-accent-500 rounded-full"></div>
                    <span>Contact Us</span>
                </h4>
                <ul class="space-y-3">
                    @if($org && $org->postal_address)
                        <li class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-primary-700/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-map-marker-alt text-sm text-primary-300"></i>
                            </div>
                            <span class="text-primary-200 text-sm">{{ $org->postal_address }}, {{ $org->city ?? '' }}</span>
                        </li>
                    @endif
                    @if($org && $org->hotline)
                        <li class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-primary-700/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-phone text-sm text-primary-300"></i>
                            </div>
                            <a href="tel:{{ $org->hotline }}" class="text-primary-200 hover:text-white text-sm transition-colors duration-200">{{ $org->hotline }}</a>
                        </li>
                    @endif
                    @if($org && $org->email)
                        <li class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-primary-700/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-envelope text-sm text-primary-300"></i>
                            </div>
                            <a href="mailto:{{ $org->email }}" class="text-primary-200 hover:text-white text-sm transition-colors duration-200">{{ $org->email }}</a>
                        </li>
                    @endif
                </ul>
            </div>
        </div>

        <!-- Bottom Bar -->
        <div class="mt-12 pt-6 border-t border-primary-700/50">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
                <p class="text-primary-300 text-xs">
                    &copy; {{ date('Y') }} {{ $org->name ?? 'Angaza Mediation Centre' }}. All rights reserved.
                </p>
                <div class="flex items-center space-x-4 text-xs text-primary-300">
                    <a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a>
                    <span>|</span>
                    <a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Back to Top -->
<div
    x-data="{ showTop: false }"
    x-init="window.addEventListener('scroll', () => { showTop = window.scrollY > 400 })"
    class="fixed bottom-6 right-6 z-50"
>
    <button
        x-show="showTop"
        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-200"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-4"
        @click="window.scrollTo({ top: 0, behavior: 'smooth' })"
        class="w-12 h-12 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-full shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex items-center justify-center"
    >
        <i class="fas fa-arrow-up"></i>
    </button>
</div>
