@php
    $org = $organization ?? \App\Models\Organization::first();
    $menuItems = [
        ['id' => 'home', 'label' => 'Home', 'icon' => 'fa-home'],
        ['id' => 'about', 'label' => 'About', 'icon' => 'fa-info-circle'],
        ['id' => 'programs', 'label' => 'Programs', 'icon' => 'fa-book-open'],
        ['id' => 'experts', 'label' => 'Experts', 'icon' => 'fa-user-tie'],
        ['id' => 'benefits', 'label' => 'Benefits', 'icon' => 'fa-award'],
        ['id' => 'gallery', 'label' => 'Gallery', 'icon' => 'fa-images'],
        ['id' => 'assessment', 'label' => 'Assessment', 'icon' => 'fa-clipboard-check'],
        ['id' => 'contact', 'label' => 'Contact', 'icon' => 'fa-envelope'],
    ];
@endphp

<!-- Top Bar -->
<div class="bg-primary-700 text-white text-sm hidden md:block">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-2">
            <div class="flex items-center space-x-6">
                @if($org && $org->email)
                    <a href="mailto:{{ $org->email }}" class="flex items-center space-x-2 hover:text-primary-200 transition-colors duration-200">
                        <i class="fas fa-envelope text-xs"></i>
                        <span>{{ $org->email }}</span>
                    </a>
                @endif
                @if($org && $org->hotline)
                    <a href="tel:{{ $org->hotline }}" class="flex items-center space-x-2 hover:text-primary-200 transition-colors duration-200">
                        <i class="fas fa-phone text-xs"></i>
                        <span>{{ $org->hotline }}</span>
                    </a>
                @endif
            </div>
            <div class="flex items-center space-x-4">
                @if($org && $org->social_media_links)
                    @foreach($org->social_media_links as $platform => $url)
                        @if($url)
                            <a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="hover:text-primary-200 transition-colors duration-200">
                                @if($platform === 'facebook')<i class="fab fa-facebook-f"></i>
                                @elseif($platform === 'twitter')<i class="fab fa-x-twitter"></i>
                                @elseif($platform === 'linkedin')<i class="fab fa-linkedin-in"></i>
                                @elseif($platform === 'youtube')<i class="fab fa-youtube"></i>
                                @elseif($platform === 'instagram')<i class="fab fa-instagram"></i>
                                @elseif($platform === 'tiktok')<i class="fab fa-tiktok"></i>
                                @else<i class="fas fa-globe"></i>
                                @endif
                            </a>
                        @endif
                    @endforeach
                @endif
                <span class="text-primary-300">|</span>
                <a href="{{ url('/login') }}" class="hover:text-primary-200 transition-colors duration-200 flex items-center space-x-1">
                    <i class="fas fa-sign-in-alt text-xs"></i>
                    <span>Login</span>
                </a>
                <a href="{{ url('/register/trainee') }}" class="bg-accent-500 hover:bg-accent-600 text-white px-4 py-1 rounded-full text-xs font-semibold transition-all duration-200 hover:shadow-lg">
                    Register
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Main Header / Navigation -->
<header
    x-data="{ scrolled: false, mobileOpen: false, activeSection: 'home' }"
    x-init="
        window.addEventListener('scroll', () => { scrolled = window.scrollY > 50 });
        const sections = document.querySelectorAll('section[id]');
        const observerNav = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    activeSection = entry.target.id;
                }
            });
        }, { threshold: 0.3, rootMargin: '-80px 0px 0px 0px' });
        sections.forEach(s => observerNav.observe(s));
    "
    class="sticky top-0 z-50 transition-all duration-300"
    :class="scrolled ? 'bg-white/95 header-glass shadow-lg shadow-primary-500/5' : 'bg-white shadow-sm'"
>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16 lg:h-20">
            <!-- Logo -->
            <a href="#home" class="flex items-center space-x-3 group">
                <div class="w-10 h-10 lg:w-12 lg:h-12 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-shadow duration-300">
                    <span class="text-white font-bold text-lg lg:text-xl font-display">A</span>
                </div>
                <div class="hidden sm:block">
                    <div class="font-bold text-primary-700 text-sm lg:text-base leading-tight tracking-tight">Angaza Mediation</div>
                    <div class="text-xs text-gray-500 leading-tight">Centre</div>
                </div>
            </a>

            <!-- Desktop Navigation -->
            <nav class="hidden lg:flex items-center space-x-1">
                @foreach($menuItems as $item)
                    <a href="#{{ $item['id'] }}"
                       class="relative px-3 py-2 text-sm font-medium transition-all duration-200 rounded-lg group"
                       :class="activeSection === '{{ $item['id'] }}' ? 'text-primary-600 bg-primary-50' : 'text-gray-600 hover:text-primary-600 hover:bg-primary-50/50'"
                    >
                        <span>{{ $item['label'] }}</span>
                        <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-0.5 bg-primary-500 transition-all duration-300 group-hover:w-3/4"
                              :class="activeSection === '{{ $item['id'] }}' ? 'w-3/4' : ''"
                        ></span>
                    </a>
                @endforeach
            </nav>

            <!-- CTA Button Desktop -->
            <div class="hidden lg:flex items-center space-x-3">
                <a href="{{ url('/self-paced/verify') }}" class="text-sm text-gray-500 hover:text-primary-600 transition-colors duration-200 flex items-center space-x-1">
                    <i class="fas fa-certificate text-xs"></i>
                    <span>Verify Certificate</span>
                </a>
                <a href="{{ url('/register/trainee') }}" class="btn-shine bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/30 hover:-translate-y-0.5">
                    Enroll Now
                </a>
            </div>

            <!-- Mobile Menu Button -->
            <button @click="mobileOpen = !mobileOpen" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200">
                <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path x-show="!mobileOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    <path x-show="mobileOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Mobile Menu -->
    <div
        x-show="mobileOpen"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 -translate-y-2"
        class="lg:hidden bg-white border-t border-gray-100 shadow-lg"
    >
        <div class="max-w-7xl mx-auto px-4 py-4 space-y-1">
            @foreach($menuItems as $item)
                <a href="#{{ $item['id'] }}"
                   @click="mobileOpen = false"
                   class="flex items-center space-x-3 px-4 py-3 rounded-lg text-sm font-medium transition-all duration-200"
                   :class="activeSection === '{{ $item['id'] }}' ? 'text-primary-600 bg-primary-50' : 'text-gray-600 hover:text-primary-600 hover:bg-gray-50'"
                >
                    <i class="fas {{ $item['icon'] }} w-5 text-center"></i>
                    <span>{{ $item['label'] }}</span>
                </a>
            @endforeach
            <div class="pt-3 border-t border-gray-100 space-y-2">
                <a href="{{ url('/login') }}" class="flex items-center space-x-3 px-4 py-3 text-sm text-gray-600 hover:text-primary-600">
                    <i class="fas fa-sign-in-alt w-5 text-center"></i>
                    <span>Login</span>
                </a>
                <a href="{{ url('/register/trainee') }}" class="flex items-center justify-center space-x-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white px-4 py-3 rounded-lg text-sm font-semibold">
                    <i class="fas fa-user-plus"></i>
                    <span>Enroll Now</span>
                </a>
            </div>
            <!-- Mobile Contact -->
            <div class="pt-3 border-t border-gray-100 space-y-2">
                @if($org && $org->email)
                    <a href="mailto:{{ $org->email }}" class="flex items-center space-x-3 px-4 py-2 text-sm text-gray-500">
                        <i class="fas fa-envelope w-5 text-center text-primary-500"></i>
                        <span>{{ $org->email }}</span>
                    </a>
                @endif
                @if($org && $org->hotline)
                    <a href="tel:{{ $org->hotline }}" class="flex items-center space-x-3 px-4 py-2 text-sm text-gray-500">
                        <i class="fas fa-phone w-5 text-center text-primary-500"></i>
                        <span>{{ $org->hotline }}</span>
                    </a>
                @endif
            </div>
        </div>
    </div>
</header>
